» » Membuat Kotak Pencarian (Search Box)

Membuat Kotak Pencarian (Search Box)

Diposkan oleh Unknown 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 :
Label: , Tutorial Blog

Tutorial Blog | Membuat Kotak Pencarian (Search Box)

.:. 16 komentar .:.Post a Comment

  1. kotasusu06 December, 2011 20:50

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

    ReplyDelete
  2. Unknown06 December, 2011 23:50

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

    ReplyDelete
  3. Anonymous27 January, 2013 23:03

    Thanks for the sharing...
    Mantap :)

    ReplyDelete
  4. obat tumor11 October, 2013 12:15


    thanks infonya gan :)

    ReplyDelete
  5. dea16 October, 2013 14:57


    sukses terus gan ditunggu artikel selanjutnya

    ReplyDelete
  6. tedi26 November, 2013 10:37

    sangat menarik sekali infonya :)

    ReplyDelete
  7. cinta28 December, 2013 10:01

    thanks infonya gan,,,

    ReplyDelete
  8. obat stroke09 February, 2015 00:17

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

    ReplyDelete
  9. pengobatan gagal jantung11 March, 2015 11:01

    thanks infonya sob

    ReplyDelete
  10. Obat Herbal Migren17 March, 2015 11:32

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

    ReplyDelete
  11. Obat Herbal Stroke17 March, 2015 16:11

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

    ReplyDelete
  12. Obat Alami Penyakit Diabetes01 April, 2015 10:55

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

    ReplyDelete
  13. obat penyakit gula07 April, 2015 08:30

    makasih banyak buat infonya,,

    http://goo.gl/vg9SKo

    ReplyDelete
  14. Unknown15 April, 2015 11:28

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

    ReplyDelete
  15. Unknown04 May, 2015 12:46

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

    ReplyDelete
  16. Obat Kencing Nanah Atau Gonore20 June, 2015 23:16

    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