Cara Membuat Search Box Disidebar Blog

Search Box Blog adalah sebuah kotak pencarian agar kita lebih mudah mencari sebuah artikel dalam blog tersebut, Sekarang saya akan menbagikan Cara Membuat Search Box Disidebar Blog agar pengunjung lebih mudah untuk mencari artikel diblog anda.

DEMO

Berikut langkah - langkahnya Cara Membuat Search Box Disidebar Blog :

• Login dan masuk ke blog anda
• Klik tab Tata Letak >>> Tambah Widget

• Pilih HTML/Javascript

• Lalu copy kode dibawah ini 

<style>
    #searchbox {
        background: #d8d8d8;
        border: 4px solid #e8e8e8;
        padding: 20px 10px;
        width: 250px;
    }

    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/AVvXsEiYgGlIMyd3gj1ujovW4dvbi73hoT19YXrc0yyLKgUQAFc5AXiPKBMkazIuDia6g2HNrmxvOCutF6BJfnDWqVRUzxEZx89zDHSD3GmaOfa8dUt98BTaMgsnUU4UJpJxuBYT1-b7S0tZiOJQ/s1600/search-dark.png) no-repeat 10px 6px #fff;
        border-width: 1px;
        border-style: solid;
        border-color: #fff;
        font: bold 12px Arial,Helvetica,Sans-serif;
        color: #bebebe;
        width: 55%;
        padding: 8px 15px 8px 30px;
    }

    #button-submit {
        background: #6A6F75;
        border-width: 0px;
        padding: 9px 0px;
        width: 23%;
        cursor: pointer;
        font: bold 12px Arial, Helvetica;
        color: #fff;
        text-shadow: 0 1px 0 #555;
    }

    #button-submit:hover {
        background: #4f5356;
    }

    #button-submit:active {
        background: #5b5d60;
        outline: none;
    }

    #button-submit::-moz-focus-inner {
        border: 0;
    }
    </style>
<center>
    <form id="searchbox" method="get" action="/search">
    <input name="q" type="text" size="15" placeholder="Cari Tips/Trick, Atau Info..." />
    <input id="button-submit" type="submit" value="Cari" />
    </form></center>

• Lalu pastekan pada kolom yang disediakan seperti gambar dibawah ini

• Jika sudah klik Simpan

• Terakhir klik Simpan setelan

• Selesai

Mudahkan hanya begitu Cara Membuat Search Box Disidebar Blog , mungkin jika ada yang kurang dipahami silahkan tanyakan lewat komentar.




Keyword : Cara Membuat Search Box, Search Box Disidebar Blog, Cara Menambahkan Search Box Disidebar Blog, CSS Search Box, HTML Search Blog