Membuat Kotak Pencarian Bergaya Hover Bujil

Ketikan keyword form search, make search box atau apapun yang penting berkaitan dengan membuat kotak search pada search box blog ini ;) Koben akan berbagi kembali cara membuat kotak pencarian (search box) ala hover to bijil. Diwakilkan dengan sebuah link ketika di sorot akan terlihat si kotak pencariaannya. Sebenarnya kalau sobat tidak mau cape bikin kotak searchingan dan beberapa link berbagi, tinggal aktifkan saja navbar blogger
Selalu lakukan backup full template terlebih dahulu sebelum melakukan edit kode² sekecil apapun bentuknya ;) Letakan kode CSS pada tempatnya :D

    .search-header {
        position: relative;
    }
    .search-popup {
        display:none;
    }
    .search-header:hover .search-popup {
        display: block;
        z-index: 99;
        position: absolute;
        top: 20px;
        left: 5px;
        background: #f3f3f3;
        padding: 10px 10px;
        width: 305px;
        height: 63px;
        -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
        -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
    }
    .searchheader-title {
        color: #000;
        width: 285px;
        padding-left: 6px;
    }
    .search-text {
        padding: 10px 5px;
        width: 100%;
    }
    .searchinputbox {
        padding: 1px;
        font-size: 1.2em;
        width: 220px;
        height: 25px;
        background: #fff;
        color: #333;
        margin-right: 5px;
        float: left;
    }
    .search-submit {
        border: 0px;
        width: 70px;
        height: 25px;
        cursor: pointer;
        background: #A00;
        color: white;

    }

Struktur HTML

<div class="search-header">

<a href="#">Search</a>

<div class="search-popup">

<div class="searchheader-title">Search our article</div>

<div id="searchbox">

<div class="search-text">

<form method="get" id="searchform" action="/search" target="top">

<input type="text" name="q" class="searchinputbox" /><input type="submit" value="Search" class="search-submit" />

</form>

</div>

</div>

</div>

</div>

Semoga bermanfaat :)
Happy coding \m/