Cara Membuat Kotak Pencarian / Search Box pada Menu Bar Blog

 

 Tak lengkap rasanya jika blog super seo keren tapi tidak memiliki kotak pencarian / search box di menu bar. saya sendiri sudah merasakan, untuk itu saya akan memberi solusi bagi yang memiliki permasalahan seperti saya dengan menggunakan kode css. Berikut langkah yang harus diikuti

1. Masuk ke Bloggger.com 
2. Klik Template => Edit HTML
3.  Cari kode ]]></b:skin> 
4. Copy kode css dibawah ini, lalu paste diatas kode ]]></b:skin>
/*Search Box CSS3*/ #search{position:relative;float:right;margin:5px 10px 5px 10px}li.search{float:right;line-height:normal}#search input[type="text"]{float:left;background:#444;height:30px;line-height:30px;border:0 none;font-size:12px;font-weight:500;width:120px;padding:0 10px}#search input#search-button{height:30px;line-height:30px;background:#0054BB;border:1px solid #fff;float:right;padding:0 10px;cursor:pointer;color:#fff}#search input#search-button:hover{background:#333}#search input[type="text"]:focus{background-color:#fff;text-shadow:none!important;outline:none;color:#555}
5. Cari kode css menu bar anda
6. Copy kode html dibawah ini, lalu paste diatas kode </ul> tepat diakhir css menu bar
   <li class='search'> <form action='/search' id='search' method='get'> <input name='q' placeholder='Pencarian...' size='40' type='text'/><input id='search-button' type='submit' value='Cari'/></form> </li> 
7.  Klik Simpan Template

Catatan :
1. Cara diatas adalah untuk menyimpan kotak pencarian dibagian menu bar.
2. Jika ingin menyimpannya selain di menu bar, silahkan simpan kode html dibagian Tata Letak dan mengganti kode li dengan kode div.