Kali ini saya ingin ber bagi trik tentang Cara Mengganti Label Dengan Background Bergambar agar tampilan blog kita lebih keren. Anda dapat mengganti sendiri background label dengan gambar atau animasi kesukaanmu sendiri. Disini saya hanya memberikan sedikit contoh gambar saja.
Langsung saja simak bagaimana caranya :
1. Lakukan pengeditan pada salah satu widget yang ingin diubah, dengan mengklik tulisan edit. Misalnya pada widget “Labels”.
2. Hasilnya akan menampilkan halaman popup. Lalu lihat ID dari widget yang anda gunakan.
Seperti yang terlihat pada gambar diatas, Widget Label yang saya gunakan memiliki ID “Label1”. ID ini akan kita gunakan untuk melakukan editing CSS pada template blog.
3. Langkah berikutnya adalah masuk ke menu Design > Edit HTML. Backup template anda terlebih dahulu. Karena dalam pengeditan membutuhkan kejelian dalam membaca kode. Jika salah pengeditan bisa dikembalikan lagi.
4. Tambahkan kode dibawah ini sebelum tag ]]></b:skin> :
#Label1 h2 {Keterangan :
background: url(http://idblogportal.googlecode.com/files/header%20widget%20purple.jpg);
border: 0px solid #ccc; padding: 0px;
font: 12px/1.4em Arial, sans-serif;width:100%;margin-bottom:10px;border-top:1px solid #ccc;border-left:0px solid #ccc;border-bottom:1px solid #ccc;border-right:0px solid #ccc;}
#Label1 : diambil dari nama widget ID yang anda gunakan.
h2 : biasanya template menggunakan tag h2 untuk judul widget/gadget.
url : anda dapat mengganti URL gambar sesuai keinginan anda.
Background 1 =
Kode URL-nya = http://i1128.photobucket.com/albums/m486/syamsudin1/sidebar_1.gif
Background 2 =
Kode URL-nya = http://i1128.photobucket.com/albums/m486/syamsudin1/sidebar_2.gif
Background 3 =
Kode URL-nya = http://i1128.photobucket.com/albums/m486/syamsudin1/sidebar_3.gif
Background 4 =
Kode URL-nya = http://i1128.photobucket.com/albums/m486/syamsudin1/sidebar_4.gif
Background 5 =
Kode URL-nya = http://i1128.photobucket.com/albums/m486/syamsudin1/sidebar_5.gif
Background 6 =
Kode URL-nya = http://i560.photobucket.com/albums/ss44/erge32/EkaSidebar.gif
T I P S :
Background-background di atas dapat pula anda
terapkan sebagai background body blog anda,
seperti yang anda lihat pada blog ini.
5.
Simpan template anda, dan lihat hasilnya. Jika belum muncul, berarti
ada CSS lain yang mempengaruhi Style anda. Karena pembuat template
memiliki cara penulisan berbeda untuk templatenya.
Selamat Mencoba. Jika mengalami kendala, silahkan komentar di form komentar.
Author : coxelgokil | ACI BUDAYA
Anda telah membaca
artikel tentang : Cara Mengganti Label Dengan Background Bergambar. Oleh Admin, Anda diperbolehkan mengcopy-paste atau menyebarluaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya. Terimakasih...
