Friday, March 1, 2013

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(http://1.bp.blogspot.com/-17dWPUuCMEE/UQr5WvW2inI/AAAAAAAAAWM/xWAzhlw4ez0/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
http://1.bp.blogspot.com/-yWZnkjCe4tY/UQr5OeN8MXI/AAAAAAAAAWE/-EFf5XtroXU/s1600/impoint.blogspot.com-blue.png
2. Untuk Style warna Merah
http://2.bp.blogspot.com/-kyV43LzLedQ/UQr5gVVxaEI/AAAAAAAAAWc/Q-2_hR17RgU/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.


7 comments:

  1. Cantik, banyak pilihan warna.
    Terimakasih sharingx.

    ReplyDelete
  2. keren nih ada tampilan baru.. :D

    come back..

    ReplyDelete
  3. ijin coba dlu ya kk biar blog ane tambah cantik

    ReplyDelete
  4. Sangat bermanfaat gan, di tunggu kunbal sama follbecknya !!
    http://candraadi99.blogspot.com/

    always on :)

    ReplyDelete
  5. Bisa dicoba nih ^^, nice info gan ..

    ReplyDelete