Pada tutorial kali ini kita akan membuat kotak pencarian
atau tombol pencarian responsive di blog. Sebuah kotak pencarian pada halaman web melakukan fungsi yang sama
dengan Google yang memungkinkan pengguna untuk menemukan konten yang
spesifik di website kita. Memiliki Search Box adalah kebutuhan mutlak
bagi kebanyakan website dan diperlukan untuk meningkatkan kenyamanan
para pengguna website. Sebenarnya
blogger telah memberikan widget kotak pencarian default,
tapi sayangnya tidak tidak mobile friendly. Nah kotak
pencarian responsive ini sangat berguna untuk blog pada tampilan mobile
maupun tampilan dektop. Anda bisa meletakkan kotak pencarian
ini dimanapun yg diinginkan. Misal header, sidebar, footer atau
dimanapun di dalam blog
Oh iya belum saya tambahkan dalam tutorial ini, kita akan belajar cara membuat kotak pencarian yang cantik dengan bantuan CSS (Cascading Style Sheets). CSS
yang akan dipakai memiliki kerumitan tingkat menengah, sehingga
memerlukan beberapa pemahaman dasar CSS, jadi diharapkan anda memahami
dasar CSS terlebih dahulu sebelum meneruskan tutorial ini.
HTML Kotak Pencarian
- 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='Cari Disini' type='text'/><button id='search-button' type='submit'><span>Search</span></button></form></div>
- Klik simpan
CSS Kotak Pencarian
Sebenarnya untuk css ini opsional, intuk hasil yang lebih bagus hal ini bisa ditambahkan , sehingga tampilan akan lebih menarik- 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;border:1px solid #ccc;padding:0px;border-radius:0px}#search-form{height:20px;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:0px 0 5px 1em;color:#333;outline:none}#search-button{position:absolute;top:10px;right:5px;height:40px;width:80px;color:#fff;text-align:center;border-width:0;background-color:#0099FF;cursor:pointer;text-transform:uppercase;border-radius:3px;outline:0}#search-button:hover{background:}
- Klik simpan
