Cara Memasang Search Box - Cari Di Blog Ini

Memasang Search Box - Cari Di Blog Ini sebenarnya adalah, untuk mempermudah / mempercepat proses pencarian sebuah arikel. Bayangkan saja, jika kita telah memiliki satusan postingan dan memerlukan satu artikel, berapa lama waktu untuk mencarinya.

Artikel Search Box ini saya copas dari mbak IngetS (http://evawangi.blogspot.com). Awalnya saya pikir box biasa-biasa saja. Tapi setelah terpasang, sangat menarik. Trik Cara Membuar Search Box ini, 100% jadi (seperti dibawah ini).

Search Box atau kotak pencarian sangatlah penting dan dibutuhkan keberadaannya pada blog kita, akan tetapi adakalanya para perancang template tidak memfasilitasi hal ini. Meski blogger sekarang memberikan layananya Search Box ini namun tampilannya kurang begitu greget dan susah untuk kita modifikasi. Nach..,untuk itu itu mari kita Membuat Search Box Keren sendiri dengan tampilan cantik dan bisa kita modifikasi sendiri. mari ikuti langkahnya sebagai berikut ;

Login ke akun blogger
1. Klik Design/Layout/Tata Letak
2. Page Element
3. Add a Gadget HTML/Javascript
4. Kemudian masukan kode berikut ini :

<style type="text/css">
#searchboxo{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlcsZjVsk3HpkoAuD3JPmTVe2wYlOz969omBGvFbULcMLJnJ_TLMSpk-1JSUnXkcJHN5Kmt7lQ_okcZlVEzZSzgSRj-Zwh3wFwRqKodC4-U1hkSTbk2URlFNn0g4eUMteQQ2qvgFHnElEl/s1600/topmenueva.jpg)repeat;
border:1px solid #564E15 ;
width:350px;
height:25px;
margin:0px;
padding:4px;
}
#searchboxo form input.searchinput{
float:left;
padding:2px;
padding-top:2px;
margin-left:2px;
width:240px;
height:19px;
color:#000;
font-size:14px;
border:1px solid #6B7171;
background:#475346;
}
#searchboxo form input.submitbutton{
float:right;
width:85px;
height:25px;
margin-right:2px;
padding-bottom:4px;
font-variant:small-caps;
text-align:center ;
cursor:pointer;
border:1px solid #6B7171;
background-color:#6B7171;
color:#FFFFFF;
font-weight:bold;
font-size:12px}
</style>
<div id='searchboxo'>
<form action='/search' id='searchform' method='get'>
<input class="searchinput" id="searchbox" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Type text to search&quot;;}" onfocus="if (this.value == &quot;Type text to search&quot;) {this.value = &quot;&quot;;}" type="text" value="Type text to search" />
<input class="submitbutton" type="submit" value="Search" />
</form>
</div>

5. Save Widget dan lihat hasilnya, semoga berhasil dan tentunya bisa bermanfaat.

Keterangan :

background:url = Tulisan berwarna merah ganti dengan background yang sesuai dengan template sobat. Sesuaikan pula setiap ukuran lebar (width) dan tingginya (height).