Membuat kotak pencarian responsive di blog

Membuat kotak pencarian responsive di blog

Kotak pencarian menarik, responsive, bisa dipergunakan disemua perangkat, tidak akan mengurangi  kecepatan loading blog. Kotak pencarian ini juga cocok untuk yang mematikan mode selular pada template.
Coba test kecepatan blog di  PageSpeed Insights, cek pada tab selular, kalau pengalaman pengguna tidak 100%, dan ada pemberitahuan target ketuk terlalu dekat, kalau salah satunya kotak pencarian, coba pakai kotak pencarian berikut ini.

Pasang kode berikut diatas ]]></b:skin> :
 

.search-tab{ height:60px;display:block;border-bottom:1px solid #eee;background:#eee} .search-box{ float:center;display:block;min-width:280px;width:40%;margin:0px auto 15px;border:1px solid #ccc; padding:0 10px;border-radius:2px;position:relative;background:whitesmoke;top:10px; z-index:9999;} #search-form{ height:40px;line-height:40px;background-color:whitesmoke;overflow:hidden;} #search-text{ font-size:14px;color:#111;border:none;background:transparent;line-height:40px;height:40px; width:75%;padding-left:0px;} #search-box input[type="text"]{ padding:8px 0 7px 1em;color:white;outline:none;} #search-button{ position:absolute;height:40px;line-height:40px;width:50px;color:#fff;text-align:center;border-width:0; cursor:pointer;text-transform:uppercase;border-radius:2px;outline:0;bottom:0;right:0;margin-left:10px; background:#ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP8X2v_9u8Re96JUpItEiGXojmma2gUCRJkbiZ-1kJIEV54SYU6jMdO8Kg9eGZ1kMse5H7ucJT35GiWkUXrxcs1Zv2lRDoqJFVvnUimr0OQaAnp6o6VFEiqEez0JAphAkWBaw-zDTxyCP_/s1600/search.png) no-repeat center center;} #search-button:hover{ margin-left:10px;background:#2670bf url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP8X2v_9u8Re96JUpItEiGXojmma2gUCRJkbiZ-1kJIEV54SYU6jMdO8Kg9eGZ1kMse5H7ucJT35GiWkUXrxcs1Zv2lRDoqJFVvnUimr0OQaAnp6o6VFEiqEez0JAphAkWBaw-zDTxyCP_/s1600/search.png) no-repeat center center;}

Kode pemanggilnya, silahkan letakan sesuai keinginan, contoh dibawah menu, maka cari penutup (</div>) dari menu, atau coba letakan diatas <div class='main-outer'>, atau diatas <div class='main-wrapper'>, cobalah untuk pratinjau dulu sebelum disimpan dan berikut adalah kodenya :

<div class='search-tab'> <div class='search-box'> <div id='search-box-menu'> <form action='/search' id='search-form' method='get' target='_top'> <input id='search-text' name='q' placeholder='Search' type='text'/> <button id='search-button' type='submit'></button> </form> </div> </div> </div> <div class='clear;'/>