Simple Search Box dengan Ease-Effect

Kotak Pencarian Sederhana (Simple Search). Dalam mengelola sebuah Blog, tentunya sobat pernah mempunyai masalah Lay-Out widget, dimana space atau ruang di blog anda terasa sempit. He..he.. jangan semua widget hasil blogwalking anda pasang sob, tidak ada habisnya. Bukankah anda sadar kalau “Posting is the King!!”. Nah untuk masalah yang satu ini saya mendapat pengalaman dari berlangganan artikel di Kompi Ajaib. Memang tampilannya sederhana, tapi dapat menyelesaikan masalah anda diatas. Betul sobat??. Menurut juragan Kompi Ajaib, salah satu solusinya adalah dengan Menyembunyikan Search Box Dalam Icon dan ini akan berguna dalam menghemat space dalam blog, dan tampilan blog anda akan lebih simple. Tetapi jika sobat ingin mendaftarkan Blog sobat ke Google Adsense.

Berikut dibawah ini adalah langkah langkah penerapan dari menyembunyikan Kotak Pencarian anda :

► Copy CSS- Code di bawah ini dan simpan di atas kode ]]></b:skin>

#search input[type="text"]:hover, #search input[type="text"]:focus {
width:200px;
border: 2px solid #333;
border-radius:50px;
padding-left:35px;
}
#search input[type="text"] {
background: #fff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZpj4oGs2FxHY-50sA9ncK8sJwpwXz35jrtwSjWjs-2LGXC3ExuBrObmNCiHd5Zb1tcZRG9P47-500lIiOHFRPnfmUhNJrwVAAGqmWlmFquwzGqBERRMjlu-SVxnou4AL1sZ1WvP9DPs8/s1600/tombolcari.gif")no-repeat center left 5px;
width:0px;
font-size: 12px;
color: #222;
padding: 10px 10px 10px 25px;
transition: all 0.5s ease-in-out;
margin:4px 0;
z-index: 9;
position: absolute;
border: 1px solid #333;
border-radius:50px;
right:5px;
}

Catatan : Kode yang berwarna merah di atas, itu untuk lebar box ketika disorot mouse. Anda bisa sesuaikan dengan space search boxnya.

► Untuk memanggilnya, copy HTML-Code di bawah, kemudian simpan di widget Anda.

<form action='/search' id='search' method='get'>
<input id='q' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='Type and hit Enter here ....'/>
</form>

Demikian tadi Simple Search Box dengan Ease-Effect, salah satu solusi menghemat space pada blog, hasil karya Kompi Ajaib, dan shared by Hotline Terkini Blog untuk kepentingan sobat blogger yang mengalami masalah space di blog. Semoga bermanfaat.

Bagikan Artikel ini via :

Share on fb Tweet Share on G+