Cara Memasang Kotak Pencari (Search Box) untuk Blogger dan Website

mekz

blogging, tips dan trik

15 Maret 2014

2 Komentar

Dalam ulasan sebelumnya saya pernah menulis tentang Cara Membuat Teks Default pada Search Box dengan Javascript dan JQuery, dan pada akhir pekan ini saya akan kembali mengulas sedikit kepada teman-teman bagaimana caranya memasang kotak pencarian atau search box pada blogger maupun website kalian.

Secara umum kotak pencarian atau search box ini tidak ada bedanya dengan kotak pencarian bawaan milik blogger, perbedaan terletak pada style dan tentu saja warna. Saya pribadi berpendapat warna merupakan faktor penting sebagai penunjang UX atau user experience, yang mana warna-warna eye catching biasanya akan memancing user atau pengunjung blog untuk mau menggunakan kotak pencarian tersebut dalam meng'explore artikel lain.

Bagi teman-teman yang ingin menambahkan kotak pencarian kustom pada blogger maupun website kalian, silahkan kamu simak kode CSS beserta HTML yang sudah saya sematkan di bawah berikut ini.

Untuk penggunaan pada blogger, kamu bisa langsung memasang dengan meng'copy semua code ini kemudian tambahkan gadget baru → HTML/Javascript → Save dan lihat hasilnya.

Berikut adalah kode CSS da HTML dari kotak pencarian atau search box bergaya Metro Style tersebut.

<style>
#thesigit-net-btn {
    background: none repeat scroll 0 0 #359BED;
    border: 0 none;
    border-radius: 0 0 0 0;
    color: #FFFFFF;
    font-weight: 700;
    padding: 10px 20px;
}

#thesigit-net-box {
    background: none repeat scroll 0 0 #EEEEEE;
    border: 0 none;
    padding: 10px;
    width: 160px;
}

</style>
<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="thesigit-net-box" name="q" size="40" type="text" placeholder=" Cari Disini "/>
<input id="thesigit-net-btn" value="Search" type="submit"/>
</form>

Untuk penggunaan pada website, teman-teman bisa mulai memisah kode tersebut dengan memasang dahulu CSS nya setelah tag <title>, kode CSS di mulai pada tag <style> dan di akhiri oleh tag </style>.

Sedangkan untuk menampilkan kotak pencarian tersebut tentu saja teman-teman tinggal memasang kembali tag HTML yang di awali oleh tag </form id=.......> dan di akhiri atau di tutup oleh tag </form>.

Lebih jauh tentu saja teman-teman masih bisa berkreasi dan mengeksplorasi baik dari CSS maupun HTML di atas. Sekian kiranya ulasan singkat saya kali ini, semoga berguna dan bermanfaat bagi kawab-kawan semua. Wassalam.