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.
Nice info gan
BalasHapushttp://poet-nugroho-fisip11.web.unair.ac.id/
Terimakasih infonya bermanfaat sekali untuk blog saya http://nurulamin1455.blogspot.com
BalasHapusIzin nyoba buat diblog sy mas.. Ternyata utk bisa daftar adsense faktor search box ini penting sekali. Thanks
BalasHapuswah sukses thx gan. kunjungi juga blog saya yah di vanoverhelsing.blogspot.co.id
BalasHapusUdah ane coba gan di blog ane. Keren nih warnanya cocok ma template. http://seofilmterbaru.blogspot.com
BalasHapusmakasih informasinya gan, yang lagi ane cari nih :D
BalasHapusbagus banget infonya, thanks gan ^_^
BalasHapusGan kalau jenis tombol search seperti di web ini, apa namanya ?
BalasHapusitu tombol share rancangan saya sendiri gan, nt kalo ada waktu saya posting cara membuatnya ya gan, saya juga gak tau namanya apa haha :D
HapusTerlalu simple mas, kurang berwarna. Kurang pas untuk blog baru saya...
BalasHapusYa, kebetulan kotak pencarian ini saya desain simple.
HapusNyimaaak Gaan..
BalasHapushttp://ajibayustore.blogspot.co.id/
thanks gan sangat bermanfaat lho
BalasHapussangat membantu..teriamkasih
BalasHapus