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 aaSolah akan berbagi CaraGampang 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/AVvXsEjU1RdPDaGzq9GctJHVe3n8nPb02fgVBM5aYMyUIPiSUBP4WmSt_n32QWF6aNRYXz0kbCF2eMvCgVLW4-414-d0iY2ADgxG7z2I3QoTcV3h3ZVKmD7UMbaN_jBINS2xCH-DGyXaNPjCCmr2/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/AVvXsEiMEw5HopcFghGMXoGkEC-0g8tZ17foeCLeliJy8PckOxKn8j0Q31EMzqRSb7A4UMv2GL_DzYZHAIutjMJ_5DSkIoEbYwzl76Ts-IIQpqTu87tg3Q86BHIllB4zSELJB2QCF-CyQvUnVnE0/s1600/bg_pencarian_cargam.jpg) no-repeat;height: 28px; width: 104px;border:none;}

• Kemudian Save Template

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 == &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>

• 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...

Gimana Gampang kan cara bikinnya? kalo ada yang mau ditanyakan silahkan kasih komentar aja.. Selamat mencoba Menbuat Menu Pencarian yang Mirip Yahoo..

Socializer Widget By Blogger Yard

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →