Selasa, 11 September 2012

Membuat Form Search aga Mirip Yahoo pada Blog

Advertisement
Advertisement

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(http://1.bp.blogspot.com/-HLmRi4p0-pQ/UD7yRbIdGzI/AAAAAAAAAUU/shYYayjogqs/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(http://2.bp.blogspot.com/-7FAYTh5-Sgg/UDxVDynsvDI/AAAAAAAAAPs/X6MhoYF1Yr8/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..

32 komentar

Makasih sob.. uda ane coba dan berhasil.. :D

cara membuat navbar melayang seperti di atas gmna Om ??
Share Donkkk?!

wiiih ternyata ada cara agar kita nggak bosan ya lihat search yahooo ha ha

@SEBARBOLA.net Oke Sama-sama , makasih juga atas kunjungannya :)

@Smada Blog Contest Ok, sama-sama syukur deh kalo berhasil.. hehe
Happy Blogging bro...

@rekzy wiranata Sipp nanti dibuatkan bro tutorialnya Kalo saya aga nyantai coz sekarang lagi rada sibuk :D
Sabar yaa.. hehe

@Kang Artha betul kang, pake search yang gede supaya liatnya gak bosen.. hihiihii

wah bisa di setting juga ternyata ya. jadi unik nie. make yahoo.. padahal editan. hehehe

Mas, saya adminnya smadablogcontest.blogspot.com ... cara membuat gif itu menggunakan photoscape kog mas.

Makasih tutorialnya ... sangat membantu ...

Aa Solehh ,,
dag usah di buatin juga gak apa2,,
aku juga uda dapet navbar dan menu macam cara gampang yang merah ,,
hehe,,,
lihat aja om di blog saya

keren sob tp cara pasangx gmn ya.., soalx widget template sy gk ada yg diats.., yg ada jg disebelah postingan...

keren sob, boleh dicoba nih :D

makasih ya...

menarik sekali.... keren...

tanks info gan..

@Agoeng sang oya pake photoscape juga bisa ya kalo cuma gitu,, hehe saya kitra pake gif Animator :D

@Ricdetop Yupps,, sama-sama semoga bermanfaat :)

@Rekzy Creations ya syukur deh kalo udah bisa bikinnya, saya udah liat ,, bagus tuh navbarnya warna merah.. :) Happy Blogging bro

@Rohis Facebook yaelah , blognya mas udah bagus meski ga di pasang Widget ini juga ,, saya buat tutorail ini khusus buat temen-temen yg membutuhkan Form Search seperti ini.. hehehe

Happy Blogging aja :D

@Cirebon-Cyber4rt Silahkan dicoba sob.. hehehe dari Cirebon mampir laggi kesini :D

@Andi Sitorus Thnks juga atas kunjungannya , semoga makin sukses dengan Blognya :)

wah mancap... boleh neh dicoba, salam murid baru hehe

kok gak bisa di blok ya sob? apa harus diketik manual nih..???

wah, bisa juga nih untuk antiin form search blog saya Sob.. Izin pake ya Sob.. :)

mantab banget tutorialnya gan....
tapi ko' scriptnya gak bisa di kopi ya..?
hehehehe...

Nah kalau untuk navbar di blog ini ada tutorialnya juga gak mas...?

keren euy kang Search Boxnya....Ntar saya coba pasang ah...!

Thanks yah tutorialnya...!

Assalamualaikum mas kenalin saya pelanggan baru... saya mau tanya nih mas.. bagaimana membuat header menjadi transparant ya kaya blog ini.. header nya trans parant (seperti detik.com)
terimakasih

sob punya saya kan udah ada tuh, nah kalau saya mau ganti gimana buat ngilangin yang lama sob? Itu udah bawaan templatenya jd sy bingung buat ilangin yang lama, makasih sebelumnya sob.

ini blog saya sob : semuainfogue.blogspot.com

@Yobert Paraicari aja sob kode menu pencarian di blog'nya nanti tinggal hapus.

Komentar anda sangatlah berarti bagi kami, silahkan berkomentar dengan bijak dan sopan. Komentar dengan mencantumkan Link aktif akan kami hapus.
EmoticonEmoticon