Modifikasi Widget Search Blogger. Part 1

Widget Search Blogger rohis Facebook

Bismillah...

Modifikasi Widget Search Blogger. Part 1 -- Dua bulan lebih Blog Rohis Facebook tidak memposting tentang Tutorial Blogger, sekarang tiba saatnya untuk 'Balas Dendam', sekali memposting langsung 4 (empat) artikel hehehe....

Rasa-rasanya aneh kalau ada web atau blogger yang tidak memasang Widget Search karena Widget Search ini sangat berguna untuk memudahkan para visitor untuk mencari-cari artikel, artikel dengan berbagai kategori. Untuk tutorial kali ini tampilannya Widget Search lebih elegan dan cocok untuk semua warna template.

Cara membuatnya.

1. Login ke Akun blogger

2. Klik Template
3. Klik Layout
4. Tambahkan gadget HTML/JavaScript Add  
5. Masukkan kode dibawah ini

<!—Caixa de busca elegante By http://www.dicasblogger.org/ --> <style>#search {float:right; height: 30px; margin:10px 0 0 0; } #search input.field {font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; background-position:top right; background-repeat:no-repeat; width: 160px; padding:7px; outline: none; font-size: 13px; border: none; z-index: 1; height:16px; float:left; padding-right:30px;} #search input.field:focus {background-position:top right; background-repeat:no-repeat;} #search input.submit {width:70px; height:30px; font-weight:bold; float:left; border:none; font-family: Arial, Helvetica, sans-serif; font-size: 13px; cursor:pointer; margin:0 0 0 1px;} #search input.field {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_vAsRTPIzuFsECwfJ_BwiSVzMOUuFs96k9Slf8dioUjtcfksDOqMiK7_HLQqgkLDYYIVUwWRQs0xhnqK1nKQLrhNlPcb3Hh6p4hweK6b2Fi8Zn-uxs9-fV7A-hRBVQrRh0Mxg6HvkbA0F/s30/search_icon.png); background-color:#2c2c2c; color: #FFF;} #search input.field:focus {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_vAsRTPIzuFsECwfJ_BwiSVzMOUuFs96k9Slf8dioUjtcfksDOqMiK7_HLQqgkLDYYIVUwWRQs0xhnqK1nKQLrhNlPcb3Hh6p4hweK6b2Fi8Zn-uxs9-fV7A-hRBVQrRh0Mxg6HvkbA0F/s30/search_icon.png); background-color:#404040;} #search input.submit {background-color:#b60002; color:#fff;}</style> <div id='search'> <form action='/search' id='searchform' method='get'> <div><input class='field' id='s' name='q' onblur='if (this.value == '') {this.value = 'Enter keywords..';}' onfocus='if (this.value == 'Enter keywords..') {this.value = '';}' type='text' value='Enter keywords..'/> <input class='submit' name='submit' type='submit' value='Buscar'/></div></form></div>

Lihat Demonya

Sumber :  http://www.dicasblogger.org/2012/08/caixa-de-busca-elegante.html