Membuat Search Box keren pada Blog

Membuat widget kotak pencarian pada blog sangatlah penting, fungsinya adalah dapat memudahkan pengunjung untuk menemukan artikel yang ingin dibaca. Sama seperti google dan search engine lainnya, kotak pencarian pada Blog ini mencari sebuah artikel berdasarkan kata kunci yang diketikkan, hanya bedanya kalau digoogle hasilnya mengenai semua situs yang terindeks, sedangkan kotak pencarian yang akan anda buat ini hanya mencangkup artikel yang ada di Blog anda, sehingga dapat meningkatkan pageview dari Blog anda. Selain itu masih banyak lagi manfaatnya untuk anda dan juga pengunjung. Jika anda tertarik membuatnya, tampilannya akan seperti gambar dibawah,

Untuk memasangnya di Blog anda, silakan ikuti tutorialnya dibawah ini,

Langkah-langkah membuat Search Box pada Blog.

• Login ke akun Blog anda.
• Pilih menu "Tata Letak".
• Pilih "Tambahkan Gadget" dimanapun Search Box ingin anda munculkan.
• Pilih widget "HTML/Javascript".
• Isikan konten dengan kode yang ada dibawah,
•  
  

  <style type="text/css">
  #exe-searchbox{
      background:url(http://img803.imageshack.us/img803/8171/pencarian.png)
      no-repeat scroll center center transparent;
      width:300px;
      height:40px;
      disaply:block;
      }
  form#exe-searchform{
      display: block;
      padding-top:8px;
      padding-left:20px;
      margin:0;
      }
  form#exe-searchform #s{
      padding-top:3px;
      padding-left:1px;
      width: 225px;
      font-size:14px;
      vertical-align:top;
      border:none;
      background:transparent;
      }
  form#exe-searchform #sbutton{
      padding-top:12px;
      padding-right:35px;
      height:15px;
      width:25x;
      border:none;
      background:transparent;
      }
  </style>
  <div id="exe-searchbox">
  <form id="exe-searchform" action="/search" method="get">
  <input type="text" id="s" name="q" value="Cari Artikel Disini..." onfocus='if (this.value == "Cari Artikel Disini...")
  {this.value = ""}' onblur='if (this.value == "") {this.value = "Cari Artikel Disini...";}'/>
  <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
  </form>
  </div>

  
  
  • Klik "Simpan".
  
  Saat ini widget Search Box sudah berhasil terpasang di Blog anda.
  
  Semoga bermanfaat.*see you