Menganti Tampilan Gadget Form Search

Secara default gadget/elemen  kota search dari blogger in draf , tampilanya seperti ilustrsi  ini.

sekarang bagaimana untuk menganti  kotak searchnya dengan tampilan yang kita inginkan misalnya seperti ini.

atau seperti ini.

untuk membuatnya ikutilah langkah-langkah berikut ini.

pertama :

Buka situsnya blogger in draf di sini, kemudian login dengan cara menekan link tulisan  “ Blogger in draft “. ( jika anda membuat halaman Blogger in draf dalam dasboard secara default, tidak perlu mengikuti langkah ini, langsung saja login ).

kedua :

Dalam tab Page elemen – Add a Gadget , Tambahkan sebuah gadget/elemen search.

Ketiga :

Buka tab Edit Html dan tulis skrip berikut ini dalam halaman css-nya. – atau simpan sebelum tulisan ini. ]]></b:skin>

#CustomSearch1_form {
display: block;    background:url(url gambar )  no-repeat 0px 0px;
height: 32px;
width: 160px;
padding-top: 6px;
margin-left:0px;
}

url gambar: alamat gambar yg ente miliki , nilai height dan width tergantung atau harus di sesuaikan dengan ukuran  lebar dan tingginya gambar yang anda gunakan.

#CustomSearch1_form input {
color: #000; background: transparent;
padding-top: 5px;
border-style: none;
}

skrip ini untuk menghilangkan warna background dari form input kotak search-nya.

.gsc-search-button {display:none;}

skrip untuk menyembunyikan tombol searchnya.

.gsc-branding {display:none;}

Skrip untuk menghilankan logo googlenya.

Perhatian.

Ini merupakan pengalaman saya, dan mungkin dalam beberapa template tidak berjalan atau di butuhkan  modifikasi scriptnya lagi.

Untuk melihat demonya bisa di lihat pada blog ini.

Page views this post: reader