Membuat Kotak Pencarian (Search Box)

Diposkan oleh Madie Zha on 30 November 2011 at 1:05 PM

Membuat Kotak Pencarian (Search Box) | Tutorial Blog

Membuat Kotak Pencarian (Search Box) | Tutorial Blog

Tutorial kali ini saya akan berbagi cara Membuat Kotak Pencarian (Search Box).
Berikut caranya :
  • Login ke Dasbor blogger, klik Design (Rancangan) > Edit HTML, Taruh kode ini di atas kode  ]]></b:skin>
    berikut kodenya:
    #search {
    width: 280px;
    font-size: 11px;
    float: right;
    margin: 0;
    padding: 6px 0 0;
    }
    #searchform {
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: inline;
    }
    #searchbox {
    background: #84CAF6;
    width: 220px;
    color: #000;
    margin: 0;
    padding: 4px 0 3px 5px;
    border: 1px solid #005BC3;
    display: inline;
    font: normal 12px Georgia, Times New Roman, Trebuchet MS;
    }
    #searchbutton {
    background: #84CAF6 !important;
    color: #000;
    margin: 0 0 0 5px;
    padding: 3px 3px 2px;
    border: 1px solid #005BC3;
    font: bold 11px Georgia, Times New Roman, Trebuchet MS;
    }
  • Save Template.
  • Sekarang ke Page Element, klik Add a Widget > HTML/Javascript Masukkan kode ini di dalam area content.
  • <div id='search'>
    <form action='/search/' id='searchform' method='get' style='display:inline;'>
    <input id='searchbox' maxlength='200' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}' type='text' value='Search...'/>
    <input class='btn' type='submit' value='Go'/>
    </form>
    </div>
  • Save dan lihat hasilnya.
Semoga bermanfaat...!

Artikel lainnya :

.:. 19 komentar .:.Post a Comment

  1. maaf,, saya sudah coba copy code dibagian design--edit html tp selalu error.. adaide?? thanks

    ReplyDelete
  2. @kotasusu :
    Udah Ane benerin Sob, dicoba lagi aja, mungkin ga error lagi.
    Taruh kodenya di atas kode ]]></b:skin>

    ReplyDelete
  3. Thanks for the sharing...
    Mantap :)

    ReplyDelete

  4. sukses terus gan ditunggu artikel selanjutnya

    ReplyDelete
  5. sangat menarik sekali infonya :)

    ReplyDelete
  6. MANTAP DAH TUTORNYA KAWAN
    http://acemaxs31.com/obat-herbal-stroke-ace-maxs/
    http://i-bikeco.com/
    http://mas-galih.com/

    ReplyDelete
  7. nice artikelnya, sangat membantu sekali :)
    http://kedaijellygamatgoldg.com/obat-herbal-migren/

    ReplyDelete
  8. Terimakasih atas informasinya :)
    ijin share http://jellygamatgoldg31.com/obat-herbal-stroke/

    ReplyDelete
  9. Terima kasih Infonya Bro, izin ikut menerapkan ya. hehe

    Informasi Lowongan Kerja Terbaru BUMN, BANK, Persero, Swasta, & Berbagai Perusahaan Besar di Indonesia : http://expocpnsbumn.blogspot.com/

    ReplyDelete
  10. Terima kasih Infonya Bro, izin ikut menerapkan ya. hehe

    Informasi Lowongan Kerja Terbaru BUMN, BANK, Persero, Swasta, & Berbagai Perusahaan Besar di Indonesia : http://expocpnsbumn.blogspot.com/

    ReplyDelete
  11. Mantaap gan artikelnya, di tunggu artikel yang lainnya :)
    Izin share ya gan
    s.id/5aK

    ReplyDelete
  12. makasih banyak buat infonya,,

    http://goo.gl/vg9SKo

    ReplyDelete
  13. Thanks sob artikelnya sangat bermanfaat sekali :)
    Izin nyimak saja ya sob
    http://goo.gl/VrnFlw

    ReplyDelete
  14. Izin share gan :)
    http://goo.gl/fSVyKh

    ReplyDelete
  15. Pembelian obat denature bisa invite pin bbm kami : 7968ab6b

    ReplyDelete

 
Alexa Certified Traffic Ranking for http://wadahtutorial.blogspot.com
Follow
back to top
Home
back to bottom