Cara membuat kotak pencarian responsive di blogger

Cara membuat kotak pencarian responsive di blogger
Kali ini saya akan share Cara membuat kotak pencarian responsive di blogger
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. 

HTML:
<form action="/search" style="display:inline;" method="get">
<input id="searchbox" name="q" type="search" placeholder="Search..."/>
</form>

CSS:
#searchbox{
margin: 0 auto;
-webkit-appearance: none;
-moz-appearance: none;
padding: 12px 48px 12px 12px;
-webkit-border-radius: 200px;
-moz-border-
radius: 200px;
border-radius: 200px;
width: 300px;
height: 16px;
color: #3a4449;
border: none;
outline: none;
-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
position: relative;
z-index: 2;
background: #fff url(http://2.bp.blogspot.com/-RdCoLqn34t4/UDeUFSTJ17I/AAAAAAAAKqg/GxdClZ5RjXg/s1600/Search.png) center right no-repeat;
}
#searchbox::-webkit-input-placeholder, #s:-moz-placeholder {
color: #607078;
}

Selamat Anda sudah berhasil memasang kotak pencarian di blog.
Fungsi kotak pencarian ini sebenarnya hanya untuk mempermudah pembaca ataupun kita sebagai pemiliki blogger untuk mencari artikel, agar tidak perlu repot mencari satu persatu.

No comments:

Post a Comment

Tambahkan Komentar