Hai sobat, kali ini saya akan berbagi trick yaitu bagaimana cara menambahkan kotak search pada ujung menu bar, mungkin ini banyak dibutuhkan pada orang yang menggunakan template bawaan blog yang belum menambahkan kotak search, oke langsung saja di bawah adalah langkah-langkah menambahkan kotak search pada menu bar, silahkan disimak.
1.Login ke blogger.
2.Pada dashboard pilih Template > Edit HTML
3.Salin kode dibawah ini tepat di atas 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}4.Buka css menu bar milik sobat.
5.Salin copy kode html di bawah ini dan paste diatas kode </ul> tepat diakhir css menu bar sobat.
<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>
6.Simpan Template.Keterangan :
1.Cara diatas adalah cara menyimpan kotak search pada menu bar.
2.Jika ingin meletakan kotak search pada lain tempat, maka simpanlah kode html di bagian Tata Letak dan gantilah kode li dengan div
Selamat mencoba dan semoga bermanfaat.
Show Konversi KodeHide Konversi Kode Show EmoticonHide Emoticon