Dynamic width (Expandable) Search box For Blog

HaiSob apa kabar? pada kesempatan ini saya akan membagikan sebuah widget Blogger yaitu Dynamic width (Expandable) Search Box untuk Blogspot Blogger. Fungsi Search Box di blog untuk memudahkan pengunjung mencari data atau informasi yang mereka butuhkan dan mungkin ada atau tersedia di blog kita.

Pada beberapa template, kotak pencarian ini biasanya sudah dicantumkan, namun bagi yang belum ada jangan khawatir karena kamu bisa membuatnya sendiri, bisa kamu pasang pada menu navigasi blog atau tambahkan sebagai widget di sidebar blog kamu. (baca juga: Clean Search Box For Blog)

Kotak Pencarian (Search Box) di Blogger


Dynamic width (Expandable) Search box For Blog
Clean Search Box For Blogspot


Berikut adalah kodenya: 

<style>
#haisob-searchexpandbox1 { padding:10px; ; }
#haisob-searchexpandsubmit1 { border:1px solid #111111; background:#111111; padding:5px; color:#ffffff; font:14px verdana; ; }
#haisob-searchexpandinput1{-moz-border-radius:10px; -khtml-border-radius:10px; -webkit-border-radius:10px; border:1px solid #dcdcdc; background:#ffffff; padding:5px; color:#888888; font:14px verdana; transition:width 2s; -webkit-transition:width 2s; /* Safari */
-o-transition:width 2s; /* Opera*/
-moz-transition:width 2s; /* firefox*/
width:65px; }
#haisob-searchexpandinput1:hover { width:200px; ; }
</style>
<div id='haisob-searchexpand1'>
         <form action='/search/max-results=8'  method='get' id="haisob-searchexpandbox1">
            <input name='q' id='haisob-searchexpandinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
            <input id='haisob-searchexpandsubmit1' type='submit' value='Search'/>
         </form>
      </div>

Cara memasang Dynamic width (Expandable) Search Form di Blogger


1. Di Blog kamu 😄
2. Pilih menu Tata Letak  ➜ Tambahkan Gadget.
3. Kemudian pilih widget HTML/JavaScript
Dynamic width (Expandable) Search box For Blog
Tata Letak ➔ Tambah Gadget ➔ HTML / Javascript

4. Masukan kode dikolom yang tersedia
5. Save widget.

Sekian Dynamic width (Expandable) Search box For Blog, salam Blogers.
Join This Site