Cara Memasang Kotak Pencarian (Search Box) Keren Di Blog

Cara Memasang Kotak Pencarian (Search Box) Keren di Blog

SEORANG pengunjung bertanya wacana isyarat kotak pencarian yang ada di sidebar kanan paling atas blog ini. Di bawah ini aku share isyarat dan cara memasangnya.


Sebelumnya, kita "analisis" dulu tugas atau fungsi kotak pencarian dalam sebuah blog atau web. Menurut pakar Web Usability, Jakob Nielsen, kotak untuk mencari goresan pena 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 alasannya ialah 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 gampang 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 isyarat di bawah ini.
3. Save!


Jika tampilannya tidka sesuai dengan ukuran sidebar blog Anda, silakan utak-atik angka di isyarat 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 aku 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, dapat diintip di 10 Stylish Search Box for Blogger. Wasalam. ().*

Share this post