Cara Membuat Label Cloud Keren Dengan Efek CSS3

Label Cloud Keren yang dimaksud bisa sobat lihat pada gambar dibawah ini.

Cara membuatnya gampang, ikuti saja langkah-langkah dibawah ini:
Pertama, tambahkan widget label diblogmu.
- Tata Letak + Tambah Gadget + Label (lihat gambar)

Kedua, Edit Template
- Template - Edit HTML
Cari kode ]]></b:skin> (gunakan ctrl+F untuk pencarian cepat)
Lalu copas kode dibawah ini tepat diatas kode ]]></b:skin>
Pilihan Pertama

/* MBL Custom Label Cloud With CSS3  */
.Label a{padding-left:20px;background:#000;padding:0 20px;
color:#fff!important;border-radius:100px;
-moz-border-radius:100px;height:32px;
line-height:32px;text-transform:uppercase;
text-decoration:none;border:none !important;
-webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px;
float:left;margin-left:5px;margin-top:5px;font-size:14px; }
.Label a:hover{color:#000 !important;background:#ff0; }

Pilihan Kedua

/* Custom Label Cloud */
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {font-size:100%;filter:alpha(100);opacity:10}
.cloud-label-widget-content{text-align:left}
.label-size {background:#E73037;display:block;float:left;margin:0 3px 3px 0;color:#ffffff;font-size:11px;text-transform:uppercase;}
.label-size a,.label-size span{display:inline-block;color:#ffffff !important;padding:6px 8px;font-weight:bold;}
.label-size:hover {background:#333333;}
.label-count {white-space:nowrap;padding-right:3px;margin-left:-3px;background:#333333;color:#fff !important;}
.label-size {line-height:1.2}

Terakhir Simpan Template, Selesai.