Membuat Form Search aga Mirip Yahoo pada Blog Reviewed by aa Solah on 14.42 Rating: 5
Home » , » Membuat Form Search aga Mirip Yahoo pada Blog

Membuat Form Search aga Mirip Yahoo pada Blog

Written By aa Solah on Selasa, 11 September 2012 | 14.42

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

32 komentar:

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

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

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

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

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

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

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

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

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

    BalasHapus
  10. Makasih tutorialnya ... sangat membantu ...

    BalasHapus
  11. 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

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

    BalasHapus
  13. keren sob, boleh dicoba nih :D

    makasih ya...

    BalasHapus
  14. menarik sekali.... keren...

    tanks info gan..

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

    BalasHapus
  16. @Ricdetop Yupps,, sama-sama semoga bermanfaat :)

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

    BalasHapus
  18. @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

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

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

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

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

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

    BalasHapus
  24. 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...?

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

    Thanks yah tutorialnya...!

    BalasHapus
  26. 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

    BalasHapus
  27. 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

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

    BalasHapus

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