Cara Membuat Kotak Search Box Keren ~ SCH-XP

5 Kotak Search Box Keren - Kembali dengan tutorial blog yaitu membuat kotak search box keren, pasti kalian tau kan dgn search box, yaitu alat untuk membantu pencarian artikel pada sebuah blog / website.
nah jika kalian merasa ingin mengganti searchbox bawaan blogger, mungkin CSS dan HTML berikut ini bisa menggantikan posisi search box bawaan blogger, hanya dgn tambahan CSS dan HTML, bisa membuat Search box menjadi menarik dan mengalih perhatian pengunjung untuk mencari artikel.

5 Kotak Search Box Keren :

1. Buka Blogger.

2. Klik Tambah Widget / Add a Gadget.

3. Pilih HTML/Javascript.

4. Copy kode di bawah ini dan letakkan di box HTML/Javascript.

Search Box Style Green

<style type="text/css">#mediablogger-searchbox { border-radius: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlxsDjAaWb5VY13Be6lcr3JyMdENwpf-Qy7CksEhuf4i9X6gVuLunXzCW5UOkvdKwcG5lAXpZloS1QdR1vfjeYOi-gZVPDjyf85teUqOskTvwJM0XwZpgfLwf4iTOXQfr401FMMD6Vn25i/s1600/impoint.blogspot.com-green.png) no-repeat scroll center center transparent; width: 307px; height: 50px; disaply: block;} form#mediablogger-searchform { display: block; padding: 9px 16px; margin: 0;} form#mediablogger-searchform #s { padding-left: 24px !important; padding: 7.5px; margin: 0; width: 198px; font-size: 16px; font-family: georgia; font-style: italic; color: #666666; vertical-align: top; border: none; background: transparent;} form#mediablogger-searchform#sbutton { margin: 0; padding: 0; height: 40px; width: 74px; vertical-align: top; border: none; background: transparent;}</style><div id="mediablogger-searchbox"> <form id="mediablogger-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}' /> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form></div>

Untuk Cara Pemasangan Search Box Warna Lain, ganti kode berwarna merah kode diatas dengan url gambar di bawah ini :

- Style Red ( Merah )

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF4wf_nmA_o2J9mLA189IWc_MfrTBOixOYXeHwNuZbD6Pu2EmPqFpJsputPh6E0YgOxVbBdSWb6GZ_J8dKZK2-bLH9WZyF3X0V7JHZKY6Mk4kvV95oiWNpM99INOM-zP65MYRmEgYvYURz/s1600/impoint.blogspot.com-red.png

- Style Blue ( Biru )

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinU_rDkAUB0bBM9yfd-e-4x3PP59DtLPw1yTekuwI8RKfO1Q4fZ3QcJsXhFEKiRhoWbuFiCewQkH8_HXQfmgSf7vgDUD6P60DYX60D3VwsTbytc4wOuxXy9wwOEzqqtHNju_FbzdbAWJch/s1600/impoint.blogspot.com-blue.png

-Style Orange

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXZ2ELL6Y3bbWG5DQunhP1domQUwFseC0S8aKhx6PoDfZMv9byBNQab9uQvY0-GdXABCBSsdJhEKMLSErcEuOOWLFkTP8MBMlBFgcT1w_PrML8maecjxpHyl27p0oo4vDRA1XUKvGzptIn/s1600/impoint.blogspot.com-orange.png

5. Lalu simpan gadget.

source script