Cara1 Membuat Kotak Pencarian dengan Widget Blogspot
Pada blogspot sudah tersedia widget kotak penelusuran. Tapi bagaimana cara memasangnya? Oke, Langsung saja saya jabarkan tahapan-tahapannya sebagai berikut.
1. Login ke akun Blogger
2. Klik Menu Layout / Tata Letak
3. Klik Tab Page Element
4. Klik Pada Add a Gadget / Tambahkan Gadget
5. Lalu Pilih "Kotak Penelusuran"
6. Simpan [ Finish ] -> Search Box / Kotak Pencarian akan segara tampil di blog.
Tapi Saya sarankan anda menggunakan cara yang kedua. Karena pada cara yang kedua kotak pencarian akan jauh
Cara2 Membuat Kotak Pencarian Menggunakan HTML
Anda juga bisa membuat kotak penelusuran dengan menggunakan HTML. Ikuti langkah pada cara1 langkah 1 - 4, lalu pada langkah 5 pilih yang "HTML/JavaScript". Kemudian copy-pastekan script dibawah ini ke dalam widget tersebut.
<form action="/search" method="get" style="display: inline;"><br /><input id="s" name="q" placeholder="Masukkan Kata Kunci Disini, lalu tekan enter " type="search" /><br /></form><br /><style>
#s {
margin: 0 auto;
-webkit-appearance: none;
-moz-appearance: none;
padding: 12px 48px 12px 12px;
-webkit-border-radius: 300px;
-moz-border-radius: 300px;
border-radius: 300px;
width: 300px;
height: 16px;
color: #3a4449;
border: none;
outline: none;
-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
position: relative;
z-index: 2;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSaXkUwlFh8zVSdGd1u_xqu_aCi9MBCTd_8Dsx0w1Cg_WMauDbhsaVOf4ey01Noql7TyTBmvFDlccsZiAQFx459JMXg2zDlEijjKNbf2Fnl0tTmDdJnOUDopGKu_XpuYewrid1XlkOAuM/s1600/Search.png) center right no-repeat;
}
#s::-webkit-input-placeholder, #s:-moz-placeholder {
color: #607078;
}
</style>
Panjang kotak pencarian bisa diatur dengan mengganti nilai yang berwarna merah yang ditunjukkan pada skrip diatas. Hasilnya akan seperti gambar dibawah ini. Mudah kan? Selamat mencoba.
