Cara Membuat Kotak Pencarian atau Search Box di Blog

Widget pencarian atau search box berfungsi untuk mencari artikel atau postingan dengan cara mengetikkan beberapa kata yang ingin dicari ke dalam kotak tersebut.

---

Tombol search box juga berfungsi untuk mengangkat postingan lama ke kategori Populer Post.
Search box sangat penting untuk di blog atau web.
Fungsi penting search box untuk web tersebut sudah pasti ada, karena 99% website ada widget search box.
Pada umumnya sudah jelas bisa mengangkat artikel blog menjadi tingkat Populer untuk web itu sendiri.

Kotak pencarian sangat berguna buat pengunjung menemukan artikel yang mereka cari pada situs tersebut.
Bermacam macam search box yang keren, tetapi disini hanya memberikan search box yang sederhana seperti pada umumnya.

Cara Membuat Kotak Pencarian Search Box Di Blog.
◉ Script Search Box buat Gadget

<style>
    #searchbox { background:rgb(23, 176, 255, 0.5); border: 4px solid #eee; padding: 0px 0px; width: auto; }
    input:focus::-webkit-input-placeholder { color: transparent; }
    input:focus:-moz-placeholder { color: transparent; }
    input:focus::-moz-placeholder { color: transparent; }
    #searchbox input { outline: none; }
    #searchbox input[type="text"]
       { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCNw3_94uEQpbM0RT3wpYt_MoHf-yfTjpSGfpIebI3eAsN6N987NIVa2moplUsObNGLcTHLGoxSFB0Z-ld1qBcBghbjuB2aAg0kjlvMP7d6RnJOy6vEnEgBQ_1Aw1msRj-k9B4JzNiRG99/s1600/image-search-M5B.png) no-repeat 10px 6px #f7f7f7;
        border-width: 1px; border-style: solid;  border-color: #fff; font: bold 12px Arial,Helvetica,Sans-serif;
        color: #bebebe; width: 58%; padding: 8px 15px 8px 30px; }
    #button-submit { background: transparent; border-width: 0px; padding: 9px 0px; width: 25%;
        cursor: pointer; font: bold 12px Arial, Helvetica; color: #fff; text-shadow: 0 1px 0 #555; }
    #button-submit:hover { background: #ff0000; }
    #button-submit:active { background: #5b5d60; outline: none; }
    #button-submit::-moz-focus-inner { border: 0; }
</style>

<form id="searchbox" method="get" action="/search">
<input name="q" type="text" size="15" placeholder="Type here..." />
<input id="button-submit" type="submit" value="Search" />
</form>

Semoga berguna...

# MEDIA 5 BINTANG # Tips Blogger # Cara Membuat Kotak Pencarian atau Search Box di Blog