. 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
- 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
EmoticonEmoticon