Kotak Pencarian Keren untuk Blog

Kotak Pencarian Keren untuk Blog - Kotak Pencarian atau Search box sangat penting untuk Blog atau Website. Widget yang biasanya dipasang di Sidebar Kanan blog ini memudahkan Visitor untuk Mencari Artikel, info,Tips, dan lain lain di blog sobat. Kali ini Fariz akan Memberikan Kotak Pencarian Keren untuk Blog sobat yang Kotak pencarianya itu itu saja. Berikut adalah Kotak Pencarian Keren untuk Blog.

1. Sobat Login dulu di Blogger dan akan langsung ke Dashboard Blogger dulu lalu Cari dan Klik Tata Letak atau Layout > Tambahkan Gadget > HTML/Javascript. Lalu di Kolom kosong tersebut sobat Copykan Kode berikut di kolom kosong tadi.

<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 : Tulisan Berwarna Merah sobat tukan dengan Kode Warna yang sobat inginkan.
Tulisan berwarna Biru sobat bisa menukarnya dengan kata saat ingin mencari sesuatu di Kotak Pencarian Blog sobat.

2. Lalu klik Simpan. dan Lihat apakah Kotak pencarian atau Search box di Blog sobat telah Terpasang ? Kalau sudah terpasang berarti Tutorial Fariz kali ini BERHASIL.

Itulah Tutorial Singkat Fariz Tentang Kotak Pencarian Keren untuk Blog Semoga Berhasil :)