rssrss

Senin, 01 Maret 2010

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

3 komentar:

mp3 on 24 Juli 2010 07.57 mengatakan...

kok gak bisa ya mas!! kalo membuat kotak pencari dengan memisahkan kategorinya bisa ga mas.....

"Bonek Juga Manusia" on 29 November 2010 12.24 mengatakan...

mas kalau cara kotak box ini berfungsi gmn caranya????
ty sebelumnya infonya,,,

Nikmaya John on 8 Maret 2011 00.34 mengatakan...

Pake lijit mantapp gan,,,, bisa juga buat monetasi blog..


Posting Komentar

 
Terima kasih atas kunjungannya

Pengunjung Blog

Pengikut