22 Juli 2010

Cara membuat Kotak Search

Pasti sudah tau apa itu kotak search. search box atau kotak search memudahkan pengunjung blog kita untuk mencari suatu keyword atau artikel yang mereka inginkan di blog kita. Tidak mungkin mereka membuka satu persatu blg kita hanya demi mencari sebuah artikel. Kotak search ini solusinya langsung aja langkah-langkah memasang kotak search adalah sebagai berikut
:
  1. Log in dulu ke akun blogger kamu.
  2. masuk ke Edit HTML - cari code ]]></b:skin> (tekan CTRL + F )
  3. setelah ketemu, letakkan cede (css) di bawah ini di atas code ]]></b:skin> tadi.
    #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;
    }
  4. SAVE template anda.
  5. Lalu masuk ke Rancangan.
  6. Klik add Gadget - html java script dan masukkan code dibawah ini
    <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>
  7. Lalu save. Dan lihat hasilnya di blog anda.. Selesai .sangat mudah bukan.untuk mennganti warna tinggal ganti code-code warna pada CSS yg tadi saya berikan. kotak search idaman anda sudah jadi. Semoga bermanfaat.
sumber: ardi33

    ads

    10 komentar:

    1. ane coba dulu sob.....mampir ya....

      BalasHapus
    2. makasih atas tutorialnya

      BalasHapus
    3. kunjungan perdana sob....makasih infonya...mampir balik ya....

      BalasHapus
    4. mantaff kang... sekarang searchnya sudah berfungsi....

      BalasHapus
    5. keren sob kalau blog q juga dah ada alias bawaan template

      BalasHapus
    6. maksudnya ini bukan kotak search google kan? tapi untuk searching di dalam blog? soalnya kebanyakan blog/web yang saya liat, ada kotak searchnya tapi padahal itu google search. jadi saya tetap aja harus ubek-ubek isi blog dari awal buat nyari tutorial yang saya butuhkan. btw, thx for share dan salam kenal.

      BalasHapus
    7. info keren gan... tp.. aku dahbwaan tmplate

      BalasHapus
    8. mantap nih artikelnya ,,,berguna sekali,,

      BalasHapus
    9. menarik buat dicoba,,thanks,,

      BalasHapus