Cara Membuat Search Box Keren di Sidebar Blogspot

Cara membuat kotak pencarian atau Search Box keren di sidebar blog blogspot itu sangat mudah dan sudah banyak sahabat-sahabat blogger yang memberikan tutorialnya. Namun, sebelum keinti pembahasan dari artikel "cara membuat kotak pencarian atau search box di blog" ini. Alangkah lebih baiknya anda mengenal terlebih dahulu fungsi dari kotak pencarian atau search box.

Kotak pencarian atau dalam bahasa inggris di sebut sebagai Search Box adalah sebuah kotak kolom yang digunakan oleh pengunjung dalam mencari konten artikel blog yang mereka butuhkan saat menjelajahi blog anda.

Kotak pencarian (Search Box) ini sangat penting kehadiranya dan menjadi salah satu elemen widget blog yang wajib ada di setiap blog atau website. Kehadiran kotak pencarian atau search box ini bukan tanpa alasan karena kehadirnya di dalam blog dapat membantu dan memudahkan para pengunjung blog dalam mencari artikel atau postingan yang mereka cari (red. butuhkan) dan blog anda akan menjadi blog yang user friendly.

Untuk membuat kotak pencarian atau Search Box di blog blogspot itu ada dua cara yaitu:
Pertama, membuat kotak pencarian atau search box menggunakan bawaan blogger, atau
Kedua, membuat kotak pencarian atau search box versi sendiri

Untuk membuat kotak pencarian atau search box bawaan blogger cara cukup mudah. pertama anda login terlebih dahulu ke Blogger, setelah itu anda klik Tata Letak atau Lay Out, lalu anda klik Add Gadget dan anda cari gadget "Kotak Penelusuran atau Search Box" , Jika sudah ketemu klik Save.

Selamat sekarang blog anda sudah ada Search Box atau kotak pencariannya. Namun, perlu diingat kotak pencarian atau search box bawaan blogger ini tampilannya kurang menarik menurut pendapat saya. Jika anda menyukii tampilan serch box versi bawaan blogger silahkan anda pasang dan gunakan kedalam blog anda. tapi jika anda tidak suka dengan tampilan kotak pencarian atau search box versi bawaan blogger anda juga dapat membuat kotak pencarian atau search box versi anda sendiri.

Sedangkan untuk membuat kotak pencarian atau serch box versi sendiri caranya cukup mudah dan tidak beda jauh langkah caranya dengan membuat kotak pencarian versi bawaan blogger hanya butuh sentuhan kode HTML & CSS saja. Untuk membuatnya anda ikuti langkah-langkah di bawah ini:

Cara Membuat Search Box Keren di Sidebar Blog Blogspot

Ikuti Langkah di Bawah ini
1. Login ke www.blogger.com
2. Klik Layout atau Tata letak
3. Klik Add Gadget Pilih HTML/Javascript
4. Setelah itu, Masukkan kode di bawah ini pada Formnya

<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 Keyword Here....' type='text'/>
<button id='search-button'
type='submit'><span>Search</span></button>
</form>
</div>

5. Simpan & Lihat hasilnya.

Jika berhasil tampilanya akan seperti di bawah ini

Demikianlah tutorial kali ini "Cara Membuat Search Box Keren di Blog Blogspot". Semoga setelah anda memasang search box atau kotak pencarian ini di sidebar blog anda. Blog anda menjadi blog yang user friendly, sehingga para pengunjung blog betah berlama-lama dalam menjelajahi setiap artikel di dalam blog anda.

Terima Kasih, telah berkunjung dan meluangkan waktunya untuk membaca artikel sederhana ini dengan judul "Cara Membuat Search Box Keren di Sidebar Blogspot". Semoga artikel kali ini bermanfaat dan menambah wawasan anda.
Salam sukses untuk kita semua.