Tips Cara Membuat Form Search aga Mirip Yahoo pada Blog

Menu Pencarian adalah salah satu widget yang wajib ada pada suatu Blog/Web hal ini tentunya untuk mempermudah para pengunjung untuk mencari konten yang mereka maksud, dengan demikian para pengunjungpun bisa betah berlama-lama di blog kita, apalagi kalau konten yang kita sajikan menarik, bermanfaat, dan berbobot pula.. hehe
Langsung saja gak usah banyak cing-cong kali ini Saya akan berbagi membuat menu pencarian yang sedikit mirip dengan Yahoo , kenapa sedikit mirip.? yaa karena ini kaga mirip dengan menu Pencarian Yahoo..
Oke berikut Cara Membuat Menu pencarian aga mirip Yahoo pada Blog :

• Seperti biasa kita kudu masuk ke Blog masing-masing..
• Masuk ke menu Rancangan - Edit HTML
• Jangan lupa centang dulu Expand Template Widget
• Cari kode ]]></b:skin>
• letkan kode CSS berikit di atas kode ]]></b:skin>

.searchform {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU5DcDCi_gfL5OrCu6mWJvyH6DmdvINgG4Lu7rUDnJDpJ-5mGrcJgfszdOsOpxXQf7UXHPCDwqbQUUvDNdW6StsPGxkoerJYG0B3Jb15rFHKlMbjPolgcKWuiusgMmVvEnEI90g7fMZvWg/s1600/CarGam-search.png) no-repeat; width:550px;height:47px;<br />display: inline-block;zoom: 1; /* ie7 hack for display:inline-block */<br />*display: inline;border: solid 0px #ccc;padding: 0px;}<br />.searchform input {font: normal 12px Arial, Helvetica, sans-serif;padding:6px;}<br />.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;}<br />.searchform .searchbutton {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWd5Vny23O_ll5YZtpzNk7NjVdJBXtKdoNlTE5pa4NQWpkgQ6cMz19RA3vnvLEraCkPPa0-Dus81WRzfMomEJ8o00VgAI1PCs2yGKfmdCeeTSNGVI6duYHvOa3BwvdNnqQS8tQVk2DPN7E/s1600/bg_pencarian_cargam.jpg) no-repeat;height: 28px; width: 104px;border:none;}

• Kemudian Save Templates

Eit jangan kemana-mana dulu sob , masih ada langkah berikutnya..

• Sekarang kita balik lagi ke menu Rancangan..
• Tambahkan Gadget baru pada template
• Pilih HTML/Java Script
• Kemudian masukan Script berikut :

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

• Langkah Terakhir tinggal di Save

Kalo cara-cara yang saya jelaskan sobat ikuti sampai tuntas maka hasilnya seperti menu pencarian yang ada pada Blog ini.. atau gambarnya seperti ini...