1.Login terlebih dahulu di www.blogger.com
<form action=”/search” style=”display:inline;” method=”get”>
<input id=”s” name=”q” type=”search” placeholder=”Cari Artikel Disini”/>
</form>
<style>
#s {
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: 200px;
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqoyqngRYKPMvaKM4_0u9jQNC1BeN8UdXf-Fg-EieAvUhb6emPe6S5Ewdc3FEQEmOjSnKUdhJOHibEUP-7mhfdZxSgFyJbnOvi_GROLTGxbggV1RGagOcthuDqit5dq7jD-Y03T9H5cic/s1600/Search.png) center right no-repeat;
}
#s::-webkit-input-placeholder, #s:-moz-placeholder {
color: #607078;
}
</style>
3.Pilih Tata Letak / Layout – Tambah Gadget / Add Gadget – Pilih HTML/ JavaScript – Baru pastekan kode di atas ke dalam kotak yang tersedia – Save
4.Selamat Anda sudah berhasilmemasang 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