Senangnya bisa kembali nge-blog bisa kembali nge-share deh Cara Membuat Kotak Pencarian Blog Seperti Google . bener-bener pusing nih nyari ide postingan, udah beberapa hari ini blog ini nggak update, dan juga abis ganti template, jadi sempet-sempetin posting search box ini, jgn ikutin saya ya yang sering ganti template, Membuat search box blog seperti search box kepunyaan Google ini cukup sederhana dengan sedikit kode CSS agar tampilannya mirip, seperti yang bisa Anda lihat di atas postingan ini.
Jika Anda Tertarik Mencobanya Silakan Simak Tips Berikut :
Langkah Pertama :
- Buka Blogger Kalian
- Simpan kode ini diatas kode ]]></b:skin>
#search {background: #fff;border-radius: 2px;}
#search-form
{color:gray;width:50%;padding:6px 70px 6px 10px;font:14px
Arial;transition: all 0.2s linear 0s;margin:-10px 0 10px;border:1px
solid #ccc;border-radius:2px;}
.search-button,.search-button:hover{background-color:#4D90FE;width:60px;padding:2px
5px;margin:5px 0 0 -63px;top:4px;border-radius:0 2px 2px
0;font-size:13px;cursor:pointer;border:none;position:relative;}
#search-form:hover{border:1px solid #aaa}
#search-form:focus{border:1px solid #4D90FE;outline:none;color:black;}
- Dan yang Terakhir HTML nya, silahkan taruh kode ini dimana saja yang penting TIDAK ERROR.
<div id='search'>
<form id='searchform' action='/search' method='get' target='_blank'>
<input
id='search-form' name='q'
onblur='if(this.value=='')this.value=this.defaultValue;'
onfocus='if(this.value==this.defaultValue)this.value='''
type='text' value='Search here ...'/>
<button type='submit'
class='search-button' title='Search'><img alt='search button'
height='21'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNF3ncUuEOofDliEB4zq1SULUmsCIQKyoDAW2Pg0Q0CYePlrW4ffE7gRP7GM1ST6dPx1hmaj9R4Cv2ixo0uP9eaaizQeaIRiuze84nzqhiSc6kTPQ-mrp4wJO_lzRWXS1lF7OicKrr1KCm/s1600/search.png'
title='Search' width='21'/>
</button>
</form>
</div>
Anda Dapat Menganti Tulisan Merah Diatas Dengan Apa yang di inginkan
"Search here ..."
Nanti jadinya kayak seperti dibawah ini.