Bagi anda para blogger yang suka menghias blog, saya akan bagikan sebuah tutorial untuk membuat tampilan label di blog anda menjadi lebih menarik dan lebih elegan ketika dilihat, Pada tutroal ini, kita hanya akan menggunakan sedikit kode CSS untuk mengubah tampilan Label yang tadinya membosankan agar menjadi lebih menarik. Nah, bagi anda yang tertarik, silahkan ikuti langkah demi langkah yang saya berikan.
 |
| Penampakan Setelah di Modifikasi |
Modifikasi Widget Label Cloud di Blog dengan CSS
1. Pastikan anda sudah memasang Widget Label Cloud
2. Jika memang belum, silahkan ikuti langkah di bawah ini. Bagi yang sudah, langsung loncat ke langkah nomer 3
- Login Ke Blogger
- Pilih Tata Letak
- Lalu klik "Tambahkan Gadget"
- Kemudian pilih "Label"
- Atur sesui dengan keperluan, Jangan lupa, untuk bagian Tampilkan, Ceklist yg "Cloud"
- Lalu Simpan
3. Selanjutnya masuk ke bagian Edit Template, lalu pilih Edit HTML. nah, di atas kode "]]></b:skin>" itu sisipkan sedikit kode CSS , ini dia kodenya :
.label-size{font-size:13px; margin:0; float:left; text-decoration:none; padding:6px 8px; border:1px #FFF solid; background:#26C281; font-family:Arial}Keterangan :
.label-size-1, .label-size-2, .label-size-3, .label-size-4, .label-size-5, .label-size a{color:#FFF; text-decoration:none}
.label-size:hover{background:#4DAF7C}
#26C281 adalah kode untuk background labelnya
#4DAF7C adalah warna label ketika di sorot Mouse
4. Lalu simpan & Lihat hasilnya
Anda baru saja membaca artikel yang berkategori Tutorial Blogger
dengan judul "Modifikasi Widget Label Cloud di Blog dengan CSS". Anda bisa bookmark halaman ini dengan URL http://tc-trik.blogspot.com/2014/10/modifikasi-widget-label-cloud-di-blog.html.