Cara Pasang Widget Label Cloud Blogger Keren

Cara Pasang Widget Label Cloud Blogger Keren 
sobat bloggers, salah satu nilai tambah untuk blog kita adalah dengan tampilan blog yang elegant dan full color...nah salah satu poin plus tersebut adalah dengan memasang widget label cloud blogger warna-warni. oleh kareana itu, berikut ini saya share untuk Anda cara pasang widget label cloud blogger keren dan warna-warni :)

Cara Pasang Widget Label Cloud Blogger Keren

• Masuk Dasboard Blogger
• Pilih Template
•  Kemudain Pilih Edit HTML
•  Anda copy kode CSS berikut dan letakkan diatas kode </b:skin> atau </style> (pilih salah satu).

<!-- css ui label color by Anaktimor17 Blog-->
.sidebar .label-size {
position:relative;
text-transform: uppercase;
text-decoration:none;
font-size:11px;
font-family:Oswald, Arial, Sans-Serif;
color:#fff!important;
}

.sidebar .label-size a {
color:#fff!important;
font-weight:300;
padding:8px 10px;
margin:0 6px 6px 0;
float:left;
display:block;
-moz-transition: all 0.4s ;
-o-transition: all 0.4s;
-webkit-transition: all 0.4s ;
-ms-transition: all 0.4s ;
transition: all 0.4s ;
}

.sidebar .label-size-1 a {background:#1abc9c;border-bottom:3px solid #127F69;}
.sidebar .label-size-1 a:hover {background:#16a085;}
.sidebar .label-size-2 a {background:#3498db;border-bottom:3px solid #226693;}
.sidebar .label-size-2 a:hover {background:#2980b9;}
.sidebar .label-size-3 a {background:#2ecc71;border-bottom:3px solid #1F8C4C;}
.sidebar .label-size-3 a:hover {background:#27ae60}
.sidebar .label-size-4 a {background:#9b59b6;border-bottom:3px solid #74398E;}
.sidebar .label-size-4 a:hover {background:#8e44ad}
.sidebar .label-size-5 a {background:#e74c3c;border-bottom:3px solid #922C20;}
.sidebar .label-size-5 a:hover {background:#c0392b}

• css di atas hanya untuk blog yang memiliki sedikit label, jika label dalam blog Anda sangat banyak silahkan Anda gunakan css berikut ini :

<!-- css ui label color by Anaktimor17 Blog -->
.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: #99cc33;}
.label-size:nth-child(12) {background: #ffff00;}
.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: #00ff00;}
.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;
}

• Silahkan save template Anda :)

Cara Setting Label Cloud Keren :

• Untuk pemasanganya di blog agan..silahkan ikuti gambar di bawah ini .

sekian artikel Cara Pasang Widget Label Cloud Blogger Keren , semoga bermamfaat :)