Membuat Widget Pencarian di Blog - Halo Sobat NapaRom, Pada Artikel yang sobat baca kali ini dengan judul Membuat Widget Pencarian di Blog, khusus untuk sobat pembaca sedia blog NapaRom. mudah-mudahan isi artikel atau postingan Artikel Blogging, yang saya tulis ini dapat sobat pahami. baiklah, selamat membaca.
Judul : Membuat Widget Pencarian di Blog
link : Membuat Widget Pencarian di Blog
Membuat Widget Pencarian di Blog
Cara Memasang Kotak Pencarian Simple Responsive - Kotak pencarian ini memudahkan pengunjung dan admin blog mereka sendiri untuk menemukan posting yang diperlukan. Blog yang tidak memiliki kotak pencarian di sidebar, di header, atau di bagian yang mudah dilihat oleh pengunjung, katakan tidak user friendly atau tidak user friendly. Perlu kalian ketahui, sejauh pengalaman saya didunia blogging ada banyak template atau theme keren untuk kita pasang di blogger yang kita miliki, namun tampilan kerennya tersebut masih belum bisa menopang kebutuhan para pengunjung blog kita.
Membuat Widget Pencarian di Blog
Saya akan sedikit menjelaskan bagaimana cara mengatasi dan membuat kotak pencarian (search box) keren untuk blogger. Untuk lebih jelasnya silahkan kalian pahami penjelasan dibawah ini :
- Klik Tambah Widget > pilih HTML/Javascript
- Hapus Judul Widget
- Kode sebagai berikut:
<style>
#searchbox {
background: #3A4962;
padding: 2px 1px;
width: 100%;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
#searchbox input {
outline: none;
}
#searchbox input[type="text"] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyuESBaHsKf_L1lZ5-fEar6lhiLRIbVblQ3Bb5Z2prdSaKyAs189Y3aSpsWwpNi2CAnh2lPGy52LlYPBKv3ro95Lv-kNi0tDx09UGhKx7ugjZm8LL8vMB4JQmmKOLFsTpBmPcyUzfufi8c/s1600/search-dark.png) no-repeat 10px 6px #fff;
border-width: 2px;
border-style: solid;
border-color: #3A4962;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #000;
width: 55%;
padding: 8px 15px 8px 30px;
}
#button-submit {
background: #EF5747;
border-width: 0px;
padding: 8px 0px;
width: 27%;
cursor: pointer;
font: bold 12px Arial, Helvetica;
color: #fff;
text-shadow: 0 1px 0 #555;
}
#button-submit:hover {
background: #CF000F;
}
#button-submit:active {
background: #5b5d60;
outline: none;
}
#button-submit::-moz-focus-inner {
border: 0;
}
</style>
<form id="searchbox" method="get" action="/search">
<input name="q" type="text" size="15" placeholder="Type here..." />
<input id="button-submit" type="submit" value="Search" />
</form>- Save
Demikian informasi tentang Membuat Widget Pencarian di Blog. Maaf jika ada kekurangan, silahkan tambahkan beberapa kekurangan pada artikel di kolom komentar. Saya harap informasi ini bermanfaat.
Sekian Artikel Membuat Widget Pencarian di Blog
Sampailah kita pada akhir artikel Membuat Widget Pencarian di Blog kali ini, mudah-mudahan bisa memberi manfaat untuk sobat semua. baiklah, sampai jumpa di postingan artikel lainnya.
sobat sekarang membaca artikel Membuat Widget Pencarian di Blog dengan alamat link https://naparom.blogspot.com/2018/11/membuat-widget-pencarian-di-blog.html
EmoticonEmoticon