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 :
Gimana Gampang kan cara bikinnya? kalo ada yang mau ditanyakan silahkan kasih komentar aja.. Selamat mencoba Menbuat Menu Pencarian yang Mirip Yahoo..
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/AVvXsEi3jxZ984Wcv6BiRtKO8TMYrd2bLQPYlDbqUnCvGfjzCfvh8el2yhJX3D0kIHfU6d_kR0lMd2obFNPwV81dCKI7T7ycNw911INYEYfyLDBiJXoQz1CwP6HP9mKNp-arR1Jpa1_X2PIPq7Lc/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/AVvXsEifUc5BMOnMVaYxn7hH0uiIO0cWu5eFv9ApHEBN0mOWivK8DaSCC7XvkIjjKva79iGfrDupA5R2gz6GXTOPcXgQgBBazhyGRd42_zaMIBV4brEhYyLzge7AgcIjZdXOKgECsr7RwiL3-S8R/s1600/bg_pencarian_cargam.jpg) no-repeat;height: 28px; width: 104px;border:none;}
- Kemudian Save Template
- 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=''/>
<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...
0 komentar:
Posting Komentar