Beranda Blogger

Cara Membuat Kotak Pencarian Responsive Di Blog

00.01
A+ A- Print Email
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 dektop. 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 akun Blogger.
  • Klik tata letak pada dashboard.
  • 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 ke akun Blogger sobat.
  • Klik template pada dashboard.
  • Lalu klik edit HTML.
  • Copy dan pastekan CSS dibawah ini tepat diatas kode ]]></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.