Kotak Penelusuran Untuk Blogger

Membuat Kotak Penelusuran Untuk Blogger

Membuat kotak penelusuran di blog memang merupakan hal yang penting karena dapat memudahkan para pengunjung untuk lebih leluasa mencari artikel yang mereka inginkan. Untuk itu bila kamu belum membuatnya, kamu bisa membuatnya dengan langkah yang cukup mudah

Sebenarnya didalam menu layout template sudah disediakan opsi kotak penelusuran tetapi untuk kotak penelusuran dibawah ini akan lebih mengindex artikel blog, sehingga akan lebih banyak artikel blog yang muncul dihasil pencarian.

Membuat Kotak Penelusuran :

1. Masuk ke akun blog,

2. Klik Layout Pilih Add Gadget,

3. Letakkan kode berikut ini,

<style type="text/css">
#mediablogger-searchbox {
    border-radius: 5px;
    background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOXYUw9kBSn0vTWd32b8CWMxnFDGPKVz7zbBFNIN65GtedROhQi0Xx6B7VduRj-MZx3V7D_CEUwFdPpMO6Quz2x0kEJyE7wcyI_sA2xev_p_KdBs1Wr1S1eMwRquUVNDoT3wh4_rDQMFFz/s1600/impoint.blogspot.com-search-box.png) no-repeat scroll center center transparent;
    width: 307px;
    height: 50px;
    disaply: block;
}

form#mediablogger-searchform {
    display: block;
    padding: 10px 12px;
    margin: 0;
}

form#medialogger-searchform #s {
    padding-left: 24px !important;
    padding: 7.5px;
    margin: 0;
    width: 220px;
    font-size: 14px;
    font-family: verdana;
    vertical-align: top;
    border: none;
    background: transparent;
}

form#mediablogger-searchform
#sbutton {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 44px;
    vertical-align: top;
    border: none;
    background: transparent;
}
</style>
<div id="mediablogger-searchbox">
    <form id="mediablogger-searchform" action="/search" method="get">
        <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Search...";}' />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>
</div>

4. Simpan,

5. Selesai.

 Bila kamu menggunakan script diatas maka hasilnya seperti berikut ini