Cara Membuat Kotak Pencarian (Search Box) Keren Untuk Blog - Versi 1

Apakah kalian sudah mengganti theme blogger kalian? Jika kalian sudah menggantinya, apa theme tersebut sudah sesuai dengan keinginan kalian ? 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, seperti Tidak fast loading, tidak responsive, tidak seo friendly atau bahkan tidak terdapatnya search box .

Pada artikel kali ini, saya akan sedikit menjelaskan bagaimana cara mengatasi dan membuat kotak pencarain (search box) keren untuk blogger dengan menggunakan widget HTML/Java Script. Untuk lebih jelasnya silahkan kalian pahami penjelasan dibawah ini :

• Pertama silahkan kalian buka akun blogger kalian, kemudian masuk pada menu Tata Letak atau Layout.

• Pada halaman tata letak tersebut silahkan kalian klik menu tambahkan gadget dan pilih HTML/Javascript.

• Setelah itu kalian akan melihat tampilan kota html/javascript, silahkan kalian masukan kode tersebut pada kotak HTML/javascript kemudian kalian tekan tombol simpan untuk mengakhirinya. 

Masukkan Kode berikut

<style>
    #searchbox {
    width: 280px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaaaXvW6j5F41S9JyKFJRUUM_NrU3ErXfnIoj5djEsUebyQruvzj7l4pxMr6palSSeCGg3hTu6jI_v2Ibyp-AdqD0XGSptsSiehJ2kFO0If6qIrvSVoz2XEd4H85pVChdqJ5Fr4SiHo2_H/s1600/search-box.png) no-repeat;
    }

    #searchbox input {
        outline: none;
    }

    input:focus::-webkit-input-placeholder {
        color: transparent;
    }

    input:focus:-moz-placeholder {
        color: transparent;
    }

    input:focus::-moz-placeholder {
        color: transparent;
    }
    #searchbox input[type="text"] {
    background: transparent;
    border: 0px;
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    font-size: 14px;
        color: #f2f2f2 !important;
        padding: 10px 35px 10px 20px;
        width: 220px;
    }
    #searchbox input[type="text"]:focus {
    color: #fff;
    }

    #button-submit{
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis0tmLVaN1w3IBgldUPvIEH3E77_myQWITt5VeArCtvBwz_59nlNK-CO_foRvKiCr3Cujj2VtC4MlIeLb7T6guJE2MMjZLTXtM7_V6OGA3u-E2QVNMty-oQ30RHdRSE5mtRWCuNscwZFBh/s1600/search-icon.png) no-repeat;
    margin-left: -40px;
    border-width: 0px;
    width: 40px;
    height: 50px;
    }

    #button-submit:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1_5vh1PZynbDqc0ap-E0kCi-1d0ZnVqd44kPdAhnD0q2nSACXotj_3-ZEWELggoXWU6K_lZSaXq-FDdWA9LeYRbhFuaynt9nBNBDOTFye4JQPeLfskQVYYsbv76ysR-BQpmioBHfvLh5j/s1600/search-icon-hover.png);
    }
    </style>

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

Jika berhasil maka akan tampil seperti ini;