Membuat style pencarian untuk blogger
Berapa kali mencoba membuat style dari default search box di blogger. Rasanya agak ribet
Menurut saya pribadi ini cara simpe membuat tampilan search box sendiri di blogger
- Buka blogger.com dan masuk ke akun kita sendiri
- Setelah login, pilih menu Tata Letak
- Tambahkan gadget HTML/Javascript di section yang kita pilih
- Masukkan kode ini
<form action="/search" id="searchbox" method="get">
<input name="q" size="15" type="text" />
<input id="button-submit" type="submit" value="Search" />
</form>
- lalu dibagian style masukkan juga kode untuk mempercantik tampilan
/** style untuk form search this blog **/
#searchbox {background: #d8d8d8;border: 1px ;padding: 5px 5px;width: 250px;}
input:focus::-webkit-input-placeholder { color: transparent;}
input:focus:-moz-placeholder {color: transparent;}
input:focus::-moz-placeholder {color: transparent;}
#searchbox input {outline: none;}
#searchbox input[type="text"] {background: url(http://2.bp.blogspot.com/-xpzxYc77ack/VDpdOE5tzMI/AAAAAAAAAeQ/TyXhIfEIUy4/s1600/search-dark.png) no-repeat 10px 6px #fff;border-width: 1px;border-style: solid;border-color: #fff; font: bold 12px Arial,Helvetica,Sans-serif;color: #bebebe;width: 55%;padding: 8px 15px 8px 30px;}
#button-submit {background: #6A6F75;border-width: 0px;padding: 9px 0px;width: 23%;cursor: pointer;font: bold 12px Arial, Helvetica;color: #fff;text-shadow: 0 1px 0 #555;}
#button-submit:hover {background: #4f5356;}
#button-submit:active {background: #5b5d60; outline: none;}
#button-submit::-moz-focus-inner {border: 0;}