Cara Memasang Kotak Pencarian (Search Box) Keren di Blog

Baca Juga

Cara Memasang Kotak Pencarian (Search Box) Keren di Blog

SEORANG pengunjung bertanya tentang kode kotak pencarian yang ada di sidebar kanan paling atas blog ini. Di bawah ini saya share kode dan cara memasangnya.


Sebelumnya, kita "analisis" dulu peran atau fungsi kotak pencarian dalam sebuah blog atau web. Menurut pakar Web Usability, Jakob Nielsen, kotak untuk mencari tulisan dalam sebuah web ini merupakan elemen penting.

Kata Nielsen, wajib hukumnya sebuah blog atau situs web memasang kotak pencarian. Jika tidak, maka itu termasuk kesalahan dalam desain web karena tidak ramah pengguna (user friendly).

"Kotak pencarian harus simple dan visible," tulis Nielsen dalam Search: Visible and Simple. "Search Box harus ada di homepage, halaman dalam, dan mudah dilihat," imbuhnya.

Cara Memasang Kotak Pencarian (Search Box) Keren di Blog

Saatnya kita pasang kotak pencarian di blog. Saya share dua jenis saja: kotak pencarian yang dipasang di blog ini dan kotak pencarian simple warna hitam.


Cara memasangnya:
1. Di dashboard blog, klik "Layout" > Add a Gadget > pilih "HTML/Javascript"
2. Copas salah satu kode di bawah ini.
3. Save!


Jika tampilannya tidka sesuai dengan ukuran sidebar blog Anda, silakan utak-atik angka di kode CSS.

1. KODE KOTAK PENCARIAN KEREN MERAH

<style>
.cf:before, .cf:after{
    content:"";
    display:table;
}

.cf:after{
    clear:both;
}

.cf{
    zoom:1;
} 

 /* Form wrapper styling */
.search-wrapper {
width: 300px;
margin:10px 0;
box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2);
}

/* Form text input */

.search-wrapper input {
width: 202px;
height: 20px;
padding: 10px;
float: left;
font: bold 14px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 0;
background: #EEE;
border-radius: 3px 0 0 3px;
}

.search-wrapper input:focus {
    outline: 0;
    background: #fff;
    box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}

.search-wrapper input::-webkit-input-placeholder {
   color: #999;
   font-weight: normal;
   font-style: italic;
}

.search-wrapper input:-moz-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}

.search-wrapper input:-ms-input-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
} 

/* Form submit button */
.search-wrapper button {
overflow: visible;
position: relative;
float: right;
border: 0;
padding: 0;
cursor: pointer;
height: 40px;
width: 78px;
font: bold 14px/35px 'lucida sans', 'trebuchet MS', 'Tahoma';
color: white;
text-transform: uppercase;
background: #D83C3C;
border-radius: 0 3px 3px 0;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
}

.search-wrapper button:hover{ 
    background: #e54040;
}

.search-wrapper button:active,
.search-wrapper button:focus{
    background: #c42f2f;
    outline: 0;
}

.search-wrapper button:before { /* left arrow */
    content: '';
    position: absolute;
    border-width: 8px 8px 8px 0;
    border-style: solid solid solid none;
    border-color: transparent #d83c3c transparent;
    top: 12px;
    left: -6px;
}

.search-wrapper button:hover:before{
    border-right-color: #e54040;
}

.search-wrapper button:focus:before,
.search-wrapper button:active:before{
        border-right-color: #c42f2f;
}   

.search-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */
    border: 0;
    padding: 0;
} 
</style>
<form action="/search" class="search-wrapper cf">
        <input type="text" method="get" name="q" placeholder="Search here..." required="" />
        <button type="submit">Search</button>
    </form>

2. KOTAK PENCARIAN SIMPLE HITAM
Kotak pencarian jenis ini saya pasang di Blog Romeltea.

<style>
.serching{margin:0;width:100%;}.serching form{border:1px solid #ddd;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:14px}.serching form input{display:block!important;margin:0;border:0;padding:5px 0;outline:0;height:20px;line-height:20px;font-size:13px;border-radius:0!important}.serch{float:left;width:85%!important;text-indent:10px}.serchg{float:right;width:15%!important;height:30px!important;padding:0!important;background:gray;color:#fff;border:0!important;font-size:12px!important}
</style>
<div class='serching'><form action='/search?q='><input class='serch' name='q' placeholder='Cari...' title='Cari Tulisan di Sini' type='text'/><button class='serchg' type='submit'> GO </button><span style='clear: both;display:block'/></span></form></div>

Ada yang lain gak? Buanyaaak! Jenis Kotak Pencarian lainnya, antara lain, bisa diintip di 10 Stylish Search Box for Blogger. Wasalam. (www.romelteamedia.com).*