Cara Membuat Search Box Disidebar Blog

Encrypting your link and protect the link from viruses, malware, thief, etc! Made your link safe to visit.

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/AVvXsEjo3_WrKDr0znwZd4PSDrz-KnvMDltZnPYjfg279TjScM8GR8E9DdNRSDvhtLIUKL3ODXQXcGscjCQMW4NgLdKKGRXFQiu_AFx8MmkNqZyYCOYnM1ycsQKhO3xepawlQ6TSg9YO4SkaxqW_/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