Menambahkan Kotak Pencarian keren di Blog

Kotak pencarian atau dalam bahasa inggrisnya Search box adalah sebuah widget yang berfungsi untuk melakukan pencarian artikel yang terdapat di dalam sebuah website atau blog. Dalam dunia bloging kotak pencarian atau search box ini sangat penting bahkan menurut saya wajib berada didalam sebuah blog, sama halnya seperti Sitemap yang berfungsi untuk memudahkan pengunjung mencari artikel yang terdapat dalam sebuah blog.


Cara menambahkan kotak pencarian atau search box ini sangatlah mudah, caranya yaitu Login ke Blogger --> Opsi Lainnya --> Tata Letak --> HTLM/JavaScript --> Letakkan kode/script kotak pencarian di konten ---> kemudian Simpan.

Untuk kode saya sudah sediakan dan yang pastinya keren-keren anda bisa pilih sendiri kotak pencarian mana yang paling anda sukai.

<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/AVvXsEgvTcpPXems70Xk7Cuvys7ZZKRnFdMbIsAOVYU20kaqwhMfUzm_7kEEM1kbjImC8dtzhHBVHq04CiTqrHzX5YPq-1hmTDhn0_W-LbjAQ080bbNg4vLxD9opvxTZ3dIhM1LTdNCYsyvuIRSb/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>

    <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/AVvXsEgvTcpPXems70Xk7Cuvys7ZZKRnFdMbIsAOVYU20kaqwhMfUzm_7kEEM1kbjImC8dtzhHBVHq04CiTqrHzX5YPq-1hmTDhn0_W-LbjAQ080bbNg4vLxD9opvxTZ3dIhM1LTdNCYsyvuIRSb/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/AVvXsEgkn6xJ4A3jQgwAsQRSGaNIZsaBQ6kRIXSs6qGnPsX7W_wv6BYVi7ZaOKGZ7O-GiJUbIF_av70Ipt2SSfKDDoFeOPXp1OXCFJpbvtZM3OX-ueYnR_9dddtVZv3QUSfUNnMKZNxRZJaplm81/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>

<style>
    #searchbox {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKUdSYjWwETr4z6zRM7Y_fG0SnvXjLa5ujlNt7H9PQ8UzzwpLbEdyHLbXBLMMUHgfgj8tEtYJF1i5-Tz7dnNzIZ0YWSEKg_psOWdcKdor_hul1It2b6CpH3X2lpqrNynQlboTSZdRxKTu_/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/AVvXsEjYpHn0t_mVq_MI_1j8yxYPYL4flLsCJ698RDBxtpstUoMdePdppTdiXctetzuaFe1z3bSgoPuRusXvBl5_tEeviHvG20unqK6LGgfrTBWUyX1rOcR0wqJQTM_gmRHKmyptOcevShaEcYS5/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/AVvXsEj2KFQKGYV_VyvW1LbwaYPxpsW-QsKrLP7Y-1yDkdl_elMgrHF7jk5reKh6zaln5YGXiPXGPcg2mF-KB8_9fWyKudJd7B9anP4k84-0_86IhSJgjV5fg2-npDQqLRCa22xiEZx8woJkBZIu/s1600/magnifier-hover.png) no-repeat;
    }
    #button-submit:active {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2KFQKGYV_VyvW1LbwaYPxpsW-QsKrLP7Y-1yDkdl_elMgrHF7jk5reKh6zaln5YGXiPXGPcg2mF-KB8_9fWyKudJd7B9anP4k84-0_86IhSJgjV5fg2-npDQqLRCa22xiEZx8woJkBZIu/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>

<style>
    #searchbox {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCjz1YTJmRFbbGlfYLGIqR_7C1FFzsmDzeReVeRT5am-9Azax9roJpjMkub4O7nVuzKLn79Abh0bQicnRnNDUa7UdqNyjLNybyfdoWPyr0WBXEsvZxkC3077xXCuEy180DbZ5SWOQJVa8s/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/AVvXsEi7Zq9h8V2mmWOjxmrUZ_AzaeAyvXAsUZhfng4tc3P9Jaj5fIraKWJY4zrWYkDjiRAhxSFWZll_JEW99DswgWK6-5tZk2Fa1WSWpxyUnwGhAvNn_SUsVul6BPg_ELs7UZiYJ83cBwygvvUZ/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/AVvXsEha9dvc3bxvpLfjCRebZz78uFBIlnmNtrybDmNZ1UdLNMRegqumratFrirpVUrAwGI4-gGfXLYUWKwnJJxe_HFYFvzvKaR7MjyNMdVMI1h303kGbhVnNFh15iSn456mEoGmD0FoC-4pDGj_/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>

<style>
    #searchbox {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6vGbnY83HRDgryK6tiK2F7YAjd-lXbpq6bq9SRae2lQwscuCelQoqn8eL14A1DHMhjgu4_iAHVRwUcthQxf2sa-_Jy1H9Q6gwIy5jTMiUumXMaKVve7dnQ0pwhzngWgRFNyrNtR83vTne/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/AVvXsEgLh8bR-ZeKig69UmfNDb2e1FsWjXHbFrCovscmA1EQh-F6FSZ0r98jTYRHOVKGJteZhM_hdDG-h4ZB5VQcmwZgmQZFBb5T8moUT1EhVo0X88EpE63xpEXvSkH8QAo8W6pSloiSnocjTKF-/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/AVvXsEgZUahebHvNQLS_EV3DusSFm95KZq3-InquS6w12KtoLBAsRBMAHHIwTy6Z9L8tFM2o54FosZpHpk_1IDTiT-4xk4BmisQtYgraFFH3jrpEgFcGap6WjHAnd7LONxtpJ0ND_MU4eK4kFFg8/s1600/magnifier-hover.png) no-repeat;
    }

    #button-submit:active {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZUahebHvNQLS_EV3DusSFm95KZq3-InquS6w12KtoLBAsRBMAHHIwTy6Z9L8tFM2o54FosZpHpk_1IDTiT-4xk4BmisQtYgraFFH3jrpEgFcGap6WjHAnd7LONxtpJ0ND_MU4eK4kFFg8/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>

<style>
    #searchbox {
    width: 280px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdJuMCFFRwbBqKNeuOyRydum8SNUtXLuhpJpyVMnKq5DXVysnyf58gDLwg6BOImQGezh79eyEr0kpd670BrmM4xkYHgwEZhp08p61FPwEkYAx2oPJdod__9NWJH1w2LxsIiFCWI_SSBu2i/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/AVvXsEiT85OMt1T4l-LKvIkkIFc8qdiSKzoXzl8eCrUjiwVKMcKC0c0rQUv2ENQJxUAa9jL3p3E_2U-mzCbothuea-Nky_enHFZSFEtplLzkiwnkXDTNmy3QQqWRzkx_gKsO6JYqtEtJKc3x3ja4/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/AVvXsEgHQIt2avsgJPbPQDMDLVMcdeDSxAdYDdpZIhkjZb-oAAX0a3wXYTFrhK3LGbJLbuKjAU_j8qvevriT5_YJR1gEEh_qcJgF3uz2yWF5XLGQfRwIwF6DOg6tAhIsrdB_9SsWrzDVLN2u61X-/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>

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

NB: Semua Search Box diatas bisa anda modifikasi sendiri, tinggal anda yang mengkreasikannya.

Misalnya untuk merubah panjang searh box

<style>
#search-box {
position: relative;
width: 200px;
margin: 0;
}
...

Yang bertulisan tebal itu adalah panjang dari search box, anda bisa mengganti "200px" sesuai selera anda. dan bisa juga anda mengganti "px" menjadi "%". misalnya anda ingin membuat panjang search box anda memenuhi widget anda, jadi anda buat saja "width:100%; ". Simpel kan? :)