Cara Membuat Kotak Search Box Cantik di Blog

Cara Membuat Kotak Search Box Cantik di Blog - Menambahkan beberapa kode script dalam dapat membuat tampilan blog Anda lebih menarik dan ada pula yang malah membuat blog jadi berat. Kali ini saya akan membagika bagaimana cara membuat kotak search box cantik, pasti semua blogger ingin blognya tampil cantik kan ? Maka dari itu disini saya akan membagikan untuk Anda semua pengguna blogger. Contoh gambar dapat Anda lihat pada gambar di atas.
Okeh, langsung saja pada materi cara membuat kotak search box cantik di blog.

1. Login ke blogger.com
2. Pilih Menu Tata Letak > Tambah Gadget > Pilih HTML/JavaScript.
3. Copy dan pastekan kode berikut pada kolom HTML/JavaScript.

<style type="text/css">#mediablogger-searchbox {    border-radius: 5px;    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrkzrPnMG85yWhsB7LGMDGQOjXhbbGQ1pznqp3urvvFLXw_-wK7_HyXd9d_aQggDRYyLnd5TMrM_oiLCjNCri7AFQOdKFaCh2erETL5_akurGSFTTF3tFAVjL2gNptE33BsFynlMnWkpm7/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>

4. Klik Save.


NB ::

Teks yang berwarna hijau adalah style kotak search. Untuk Anda yang ingin warna yang lain, silahkan ganti kode yang berwarna hijau dengan yang ada di bawah ini :

1. Untuk Style warna Biru

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMR8lQGEUZdJ2nRtkyHF82SjeNRPDU-T8RhagL-twTVWY8OFvEUbgmBIvkkKQ_wzs1hkS2kzw4WMUjDxkAtJnn-j77qU_1bY8EUkL00F6Jbc3S4ZzL4C48X6APRlEdmRo2aJHhMvN0nBeP/s1600/impoint.blogspot.com-blue.png

2. Untuk Style warna Merah

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2VZ4AEy8RpNXQXr2PpifnmTJAw97iHeqKMsB4HtNHBjurCWDhqI88X4G2VWgqMufClsJHw170_J7LrHGysu080ZEvQq9RIK3sP6Sn15lcTq6Urx-XGHNhiFqAWNQUS13rirvwO9FGwXDH/s1600/impoint.blogspot.com-red.png

3. Untuk Style warna Orange

http://2.bp.blogspot.com/qwEuTidco9E/UQr5bisH4yI/AAAAAAAAAWU/ZpAUuwXOvYE/s1600/impoint.blogspot.com-orange.png

Maaf, saya hanya bisa membagikan 4 warna :)

Demikian tutorial blog yang bisa saya bagikan. Jika ada kesalahan dalam bentuk apapun, saya mohon maaf yang sebesar-besarnya.
Terima kasih.