Cara Membuat Kotak Pencarian (Search Box) yang Menarik pada Blog

Oleh Diposting pada

VADCOY – Bagi para blogger, mempunyai blog yang menarik tentunya sangat memuaskan sekali. Bukan hanya memuaskan untuk dirinya sendiri saja, tetapi untung orang lain juga. Para pengunjung yang mampir ke blog itu pasti akan merasa terkesan dan terkagum dengan blog Anda tersebut.

Tentunya, jika kita ingin membuat blog yang menarik, kita harus memilih template yang menarik pula. Untuk pemilihan template pada blog, biasanya sesuai selera atau relatif, bergantung si pembuat blog atau blogger. Salah satunya adalah dengan mempercantik tampilan kotak pencarian atau search box.

Ada beberapa cara untuk membuat tampilan kotak pencarian atau search blog. Begitu juga dengan model-model tampilannya ada berbagai macam. Di sini, Admin akan menjelaskan bagaimana cara membuatnya mulai dari model tampilan yang satu, lalu ke model tampilan yang lainnya.

Cara Membuat Kotak Pencarian (Search Box) yang Menarik pada Blog 2019 

– Langkah yang pertama. Anda masuk ke akun blogger, lalu pilih menu theme atau tema, selanjutnya klik tombol edit html.

– Langkah yang kedua. Setelah Anda berada pada halaman edit html, silahkan klik tombol ctrl+f, kemudian masukan kode ]]></b:skin> , lalu tekan enter.

– Langkah yang ketiga. Setelah Anda menemukan kode ]]></b:skin> , silahkan Anda salin atau copy kode di bawah ini, lalu letakkan kode tersebut tepat di atas kode ]]></b:skin> .

/*Search Box*/
#search-box{position:relative;margin:0 auto;border:1px solid #ccc;padding:5px;border-radius:4px}
#search-form{height:40px;background-color:#fff;overflow:hidden}
#search-text{font-size:14px;color:#ddd;border-width:0;background:transparent;line-height:15px}
#search-box input[type=”text”]{width:90%;padding:10px 0 5px 1em;color:#333;outline:none}
#search-button{position:absolute;top:5px;right:5px;height:40px;width:80px;color:#fff;text-align:center;border-width:0;background-color:#1a7db7;cursor:pointer;text-transform:uppercase;border-radius:3px;outline:0}
#search-button:hover{background:#333}
– Langkah yang keempat. Simpan tema atau theme Anda dengan klik tombol simpan tema.
– Langkah yang terakhir. Silahkan Anda masuk ke menu tata letak, lalu tambahkan gadget dan pilih menu html/javascript, kemudian letakkan kode di bawah ini pada menu tersebut.

<div id=”search-box”>
<form action=”/search” id=”search-form” method=”get” target=”_top”>
<input id=”search-text” name=”q” placeholder=”Cari Artikel Disini …” type=”text” />
<button id=”search-button” type=”submit”>Search</button></form>
</div>
– Klik tombol simpan dan silahkan lihat perubahan pada blog Anda!

Rekomendasi: Ini Loh! Manfaat Teknologi Berbasis Komputer pada Proses Pembelajaran

Macam-Macam Model Tampilan Kotak Pencarian atau Search Box 

1. Tampilan Pertama

<style>
    #searchbox {
        background: url(http://3.bp.blogspot.com/-g-zH25_DoxI/VD1BuatkgII/AAAAAAAAAgc/00hxspfvv3s/s1600/searchbar.png) no-repeat;
        width: 208px;
        height: 29px;
    }
    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: transparent;
        margin: 3px 0px 0px 20px;
        padding: 5px 0px 5px 0px;
        border-width: 0px;
        font-family: “Arial Narrow”, Arial, sans-serif;
        font-size: 12px;
        color: #828282;
        width: 70%;
        display: inline-table;
        vertical-align: top;
    }
    #button-submit {
        background: url(http://4.bp.blogspot.com/-OcDQ6Z9ojlQ/VD1KnwJjFOI/AAAAAAAAAgs/cu_pKN6bpL8/s1600/magnifier.png) no-repeat;
        border-width: 0px;
        cursor: pointer;
        margin-left: 10px;
        margin-top: 4px;
        width: 21px;
        height: 22px;
    }
    #button-submit:hover {
        background: url(http://2.bp.blogspot.com/-4-xFDFGKJrA/VD1Kn04f9TI/AAAAAAAAAgw/2ta84QY1x9A/s1600/magnifier-hover.png) no-repeat;
    }
    #button-submit:active {
        background: url(http://2.bp.blogspot.com/-4-xFDFGKJrA/VD1Kn04f9TI/AAAAAAAAAgw/2ta84QY1x9A/s1600/magnifier-hover.png) no-repeat;
        outline: none;
    }
    #button-submit::-moz-focus-inner {
        border: 0;
    }
    </style>

Silahkan baca juga:  Cara Mengetahui Jumlah Pengguna Internet di Dunia

    <form id=”searchbox” method=”get” action=”/search” autocomplete=”off”>
        <input name=”q” type=”text” size=”15″ placeholder=”search…” />
        <input id=”button-submit” type=”submit” value=”” />
    </form>

2. Tampilan Kedua

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

3. Tampilan Ketiga

<style>
    #searchbox {
    width: 280px;
    background: url(http://1.bp.blogspot.com/-dwLNyhnHlTg/VEQZwf9drLI/AAAAAAAAAlg/rbd0HN4EZrY/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;
    }

Silahkan baca juga:  Cara Mengganti Domain Blogspot Melalui Niagahoster

    #button-submit{
    background: url(http://4.bp.blogspot.com/-4MYBYE0i0Xk/VEQYlljvriI/AAAAAAAAAlQ/_TRkRG5EX1c/s1600/search-icon.png) no-repeat;
    margin-left: -40px;
    border-width: 0px;
    width: 40px;
    height: 50px;
    }

    #button-submit:hover {
    background: url(http://4.bp.blogspot.com/-6S4K8eHPM-c/VEQdf7l84GI/AAAAAAAAAls/j7_kGSpkIfg/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>

Rekomendasi: 6 Jenis Media Komunikasi yang Digunakan Manusia

4. Tampilan Keempat

<style>
    #searchbox {
        background: url(http://4.bp.blogspot.com/-u0fEq-zSTYI/VD1gGDLy3aI/AAAAAAAAAhw/im3bcQd5wBM/s1600/search-box.png) no-repeat;
        height: 27px;
        width: 202px;
    }

    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: transparent;
        margin: 0px 0px 0px 12px;
        padding: 5px 0px 5px 0px;
        border-width: 0px;
        font-family: “Arial Narrow”, Arial, sans-serif;
        font-size: 12px;
        font-style: italic;
        width: 77%;
        color: #828282;
        display: inline-table;
        vertical-align: top;
    }

    #button-submit {
        background: url(http://2.bp.blogspot.com/-4OxjMRukhCM/VD1gBscpzII/AAAAAAAAAhk/TUxMSv7bCzA/s1600/search-button.png) no-repeat;
        border-width: 0px;
        cursor: pointer;
        width: 30px;
        height: 25px;
    }

    #button-submit:hover {
        background: url(http://4.bp.blogspot.com/-GgNBTS_3FEA/VD1gBgm7RFI/AAAAAAAAAhg/flg6VijzW8E/s1600/search-button-hover.png) no-repeat;
    }

    #button-submit::-moz-focus-inner {
        border: 0;
    }
    </style>

    <form id=”searchbox” method=”get” action=”/search” autocomplete=”off”>
    <input name=”q” type=”text” size=”15″ placeholder=”search…” />
    <input id=”button-submit” type=”submit” value=”” />
    </form>

5. Tampilan Kelima

<style>
    #searchbox {
    width: 240px;
    }
    #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: url(http://2.bp.blogspot.com/-xpzxYc77ack/VDpdOE5tzMI/AAAAAAAAAeQ/TyXhIfEIUy4/s1600/search-dark.png) no-repeat 10px 13px #f2f2f2;
    border: 2px solid #f2f2f2;
        font: bold 12px Arial,Helvetica,Sans-serif;
        color: #6A6F75;
        width: 160px;
        padding: 14px 17px 12px 30px;
        -webkit-border-radius: 5px 0px 0px 5px;
        -moz-border-radius: 5px 0px 0px 5px;
        border-radius: 5px 0px 0px 5px;
        text-shadow: 0 2px 3px #fff;
        -webkit-transition: all 0.7s ease 0s;
        -moz-transition: all 0.7s ease 0s;
        -o-transition: all 0.7s ease 0s;
        transition: all 0.7s ease 0s;
    }
    #searchbox input[type=”text”]:focus {
    background: #f7f7f7;
    border: 2px solid #f7f7f7;
    width: 200px;
    padding-left: 10px;
    }

Silahkan baca juga:  Blogger Syariah yang Sesuai dengan Tuntunan Agama Islam (Episode 1)

    #button-submit{
    background: url(http://4.bp.blogspot.com/-slkXXLUcxqg/VEQI-sJKfZI/AAAAAAAAAlA/9UtEyStfDHw/s1600/slider-arrow-right.png) no-repeat;
    margin-left: -40px;
    border-width: 0px;
    width: 43px;
    height: 45px;
    }
    </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>

6. Tampilan Keenam

<style>
    #searchbox {
        background: url(http://2.bp.blogspot.com/-Un3z-hkw1XA/VD0V9GO8zrI/AAAAAAAAAf0/ww_5VsvWayY/s1600/search-box1.png) no-repeat;
        width: 250px;
        height: 65px;
    }

    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: transparent;
        padding: 5px 0px 5px 20px;
        margin: 10px 15px 0px 0px;
        border-width: 0px;
        font-family: “Brush Script MT”, cursive;
        font-size: 12px;
        color: #595959;
        width: 65%;
        font-weight: bold;
        display: inline-table;
        vertical-align: top;
    }

    #button-submit {
        background: url(http://1.bp.blogspot.com/-zyJC7B-dSaU/VDv8-68fNJI/AAAAAAAAAe0/pkUajFr2kcQ/s1600/magnifier.png) no-repeat;
        border-width: 0px;
        cursor: pointer;
        margin-top: 10px;
        width: 19px;
        height: 25px;
    }

    #button-submit:hover {
        background: url(http://1.bp.blogspot.com/-pIwlQno5_6U/VDxR9OdzvYI/AAAAAAAAAfM/YDBC2P705tc/s1600/magnifier-hover.png) no-repeat;
    }

    #button-submit:active {
        background: url(http://1.bp.blogspot.com/-pIwlQno5_6U/VDxR9OdzvYI/AAAAAAAAAfM/YDBC2P705tc/s1600/magnifier-hover.png) no-repeat;
        outline: none;
    }

    #button-submit::-moz-focus-inner {
        border: 0;
    }
    </style>

    <form id=”searchbox” method=”get” action=”/search” autocomplete=”off”>
        <input class=”textarea” name=”q” type=”text” size=”15″ placeholder=”Search here…” />
        <input id=”button-submit” type=”submit” value=”” />
    </form>

Dari keenam model tampilan tersebut, untuk menampilkannya bisa dengan cara buka menu tata letak, lalu tambahkan gadget dan pilih menu html/javascript, kemudian letakkan salah satu kode di atas yang ingin anda tampilkan. Semoga bisa bermanfaat!

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *