Cara Membuat Widget Search yang Keren pada Blog

//lh3.googleusercontent.com/-K5UKWzgJhmU/AAAAAAAAAAI/AAAAAAAACdI/CN3nwiBZsGE/s512-c/photo.jpg
December 14, 2016




Selamat malam guys, sebenarnya saya sudah berniat untuk tidak menulis artikel sebelum Final saya berakhir, tetapi malam ini saya tiba-tiba ingin menulis suatu artikel. artikel kali ini akan membahas bagaimana cara membuat widget search box yang bagus, dan terlihat cocok dengan tampilan blog anda.


Pertanyaannya, apa itu search box pada blog, search box adalah kotak pencarian atau tempat pencarian entri atau bisa saya katakan mencari artikel pada blog. sebenarnya search box bawaan blogger sudah ada, tetapi menurut saya tidak begitu cocok denga tampilan blog saya, oleh karena itu saya mencoba membuat search blog yang bagus dan terlihat cocok. kalo begitu kita langsung aja membuat search Blog yang bagus.

1. Masuk ke blog anda
2. Klik tata letak kemudian pilih tambahkan widget.
3. Kemudian anda pilih HTML/Java Script
4. Masukkan kode di bawah.

<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(http://2.bp.blogspot.com/-xpzxYc77ack/VDpdOE5tzMI/AAAAAAAAAeQ/TyXhIfEIUy4/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>

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

Note:
  • Jika anda tidak puas atau kurang cocok dengan blog anda silahkan ganti kode warna html pada kode yang berwarna hijau.
  • jika tombol serachnya kurang bagus dan warnanya kurang cocok kode warna html yang berwarna biru.
5. Kemudian klik simpan dan lihat hasilnya, seperti gambar dibawah.


Gimana Guys sedikit mudah bukan membuat serach box yang rapi dan cocok dengan blog sobat, jika anda suka silahkan cepat untuk mencoba dan lihah hasilnya. Semog artikel ini bermanfaat dan berguna bagi anda semua, dan selamat malam😃




Related Post

SUBSCRIBE TO OUR NEWSLETTER

closed