Cara Membuat Kotak Pencari/Search Box Di Blog

Kotak Pencari/Search box ada beberapa macam, misalnya search engin google, untuk mencari di google, pasti pada tau kan search engine yang satu ini...mbah google, banyak template blog yang sudah ada kotak pencarinya/search box, tapi ada beberapa template juga yang tidak ada kotak pencarinya/search box, nah kali ini saya ingin menjelaskan cara pembuatan kotak pencari/search box, khusus hanya untuk mencari artikel/postingan yang ada di blog.

Cara pembuatannya :

LANGKAH PERTAMA

1. Login ke Blogger.
2. Pilih Tata letak
3. Pilih Edit HTML.
4. Tempatkan kode di bawah ini sebelum kode ]]></b:skin> atau tag di dalam CSS
   
   

   #search {
   width: 280px;
   font-size: 11px;
   float: right;
   margin: 0;
   padding: 6px 0 0;
   }
   
   #searchform {
   margin: 0;
   padding: 0;
   overflow: hidden;
   display: inline;
   }
   #searchbox {
   background: #84CAF6;
   width: 220px;
   color: #000;
   margin: 0;
   padding: 4px 0 3px 5px;
   border: 1px solid #005BC3;
   display: inline;
   font: normal 12px Georgia, Times New Roman, Trebuchet MS;
   }
   #searchbutton {
   background: #84CAF6 !important;
   color: #000;
   margin: 0 0 0 5px;
   padding: 3px 3px 2px;
   border: 1px solid #005BC3;
   font: bold 11px Georgia, Times New Roman, Trebuchet MS;
   }

   
   
5. Simpan Template, kemudian ke element halaman
6. Add Widget - HTML/Javascript
7. Copy kode di bawah ini ke dalam content
   
   

   <div id="search">
   <form id="searchform" action="/search/" style="display:inline;" method="get">
   <input id="searchbox" maxlength="255" onfocus="if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}" value="Search..." name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}" type="text"/>
   <input id="searchbutton" value="GO" type="submit"/>
   </form></div>

8. Kemudian Simpan dan lihat hasilnya
   
   

Cat " Untuk lebar panjang dll kotak pencari/search box itu berkreasi sendiri aj udah pada tau kan tinggal di ganti aj ukuranya di script yang tadi di copy di HTML nya...
kemudian kotak pencari/search box selain di tempatkan di page halaman, selain itu juga bisa di tempatkan di header, nav menu, dll...berkreasi sendiri ajalah...

Trim's . . .

Kembali Ke Beranda Blog