Tapike.com

Cara Membuat Kotak Pencarian Responsive Di Blog

Cara Membuat Kotak Pencarian Responsive Di Blog
Cara Membuat Kotak Pencarian Responsive Di Blog - Pada tutorial kali ini kita akan membuat kotak pencarian (Search Box) atau tombol pencarian (Search Button) responsive di blog. Kotak pencarian merupakan element yg sangat penting untuk membantu pembaca menemukan artikel atau postingan yg relevan dari blog. Sebenarnya blogger telah memberikan widget kotak pencarian default (Search Box), tapi sayangnya tidak responsive atau tidak mobile friendly. Nah kotak pencarian responsive ini sangat berguna untuk blog pada tampilan mobile maupun tampilan dekstop. Anda bisa meletakkan kotak pencarian responsive ini dimanapun yg diinginkan. Misal header, sidebar, footer atau dimanapun di dalam blog. Bagi yg ingin membuat kotak pencarian responsive di blog, simak langkah berikut.

Demo

HTML Kotak Pencarian Responsive

  • Login ke Blogger.
  • Klik tata letak.
  • Lalu tambahkan element/add gadget dan pilih HTML/Javascript.
  • Copy dan pastekan html di bawah ini.
<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Kotak Pencarian Responsive ...' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button></form></div>
  • Klik simpan
Ubah tulisan warna merah sesuai keinginan. Jika ingin menambahkah css wajib isi, silahkan tambahkan required pada input text.

CSS Kotak Pencarian Responsive

  • Login Blogger
  • Klik template pada dashboard.
  • Klik edit HTML.
  • Copy dan pastekan CSS dibawah ini tepat diatas ]]></b:skin>.
#search-box{position:relative;margin:0 auto;border:1px solid #ccc;padding:5px;border-radius:4px}#search-form{height:40px;background-color:#fff;overflow:hidden}#search-text{font-size:14px;color:#ddd;border-width:0;background:transparent;line-height:15px}#search-box input[type="text"]{width:90%;padding:10px 0 5px 1em;color:#333;outline:none}#search-button{position:absolute;top:5px;right:5px;height:40px;width:80px;color:#fff;text-align:center;border-width:0;background-color:#ff5848;cursor:pointer;text-transform:uppercase;border-radius:3px;outline:0}#search-button:hover{background:#333}
  • Klik simpan
Demikianlah tutorial cara membuat kotak pencarian (Search Box) atau tombol pencarian (Search Button) responsive di blog. Semoga tutorial ini dapat bermanfaat bagi kita semua. Jangan lupa berlanggan atau like, follow serta bagikan artikel ini ya.
12 Comments Blogger
Disqus
  1. Nice info gan
    http://poet-nugroho-fisip11.web.unair.ac.id/

    BalasHapus
  2. Terimakasih infonya bermanfaat sekali untuk blog saya http://nurulamin1455.blogspot.com

    BalasHapus
  3. Izin nyoba buat diblog sy mas.. Ternyata utk bisa daftar adsense faktor search box ini penting sekali. Thanks

    BalasHapus
  4. wah sukses thx gan. kunjungi juga blog saya yah di vanoverhelsing.blogspot.co.id

    BalasHapus
  5. Udah ane coba gan di blog ane. Keren nih warnanya cocok ma template. http://seofilmterbaru.blogspot.com

    BalasHapus
  6. makasih informasinya gan, yang lagi ane cari nih :D

    BalasHapus
  7. bagus banget infonya, thanks gan ^_^

    BalasHapus
  8. Gan kalau jenis tombol search seperti di web ini, apa namanya ?

    BalasHapus
    Balasan
    1. itu tombol share rancangan saya sendiri gan, nt kalo ada waktu saya posting cara membuatnya ya gan, saya juga gak tau namanya apa haha :D

      Hapus
  9. Terlalu simple mas, kurang berwarna. Kurang pas untuk blog baru saya...

    BalasHapus
    Balasan
    1. Ya, kebetulan kotak pencarian ini saya desain simple.

      Hapus
  10. Nyimaaak Gaan..
    http://ajibayustore.blogspot.co.id/

    BalasHapus


Join This SiteInstagram