Nice Colorful Cloud Label Widget For Blogger

Just want to be straight to the point.
There are many styles of label cloud widget for blogger can be found on internet, if you are looking for colorful label cloud for your blog you can give it try these one.

To make the colorful cloud label like above, you only need to put some CSS codes.

• Go to your blogger template --- Click Edit HTML.
• Find ]]></b:skin>
• Copy the following codes and paste them right above ]]></b:skin>

.sidebar .label-size {
position:relative;
text-transform: none;
text-decoration:none;
font-family: Ubuntu, Arial;
margin-top: 10px;
line-height: 20px;
font-weight: 300;
font-size: 13px;
color:#fff!important; text--align:center;
}
.sidebar .label-size a {
color:#fff!important; border-radius:3px;
font-weight:bold;
padding:8px 8px;
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:0px solid #127F69;}
.sidebar .label-size-1 a:hover {background:#16a085;}
.sidebar .label-size-2 a {background:#3498db;border-bottom:0px solid #226693;}
.sidebar .label-size-2 a:hover {background:#2980b9;}
.sidebar .label-size-3 a {background:#2ecc71;border-bottom:0px solid #1F8C4C;}
.sidebar .label-size-3 a:hover {background:#27ae60}
.sidebar .label-size-4 a {background:#9b59b6;border-bottom:0px solid #74398E;}
.sidebar .label-size-4 a:hover {background:#8e44ad}
.sidebar .label-size-5 a {background:#e74c3c;border-bottom:0px solid #922C20;}
.sidebar .label-size-5 a:hover {background:#c0392b}

• Save temple and see how it looks like.
• Done.