Template dan Tips Seputar Blogger

Thursday, June 22, 2017

Modifikasi Widget Label Cloud Flat UI di Blog

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

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

Label Cloud Flat UI

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

Berikan tanggapan Anda
EmoticonEmoticon

Adblock Detected

Like this blog? Keep us running by whitelisting this blog in your ad blocker

This is how to whitelisting this blog in your ad blocker

Thank you

×