Cara Membuat Kotak Pencarian / Search Box Pada Blog

Selamat apa aja ya sob, semoga kita selalu diberikan kesehatan selalu. amien....
heemmmm saya udah lama gak posting nih, keliatan terasa sepi ni blog... hehehee.
Ukey, langsung aja yaa sob, setelah kemarin saya posting tentang Cara Membuat / Memasang Kotak Pesan Admin Dibawah Postingan Blog, kini pada kesempatan kali ini saya akan posting tentang Cara Membuat Kotak Pencarian / Search Box Pada Blog.
Tentunya para sobat sudah gak asing kan apa itu Search Box..??? yach, Para sobat bloggers pasti udah banyak yang posting tentang tema yang sama.. Tapi gak apa apa lah, mungkin search box yang ini lain daripada yang lain..Bentuknya yang elegan, serta enak di pandang... hehehehehee PD .
Menurut saya, search box itu sangat penting. sebuah blog tanpa ada search box,akan terlihat kurang. Kelebihannya memasang search box, pengunjung bisa lebih mudah mencari artikel di blog kita. Jadi pengunjung bisa betah. Selain itu,dengan adanya search box, blog kita terlihat semakin SEO banget..
Ukey, Bagi para sobat bloggers, yang Templatenya gak ada bawaan search box, atau yang sudah ada tapi ingin memodifikasi, atau yang kurang suka dengan tampilan search box yang disediakan paman google, kalau sobat ingin merubah, ini tutorialnya.

Seperti ini tampilan search box yang akan dipasang.

Silakan klick Show untuk melihat kodenya.

<span style='float:right;'>
  <style type="text/css"> #a-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5GSYA1KxuJQNApupCtQL-z1RHb-QEqUvztUbxllhddmauXdjkRNedLeFn4Ahl5ahdLMfB5kTDNqIv_vOXxBfehPt-7POMITjxzpTbMnelGIo7D87uO3GF7ns0yEiXxUCQRipE3I3lVnUA/s1600/search.box.png) no-repeat scroll center center transparent;width:300px;height:35px;disaply:block;} form#a-searchform{display: block;padding: 10px 12px;margin:0;} form#a-searchform #a{padding: 0px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="a-searchbox"><form id="a-searchform" action="/search" method="get">    <input type="text" id="a" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" /> </form></div>
</span>

Cara Pemasangannya.

1. Sobat login ke Blogger.
2. Pilih menu Design.
3. Page Element.
4. Lalu pilih Add a Gadget
5. Terus pilih HTML/Java script.
6. Terus Copy Code Search Box di atas, dan pastekan di HTML/Java Script tersebut.
7. Yang terakhir klick Simpan. Dan lihat hasilnya.

Hemmm mudah kan sob.. silakan di coba, semoga berhasil, .Sukses selalu.
Salam Bloggers Indonesia.

Mungkin Anda Juga Minat Untuk Membaca Ini :