Membuat Widget Pencarian di Blog

Cara Memasang Kotak Pencarian Simple Responsive - Kotak pencarian ini memudahkan pengunjung dan admin blog mereka sendiri untuk menemukan posting yang diperlukan. Blog yang tidak memiliki kotak pencarian di sidebar, di header, atau di bagian yang mudah dilihat oleh pengunjung, katakan tidak user friendly atau tidak user friendly. Perlu kalian ketahui, sejauh pengalaman saya didunia blogging ada banyak template atau theme keren untuk kita pasang di blogger yang kita miliki, namun tampilan kerennya tersebut masih belum bisa menopang kebutuhan para pengunjung blog kita.

Membuat Widget Pencarian di Blog

Saya akan sedikit menjelaskan bagaimana cara mengatasi dan membuat kotak pencarian (search box) keren untuk blogger. Untuk lebih jelasnya silahkan kalian pahami penjelasan dibawah ini :

 

Cara menginstal Simple Search Box:

1. Klik Tambah Widget > pilih HTML/Javascript
2. Hapus Judul Widget
3. Kode sebagai berikut:

 <style>
    #searchbox {
        background: #3A4962;
        padding: 2px 1px;
        width: 100%;
    }

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

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

    #button-submit:hover {
        background: #CF000F;
    }

    #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>

4. Save

Demikian informasi tentang Membuat Widget Pencarian di Blog. Maaf jika ada kekurangan, silahkan tambahkan beberapa kekurangan pada artikel di kolom komentar. Saya harap informasi ini bermanfaat.