Saturday, January 9, 2010

Cara Membuat Kotak Search di Blogspot

Cara Membuat Kotak Search di BlogspotPosting ke-500 ini akan saya isi dengan Trik Blog lagi, yaitu pemasangan kotak Search di Blog. Kotak ini memudahkan kita sebagai pengguna blog untuk mencari artikel yang kita inginkan. Tapi biasanya, ada satu dua artikel yang tidak muncul di hasil search walau sebenarnya artikel itu ada.

Nah sekarang bagaimana kita memasangnya? Gampang saja, ikuti langkah berikut:


  1. Login (Dasbor) - Layout/Tata Letak - Edit HTML
  2. Taruh kode ini di atas kode ]]></b:skin> berikut kodenya:
    #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;
    }
  3. Save dan sekarang ke Elemen Halaman
  4. Add Widget - HTML/Javascript
  5. Masukkan kode ini di 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>
  6. Save dan taaraaaaa....

Gampang bukan? Banget deh, kalo yang mau edit-edit silakan saja. terutama untuk warna, silakan ubah bagian CSS-nya. Semoga bermanfaat!

No comments:

Post a Comment