Catatan ZoeL

Membuat label cloud tampil warna-warni

https://zoelf.blogspot.com/2010/08/membuat-label-cloud-tampil-warna-warni.html

Membuat label cloud dengan penuh warna-warni mungkin akan terlihat indah ya, walaupun mungkin sebagian orang ada yang tidak menyukainya. Label cloud sudah tahu kan sobat?? yup, "cloud" merupakan label yang tersusun seperti "awan". Label cloud tersusun dengan berbagai ukurannya, ada yang besar, sedang, dan kecil. Nah kalau untuk membuat label menjadi berwarna-warni sobat cukup memberi kode sedikit CSS.

Ayo ikutin terus zoel ya..
1. Login blogger
2. Sobat pastinya sudah bisa merubah tampilan labelnya, ke bentuk "cloud" (oke caranya tinggal masuk design-page elements-klik edit pada gadget label-pada display pilih "cloud") udah oke kan? Lanjut..




3. Design - edit html - masukkan kode di bawah ini di atas kode ]]></b:skin>
.label-size-1 a {font-size: 12px;text-decoration: none;color:#B45F04}
.label-size-2 a {font-size: 14px;text-decoration: none;color:#cd9f01;}
.label-size-3 a {font-size: 15px;font-family: Arial, Tahoma, Verdana;text-decoration: none;color:#4B088A}
.label-size-4 a {font-size: 18px;font-weight:bold;text-decoration: none;color:#ea5a04;}
.label-size-5 a {font-size: 24px;text-decoration: none;color:#04B4AE}
.label-size-1 a:hover,.label-size-2 a:hover,.label-size-3 a:hover,.label-size-4 a:hover,.label-size-5 a:hover { text-decoration:underline }
Keterangan kode :
- label-size-1 sampai dengan 5= merupakan label yang berurut dari label yang terkecil (label-size-1) sampai terbesar (label-size-5)

- angka yang zoel beri warna biru itu adalah nilai yang dipakai untuk besar kecilnya label. ( sesuaikan dari yang terkecil sampai terbesar)

- pada kode yang zoel beri tanda dgn warna hijau itu merupakan kode warna yang nantinya sobat gunakan untuk memberi warna pada tiap label tersebut (jika ingin dapatkan kode warna lebih banyak lagi klik disini)

4. save template.

Ucapkan hamdalah jika sobat berhasil merubahnya..

Happy blogging..
tutorial sederhana
Copyright © 2014 Catatan ZoeL Design by SHUKAKU4RT - All Rights Reserved