Elegant green Search box for Blog

HaiSob apa kabar? pada kesempatan ini saya akan membagikan sebuah widget Blog yaitu Elegant green Search Box untuk Blogger Blogspot . Fungsi Search Box di blog untuk memudahkan pengunjung mencari data atau informasi yang mereka butuhkan yang mungkin ada di blog kita.

Pada beberapa template, search form ini biasanya sudah ada biasanya diletakan pada navigasi menu ataupun pada sidebar blog, namun bagi yang belum ada jangan khawatir karena kamu bisa membuatnya sendiri. (baca juga: Dynamic width Search Box For Blog)

Kotak Pencarian (Search Box) di Blogger


Elegant green Search box for Blog
Elegant green Search Box For Blogspot


Berikut adalah kodenya: 

<style>
#haisob-searchgreen1{background:rgb(143,196,0); /* Old browsers */
background:-moz-linear-gradient(top,rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* FF3.6+ */
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(143,196,0,1)),color-stop(100%,rgba(143,196,0,1))); /* Chrome,Safari4+ */
background:-webkit-linear-gradient(top,rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* Opera 11.10+ */
background:-ms-linear-gradient(top,rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* IE10+ */
background:linear-gradient(to bottom,rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#8fc400',endColorstr='#8fc400',GradientType=0 ); /* IE6-9 */
border-radius:10px; width:290px; }
#haisob-searchgreenbox1 { padding:10px; ; }
#haisob-searchgreensubmit1 { border:1px solid green; background:green; padding:5px; color:#ffffff; font:14px verdana; ; }
#haisob-searchgreeninput1 { -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-searchgreen1'>
         <form action='/search/max-results=8'  method='get' id="haisob-searchgreenbox1">
            <input name='q' id='haisob-searchgreeninput1' 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-searchgreensubmit1' type='submit' value='Search'/>
         </form>
      </div>

Cara memasang Elegant green Search Form di Blogger


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

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

Sekian Elegant green Search box For Blog, salam Blogers.
Join This Site