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 komentar:

Amatullah Syukur said...

Cantik, banyak pilihan warna.
Terimakasih sharingx.

Riev - Bapo said...

sama-sama :)

Admin Z-T Blog said...

keren nih ada tampilan baru.. :D

come back..

Wahyu basofii said...

makasih tutornya mas. . :)

Bondowoso Community said...

ijin coba dlu ya kk biar blog ane tambah cantik

Candra Adi said...

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

always on :)

Fahmi said...

Bisa dicoba nih ^^, nice info gan ..

Post a Comment

◄ Posting Baru Posting Lama ►
 

Site Info

DMCA.com ping fast  my blog, website, or RSS feed for Free
Blog Kang Ismet
W3 Directory - the World Wide Web Directory