Sekarang kembali lagi blog mestiqui.com akan membagikan tips blogger setelah beberapa postingan sebelumnya tentang kesehatan dan kecantikan, untuk tutorial blogger kali ini yaitu
cara membuat tombol search keren.
Tombol search ini salah satu widget yang sangat berguna untuk digunakan di blog, agar pengunjung bisa mencari artikel yang mereka sedang mencarinya.
Tombol search ini juga sudah saya modifikasi sehingga tampilannya yang cukup keren (menurut saya) hehe. Silahkan Anda nilai sendiri apakah tombol search ini keren atau tidak. Jika tombol search ini keren, silahkan tinggalkan komentarnya, hehe.
Tombol search ini juga tidak membutuhkan banyak kode CSS dan HTML, melainkan kodenya hanya sederhana, tetapi tampilannya tetap oke, tidak kalah dengan tombol search yang lainnya, untuk melihat demonya, silahkan Anda lihat gambar dibawah ini :
Setelah Anda lihat demo tombol search diatas, apakah Anda tertarik untuk membuat tombolnya ?? Jika Anda tertarik membuat tombol search, berikut selengkapnya.
Cara Membuat Tombol Search Keren
1. Login ke blogger > template > edit html.
2. Cari kode ]]></b:skin> dan letakan kode berikut dibawah kode tadi.
.search-mestiquicom{float:right;width:296px;margin:5px 0 0 0;border:2px solid #393939;}.search-mestiquicom input{width:196px;height:26px;line-height:26px;padding:0 12px;float:left;font:normal 12px Arial,sans-serif;border:0;background:#eee;}.search-mestiquicom input:focus{outline:0;background:#fff;box-shadow:2px 2px 5px rgba(0,0,0,.8) inset}.search-mestiquicom button{overflow:visible;float:right;border:0;
padding:0;cursor:pointer;height:26px;width:76px;font-weight:bold;color:#fff;text-transform: uppercase;background:#393939;;text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);}.search-mestiquicom button:hover{background:#da290b}
3. Simpan template Anda.
4. Setelah itu masuk ke Tata Letak > Tambahkan Gadget > lalu masukan kode dibawah ini.
<form action='/search' class='search-mestiquicom' method='get'>
<input id='a' name='q' placeholder='Cari Sesuatu...' type='text'/>
<button type='submit'>SEARCH</button>
</form>
5. Simpan gadget.
Baca juga artikel yang bisa memperkeren blog Anda :
Dengan memasang tombol search keren ini juga tambah mempercantik blog Anda, semoga artikel blog mestiqui.com kali ini bisa bermanfaat bagi Anda, dan jika ada kesalahan apapun, saya minta maaf sebesar-besarnya, terimakasih.