8 Cara Membuat Kotak Pencarian (Search Box) Keren Untuk Blog

komputerdia.com - 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. Untuk lebih jelasnya silahkan kalian pahami penjelasan dibawah ini :

Baca Juga Artikel Menarik Lainnya :

• Ciri dan Cara Memilih Template Blog Seo Friendly, Responsive, Berkualitas .
• 6 Cara Memilih dan Mengganti Template Blog Agar Visitor Blog Terus Naik .
• Mengenal dan Memahami 27 Menu Pada Pembuatan Entri Baru / Postingan .

Langkah - Langkah Membuat Search Box Keren Blogger

A. Pembuatan Search Box Via Html/ Javascript

• 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 pilih salah satu versi search box yang kalian sukai dan masukan kode tersebut pada kotak html/javascript kemudian kalian tekan tombol simpan untuk mengakhirinya. 

1. Gaya atau Versi Pertama

<style>
    #searchbox {
    width: 280px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPzA8DgxOb1NJMTe6HVfQ0ykfY-Gds0PnlYhNYt_N_XzELDT_WJIbjNESryjCNWdF4m0msekc3szdpionDdgPMUiYyJ33IIbgKMDMHoVWOLu6fh-uTF_Cugo4roAG-SIXTpWXTOQGqvjR-/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/AVvXsEg0KwGO45b5Do2g_FEVx-a8vEU8gqqjn1Dm40qENbHBfub-KJhMATpMMoXFoTeXMF-4HFVDFj4C-IvxplXuiS9em7zyvPw6RXLuLhbiy2p4Ow26akrviY2bkAQS5gV2h6K_JnUr3vhZAIYn/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/AVvXsEiaaQmWVQxbZA4QucdTXYJvNnA660hDD1rkdrPFdXEOeEvvdQQtI0h0ufF84teHy-KbC1wAep3dA1KtijulDEEZXL97zEPKF-mRkUBSZNtxqfaQta3ZM_KqvBH6CvwbjphKr65CoA5CDvbQ/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>

2. Gaya atau Versi Kedua

 <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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ_Gf_KC4J73DAJDuAr_EdrcxX1UJcgE4oFQI8rWnRoRHdsVDImFyYC00Yk8EVUDfev0Y_hBMaM-e2MF3GWqReVgvFZaGTv3z5ulHQu2NxnyeuutU456TdQsqd4ZzYzq1RccomrrfSCXvk/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;
    }

    #button-submit{
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYbi4iNRaSzn3h7ECraf3UYdTID7MbvcjiPxHEISiWeP0pdvrAxeOg9I7o0PFkqmuG4ZPt_7_jBbSQisTRcw6c2Ees-Eepomcn77r520Aqh2vYL62udLC-uFaEU00SmuV0VSJZMKGR1VvM/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>

3. Gaya atau Versi Ketiga

<style>
    #searchbox {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyXklbNff8WDxM45JD02Sa4EWxluuqM9dkfnBqLa2tZnAvWAX4je6vGdsZdpYokLZ5FwJdYOEPa7_Z_2W_MT3cpp8zSyC1N8QtMv6uNPqun_yINwGvmIpvYLyMPm5ufhm68oxWmtds77on/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBBvIUEgAeDjv-TieuPUfSCV99yLKLFAqP0JvKA_kR7pNSCFoU3e2KlETHRaNXgtqZwrGZOCo7znZouTmn7STuTx80vp6ladjUXiloUlPEG7OE9kU6q1mFKz4YfJwo5AyJYxZmfehmKKyB/s1600/magnifier.png) no-repeat;
        border-width: 0px;
        cursor: pointer;
        margin-top: 10px;
        width: 19px;
        height: 25px;
    }

    #button-submit:hover {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIlL8Wwx1e7s7tPnh-cT4Fha-WYpkOrBziSvMbhKleZvo4BXSQVo9Ssp_TaHOIvX6Iy61pTFLHq9awu9_8OeU-h_zqUcnm_Vlh0yjuonRaB9knD0ELaEduJy4sRsQ-lKBGbPHevOPxvVhG/s1600/magnifier-hover.png) no-repeat;
    }

    #button-submit:active {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIlL8Wwx1e7s7tPnh-cT4Fha-WYpkOrBziSvMbhKleZvo4BXSQVo9Ssp_TaHOIvX6Iy61pTFLHq9awu9_8OeU-h_zqUcnm_Vlh0yjuonRaB9knD0ELaEduJy4sRsQ-lKBGbPHevOPxvVhG/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>

4. Gaya atau Versi Keempat

<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/AVvXsEiJ_Gf_KC4J73DAJDuAr_EdrcxX1UJcgE4oFQI8rWnRoRHdsVDImFyYC00Yk8EVUDfev0Y_hBMaM-e2MF3GWqReVgvFZaGTv3z5ulHQu2NxnyeuutU456TdQsqd4ZzYzq1RccomrrfSCXvk/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>

5. Gaya atau Versi Kelima

  <style>
    #searchbox {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFiUCc0oz-wpGaF_IDtT6KzdNel6tcuIRFGSJcjgwNIvaKb_zNNZ7XQqkuK9gvYiqfdteocYwQ2EmPp8CC65c4FWu821zy551MZ_YEc5d5EzibN9neSqcHv1dXzkAMHwqUQUMJ5qMPy_Dn/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDLmMdcdRaqSQWFpguziwLqQhdB5d9EdYGL7nZvlLa7VI5qnVM8tHYN2rYOEvmCFbpgA-1qIVkhf8XdOqwBH2OGdhvRfptSf3TALySpaeuSZlwEGmcGLdJTmEqhZc41KVxSo3qVjIy041C/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnX-_G2EDVe4WQDyIU3W1igTUSpL4xiRaRiUuAYbX474FRKV3a2rQLe7VmNmHNPavAt4_x7d_2kg67WSlG1EhDvwyTGlvF6Y9ELbc7421VjIdGIWUxHeaF21LTfeh2iBojmiscd3HBXdyk/s1600/magnifier-hover.png) no-repeat;
    }
    #button-submit:active {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnX-_G2EDVe4WQDyIU3W1igTUSpL4xiRaRiUuAYbX474FRKV3a2rQLe7VmNmHNPavAt4_x7d_2kg67WSlG1EhDvwyTGlvF6Y9ELbc7421VjIdGIWUxHeaF21LTfeh2iBojmiscd3HBXdyk/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 name="q" type="text" size="15" placeholder="search..." />
        <input id="button-submit" type="submit" value="" />
    </form>

6. Gaya atau Versi Keenam

<style>
    #searchbox {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihQLi_PgYPM9kXF-QMh6yUI84WuId5Sv9mntlOJfW0ceAj9TTXgpHWREHwlr2CCEhn89QbbRtB_OFJtPhVzjGjkXSgwGiFcNIR7F0UfVz6WUi5e_8ulJbfaCp02WR7mKheKQz2KC1eecPc/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0jJ4roaW_AHtVTTTzhyphenhyphenKBwWGzvfaPB8izh45W0AWD6VME7aaPC599bPv-0-ZZpU7faPsSdJolp2_Bs-FJIp-Mg5MmGQUzhckmkKDDsgDzF53VzdjCLI2vzP7gpanxWXDrSihKVeUo6Bm4/s1600/search-button.png) no-repeat;
        border-width: 0px;
        cursor: pointer;
        width: 30px;
        height: 25px;
    }

    #button-submit:hover {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLlhyphenhyphenXwg4Bm_NKUjLB6kBChF04w921fBpEQV-bNk32-okanrLwyLQpiSvkNTr7H_bBqo1TfQZKPdafW61BwdRh77jFVRZiQFM9pDK9wFHNtej29LAmU4teJ_Z-e66zvtvqlpDUG91u8KtG/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>

7. Gaya atau Versi Ketujuh

<style>
#search-box {
position: relative;
width: 100%;
margin: 0;
}

#search-form 
{
height: 40px;
border: 1px solid #999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}
#search-text 
{
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;
}

#search-box input[type="text"]
{
width: 90%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;
}

#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: #4d90fe;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}
</style>

<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Search here...' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button>
</form>
</div>

Keterangan : Untuk versi no 7, jika kalian ingin memodifikasinya, silahkan kalian ganti kode yang berwarna Merah dengan kode warna yang kalian sukai, sebagai referensi saya telah menyediakan 6 warna pilihan, dan kodenya bisa kalian lihat pada bagian gambarnya.

B. Pembuatan Search Box Via Html Editor

• Langkah B ini, sekaligus menjadi versi kedelapan yang bisa kalian gunakan
• Pertama silahkan kalian masuk ke akun blogger kalian dan pilih menu theme atau tema , kemudian pilih tombol edit html .

• Setelah berada dihalaman edit html silahkan kalian cari kode ]]></b:skin> dengan cara menekan tombol Ctrl + F kemudian ketikan perintah ]]></b:skin> lalu tekan enter .
• Setelah kalian menemukan kode  ]]></b:skin> , letakan kode dibawah ini tepat diatas kode tersebut .

/*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}

• Setelah itu, simpan theme kalian dengan cara klik tombol Simpan Tema .
• Langkah terakhir silahkan kalian masuk ke menu Tata Letak, kemudian tambahkan gadget dan pilih menu Html/Javascript, dan salin kode dibawah ini

<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'><span>Search</span></button></form></div>

• Setelah itu silahkan kalian tekan tombol simpan .
• Dan terakhir lihat perubahan pada blog kalian.
• Selesai, semoga bermanfaat untuk kalian semuanya.

Share this post