Membuat & Modifikasi Search box/Kotak Pencarian Blog

Artikel kali ini tentang Membuat Search box/kotak pencarian di blog dan modifikasi search box. khususnya yang belum tau cara memasang search box di blog dan untuk para master blog jika ada kesalahan dalam artikel ini tolong di benahi...
Note :
Sebelum Megedit template alangkah baiknya kita cadangkan (Backup) dulu Template  takut terjadi kesalahan dan sesudah edit template jangan di simpan dulu klik preview pastikan tidak ada kesalahan dalam mengedit template kemudian simpan.

Membuat & Modifikasi Search box/Kotak Pencarian Blog 

• Login blogger.com--->>klik menu design----->>klik tempalate------>>klik edit HTML----->>Centang Expand Template. Kemudian cari kode </head> untuk mempermudah pencarian tekan C+F di keyboard anda, jika sudah menemukan kode</head> masukkan kode CSS dibawah ini tepat diatas kode </head>
•  (1)
<style type='text/css'> .searchform{background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444)); background: -moz-linear-gradient(top, #000, #444); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000FF', endColorstr='#666666'); border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; -webkit-box-shadow:0px 1px 0px #000; border:1px #fff solid; display:inline-block; zoom:1; *display:inline; border:solid 1px #555; padding:3px 5px; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; -webkit-box-shadow:0 1px 0px rgba(0,0,0,.1); -moz-box-shadow:0 1px 0px rgba(0,0,0,.1); box-shadow:0 1px 0px rgba(0,0,0,.1)} .searchform input{font:normal 12px Arial,Helvetica,sans-serif} .searchfield{background:-webkit-gradient(linear,left top,left bottom,from(#243d63),to(#1a2638)); padding:6px 6px 6px 8px; width:150px; border:solid 1px #222; outline:none; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; -moz-box-shadow:inset 0 1px 3px #222; -webkit-box-shadow:inset 0 1px 3px #222; box-shadow:inset 0 1px 3px #222} .searchbutton{color:#fff; cursor: pointer; border:solid 1px #fff; font-size:11px; height:28px; width:55px; text-shadow:0 1px 1px #222; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f)); background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444)); background: -moz-linear-gradient(top, #000, #444); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000FF', endColorstr='#666666'); } </style>
Klik Simpan...

• Kemudian Klik Tata Letak(Page Elements)----->>Klik Tambah Gadget----->>Klik HTML/Javascript kemudian masukkan kode di bawah ini
• (2)
<form class="searchform"  method="get" action="http://andihangdihi.blogspot.com/search" > <input class="searchfield" type="text" value="Search..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" name="q" /> <input class="searchbutton" type="button" value="Search" /> </form>
• Ganti tulisan yang berwarna biru dengan alamat blog anda kemudian klik simpan Lihat hasilnya...
• Modifikasi Search Box~Jika tombol search tidak berfungsi download kodenya Disini Jika sudah di download ganti kode no 2 dengan kode yang anda telah download...

Semoga Bermanfaat...

• Tweet
• Share
• Share
• Share
• Share