√ Modifikasi Widget Label Cloud Flat UI di Blog

Modifikasi Widget Label Cloud Flat UI di Blog

6/22/2017

Sobat blogger, salah satu nilai tambah untuk blog kita adalah dengan tampilan blog yang elegan dan full color. Nah salah satu poin plus tersebut adalah dengan memasang widget label cloud blogger yang warna-warni. oleh karena itu, berikut ini saya akan share untuk Anda cara Modifikasi Widget Label Cloud Flat UI di Blog

Modifikasi Widget Label Cloud Flat UI di Blog

Sebelum memasang kode yang akan saya bagikan, ada baiknya setelan widget label diganti seperti gambar di bawah ini

Salin CSS di bawah ini, kemudian paste diatas </style> atau </b:skin>

/* Flat UI Label Cloud */
.cloud-label-widget-content{text-align:left}.label-size{background:#5498C9;display:block;float:left;margin:0 3px 3px 0;color:#fff;font-family:Oswald,Arial,Sans-Serif;font-size:11px;text-transform:uppercase}.label-size:nth-child(1){background:#F53477}.label-size:nth-child(2){background:#89C237}.label-size:nth-child(3){background:#44CCF2}.label-size:nth-child(4){background:#01ACE2}.label-size:nth-child(5){background:#94368E}.label-size:nth-child(6){background:#A51A5D}.label-size:nth-child(7){background:#555}.label-size:nth-child(8){background:#f2a261}.label-size:nth-child(9){background:#00ff80}.label-size:nth-child(10){background:#b8870b}.label-size:nth-child(11){background:#9c3}.label-size:nth-child(12){background:#ff0}.label-size:nth-child(13){background:#40dece}.label-size:nth-child(14){background:#ff6347}.label-size:nth-child(15){background:#f0e68d}.label-size:nth-child(16){background:#7fffd2}.label-size:nth-child(17){background:#7a68ed}.label-size:nth-child(18){background:#ff1491}.label-size:nth-child(19){background:#698c23}.label-size:nth-child(20){background:#0f0}.label-size a,.label-size span{display:inline-block;color:#fff !important;padding:4px 10px;font-weight:bold}.label-size:hover{background:#222}.label-count{white-space:nowrap;padding-right:3px;margin-left:-3px;background:#333;color:#fff }.label-size:hover .label-count,.label-size:focus+.label-count{background-color:#ff6bb5}

Simpan template dan lihat hasilnya.

Demikian tutorial Modifikasi Widget Label Cloud Flat UI di Blog