Cara Membuat Form Search Engine/Kotak Pencarian Mirip Yahoo Di Blog

Tutorial Blog kali ini Master akan memberikan resep soal Cara Membuat Form Search Engine/Kotak Pencarian Mirip Yahoo Di Blog. Form Search atau dalam bahasa indonesianya banyak yang mengartikan sebagai kotak pencarian. Tentunya sobat sudah tau apa yang dimaksut dengan kotak pencarian disini. Kotak pencarian ini sepertinya sebuah icon yang wajib untuk dipasang pada halaman blog. mengapa demikian, Yup's benar sekali kawan-kawan, dengan memasang kotak pencarian di blog maka pengunung blog akan lebih mudah untuk menemukan informasi-informasi yang ada di blog kamu. Selain itu Efek terhadap Seo Blog kamu akan meningkatkan Page View blog kamu artinya hal ini akan memperkecil Bouce Rate pada blog kamu.

Semakin Kecil tingkat Bouce Rate pada blog kamu maka blog kamu akan disayang oleh algoritma google yang disebut Google panda. apa Itu Bounce Rate silahkan kamu baca pada postingan Master Chef sebelumnya di Taukah Kamu Apa itu Google Panda ?. Kotak pencarian yang akan Master Chef sampaikan caranya memiliki konstruksi yang mirip dengan kotak pencarian Yahoo. Kurang lebih gambarannya seperti dibawah ini :

Ok, langsung saja kita kupas tuntas resep Tutorial Blog tentang Cara Membuat Form Search/Kotak Pencarian Mirip Yahoo Di Blog sebagai berikut :

Langkah 1 

1. Silahkan login akun blogger masing-masing
2. Setelah login, karena kita akan melakukan sedikit Edit HTML blog jadi silahkan amankan template kamu terlebih dahulu dengan membackup template kamu.
3. Kalau template kamu sudah kamu amankan sekarang silahkan akses halaman Edit HTML Blogspot.
4. Pada halaman Edit HTML cari kode ]]></b:skin> (gunakan tombol CTRL + F Dan F 3 untuk mempermudah pencarian kode)
5. Sudah ketemu kode tersebut tambahkan kode dibawah ini diatasnya kode  ]]></b:skin>.

.searchform {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTP0TVdw3Z2H5qP8_Ms474Kg6UqLDrWQ9ja1cA2lWDwj6AOxjYTxaa9Pz97hF5cJRgL2ign1W5cmqMHMMlQv49X8IIeJ1dCgWHklytaJxqrpLKMJErtfVGmvrUeiV0vXN4emJEtMtMliuc/s1600/CarGam-search.png) no-repeat; width:550px;height:47px;
display: inline-block;zoom: 1; /* ie7 hack for display:inline-block */
*display: inline;border: solid 0px #ccc;padding: 0px;}
.searchform input {font: normal 12px Arial, Helvetica, sans-serif;padding:6px;}
.searchform .searchfield {background: #e5e5e5;width: 416px;outline: none;margin:5px 2px 0px 5px;;border-top:1px solid #888;border-left:1px solid #888;border-right:1px solid #ccc;border-bottom:1px solid #ccc;}
.searchform .searchbutton {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3AL-qYia2m-loirT5sM1iGo6b05L3mfEpUiTQNxXuS5bVXfmzp5iegWA_EPeKwx9Lm2BVPrJ_icFQGNTqiDJqYMoojdC2Jj2fh40xMTy7OSNgNj0XS9tHRGkmMxN6YvBuhioaNZDURJbc/s1600/bg_pencarian_cargam.jpg) no-repeat;height: 28px; width: 104px;border:none;}

6. Klik Simpan

Langkah 2

Pada langkah 2 ini kita akan memunculkan kotak pencarian dihalaman blog kamu. ikuti langkah-langkahnya sebagai berikut :

1. Pada bagian dashbord Blog kamu Pilih Tata Letak >> Add Gadget
2. Cari dan pilih widget HTML/JavaScript
3. Tambahkan kode berikut kedalam kolom widget HTML/JavaScript

<form action=' /search' class='searchform' method='get'>
<input class='searchfield' id='q' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;&quot;;}' onfocus='if (this.value == &quot;&quot;) {this.value = &quot;&quot;}' type='text' value=''/>
<input class='searchbutton' type='submit' value=''/>
</form>

4. Klik Simpan
5. Selesai dan lihat hasilnya