Easy blue Search box for Blog

HaiSob apa kabar? Berikut ini saya akan membagikan sebuah widget Blogger yaitu Easy blue Search Box untuk Blogger Blog . Fungsi Search Box di blog untuk memudahkan pengunjung mendapatkan data atau informasi yang mereka butuhkan yang ada di blog kamu.

Di beberapa template, Widget Search Box ini biasanya sudah ada dan diletakan pada navigasi menu atau ada pada sisi blog, namun bagi yang belum ada jangan khawatir karena kamu bisa membuatnya sendiri. (baca juga: Elegant Green Search Box For Blogspot)

Kotak Pencarian (Search Box) di Blogger


Easy blue Search box for Blog
Easy blue Box For Blogspot


Berikut adalah kodenya: 

<style>
#haisob-searchblue1{background:rgb(37,141,200); /* Old browsers */
background:-moz-linear-gradient(top,rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* FF3.6+ */
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(37,141,200,1)),color-stop(100%,rgba(37,141,200,1))); /* Chrome,Safari4+ */
background:-webkit-linear-gradient(top,rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* Opera 11.10+ */
background:-ms-linear-gradient(top,rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* IE10+ */
background:linear-gradient(to bottom,rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#258dc8',endColorstr='#258dc8',GradientType=0 ); /* IE6-9 */
border-radius:10px; width:290px}
#haisob-searchbluebox1 { padding:10px; }
#haisob-searchbluesubmit1 { border:1px solid orange; background:orange; padding:5px; color:#ffffff; font:14px verdana; }
#haisob-searchblueinput1 { -moz-border-radius:10px; -khtml-border-radius:10px; -webkit-border-radius:10px; border:1px solid #ffffff; background:#ffffff; padding:5px; color:#888888; font:14px verdana; }
</style>
<div id='haisob-searchblue1'>
         <form action='/search/max-results=8'  method='get' id="haisob-searchbluebox1">
            <input name='q' id='wc-searchblueinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
            <input id='haisob-searchbluesubmit1' type='submit' value='Search'/>
         </form>
      </div>

Cara memasang Easy blue Search Form di Blogger


1. Di Blog kamu 😉
2. Pilih menu Tata Letak  ➜ Tambahkan Gadget.
3. Kemudian pilih widget HTML/JavaScript
Cara memasang Easy blue Search Form di Blogger
Tata Letak ➔ Tambah Gadget ➔ HTML / Javascript

4. Masukan kode dikolom yang tersedia
5. Save widget.

Sekian Easy blue Search box For Blog, salam Bloggers.
Join This Site