Translate this Article...
Cara Menambahkan Kotak Tombol Search Blogger Keren
Seperti yang kita tahu Widget Search pada blog dapat memudahkan pengunjung dalam mencari suatu artikel dengan judul tertentu di blog kita. Ada banyak berbagai macam jenis model kotak pencarian pada blog berikut salah satu model kotak pencarian yang dinamis dan stylish.
Sebetulnya dalam membuat model widget pencarian tidak sulit sama sekali. Anda dapat menyesuaikan tombol menggunakan CSS atau ganti dengan gambar sebagai gantinya. Pilihan lain kustomisasi adalah dengan menambahkan beberapa informasi teks di dalam kotak pencarian dan menghapus pencarian tombol sama sekali. (Tips Blogger)
Tutorial Membuat Tombol Search Pada Blog
Buka dasboard blog ►Tatak Letak ►Add gadget HTML
Masukkan code dibawah ini - lalu save dan lihat hasilnya.
Silahkan dipreteli sendiri sesuai kesukaan agan,,.
<style>
#searchbox{background:#d8d8d8;border:4px solid #e8e8e8;padding:20px 10px;width:100%}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input{outline:0}#searchbox input[type="text"]{background:url(https://2.bp.blogspot.com/-B_XSitgTzIM/V2AL7uECizI/AAAAAAAAEho/kpN5xqV4864BVjJkLNI7zW8uyPLVB7LywCLcB/s1600/search-dark-blog.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:0;padding:9px 0;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:0}#button-submit::-moz-focus-inner{border:0}
</style>
<form id="searchbox" method="get" action="/search">
<input name="q" type="text" size="15" placeholder="Type here..." />
<input id="button-submit" type="submit" value="Search" />
</form>
<br/>
<b><span style="color: #e06666; font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif; font-size: large;">CONTENT POLICY</span></b><br />
<div style="text-align: center;">
<span style="color: red;"><span style="font-size: large;"><span style="color: #e06666; font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"></span></span></span></div>
<div style="text-align: center;">
<div style="text-align: left;">
<span style="color: #e06666; font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif; font-size: small;">Seluruh lirik dan chord gitar dalam blog ini adalah hasil salinan dan ujicoba sendiri.</span></div>
</div>
<div style="text-align: center;">
<div style="text-align: left;">
<span style="color: #f1c232; font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">Anda dapat mengembangkan dan mengkoreksi jika terdapat kesalahan lirik dan chord gitar sesuai kreatifitas dan keinginan anda.</span></div>
<div style="text-align: center;">
<div style="text-align: left;">
<span style="color: #eeeeee; font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif; font-size: x-small;">Kami tidak bertanggung jawab atas tindakan anda menyebarkan konten ini, karena persoalan Hak Cipta.</span></div>
</div>
</div>
Untuk code yang berwarna merah silahkan diedit sesuka anda..
Salam : Admin - Andi AM (Celebes Blogger Community)
Nb. Bagi yang ingin share/copy kami persilahkan.