all category

Menganti Tampilan Gadget Form Search

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

02


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


03


atau seperti ini.


04

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 elemenAdd a Gadget ,
Tambahkan sebuah gadget/elemen search.




01


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.




Artikel Lainnya