Memasang Kolom Search/Pencarian Yang Bisa Dimodifikasi ~ RezDown7

Home » Blogspot » Tutorial » » Memasang Kolom Search/Pencarian Yang Bisa Dimodifikasi

Memasang Kolom Search/Pencarian Yang Bisa Dimodifikasi

Senin, 07 Maret 2011 - 9:15 AM | 48 Comments | Rezkiji | Edit Entri

Cara Membuat Kolom Search/Pencarian Yang Bisa Di Modifikasi Sendiri Sesuai Keinginann Kita Agar Terlihat Lebih Cantik Dan Menarik.

Haiii Sobat Blogger,,Apa Kabar nih...??
Oy singkat saja di pagi hari yg lumayan cerah ini saya akan membagikan cara membuat Kolom search/pencarian dan memasangnya di blog kita,,yang berguna pada saat pegunjung atau kita ingin mencari sebuah artikel/postingan.

Contoh:

Download movie,single/album mp3,software full version,artikel,tutorial,blogspot,blogger,news atau berita indonesia

Cara Membuatnya Yaitu :

1. Masuk dulu ke akun blogger anda
2. Setelah berada di Dashboard Klik Design --> Edit HTML

3. Backup Dulu Template anda dengan mengKlik Download Full Template
(Terserah anda Ya atau Tidak.tapi lebih baik Ya)
3. Centang Expand Template Widget

4. Cari Kode ]]></b:skin>

5. Copy kode di bawah lalu paste di atas kode ]]></b:skin>

#search {
width: 280px;
font-size: 11px;
float: right;
margin: 0;
padding: 6px 0 0;

}

#searchform {
margin: 0;
padding: 0;
overflow: hidden;
display: inline;
align: right;
}
#searchbox {
background: #ffffff;
width: 220px;
higth:50;
color: #000;
margin: 0;
padding: 4px 0 3px 5px;
border: 1px solid #000000;
display: inline;
font: normal 12px Georgia, Times New Roman, Trebuchet MS;
}
#searchbutton {
background: #ffffff !important;
color: #000;
margin: 0 0 0 5px;
padding: 3px 3px 2px;
border: 1px solid #000000;
font: bold 11px Georgia, Times New Roman, Trebuchet MS;
}

Keterangan :
Merah untuk warna latar belakang kolom search
Kuning untuk garis tepi kolom search ( 1px=Ketebalan garis, #000000=Warna)
Hijau untuk warna latar belakang tombol search
Biru untuk warna garis tepi tombol search ( 1px=Ketebalan garis , #000000=Warna)
Banyak lagi yg bisa di rubah,,namun saya hanya memberikan untuk pengeditan warna saja.

6. Jika Telah Selesai Yang Di Atas Save Template
7. Sekarang kita menambahkan sidebar baru
8. Caranya,, jika nada berada di Dashboard pilih Desaign dan anda akan diantar ke halaman Edit Layout Tepatnya Page Elements.
9. Pilih Add a Gadget --> HTML/JavaScript
10. Masukkan/Copy Kode Di Bawah Ini :

<form action='/search/' id='searchform' method='get' style='display:inline;'><input id='searchbox' maxlength='255' name='q' onblur='if (this.value == "") {this.value = "Search...";}' onfocus='if (this.value == "Search...") {this.value = ""}' type='text' value='Search...'/>
<input id='searchbutton' type='submit' value='GO'/>
</form>

Keterangan :
Merah,, akan tampil di kolom search (bisa di ganti denga kata2 anda sendiri)
Hijau,, Tulisan untuk Tombol Search (bisa di ganti dengan kata2 anda sendiri)

11. Save Dan Lihat Hasilnya

Sekian Dulu Dari Saya
Lebih dan Kurangnya Tolong Di Maafkan,hehe Jika Terdapat Kesalahan Silahkan Di Laporkan
Terima Kasih.