Colorful Stylish Flat UI Label Cloud CSS Widget For Blogger

Hello Everyone! Today iam going to Show you How to Add Amazing Stylish Flat UI Label Widget To Blogger. This Widget Replaces the Default Label Widget on Blogger With Some Easy Few Step Guide. You can see the Preview Image of this Stylish Label Widget Below:

Now Lets Start..

1. Goto Blogger Dashboard.

2. Then Goto Layout on the Blogger's Left Pane.

3. Then Click on Add a widget and Select Label on the Options Provided there.

4.  Now on Configure Label Choose Display to "Cloud from list"

5. Then Save it.

6. Now goto Templates--> Edit HTML

7. Now find ]]></b:skin>  

8. Copy the Below Piece of Code Just Above ]]></b:skin>  

.sidebar .label-size {
position:relative;
text-transform: uppercase;
text-decoration:none;
font-size:13px;
font-family:Open Sans;
color:#fff!important;
}
.sidebar .label-size a {
color:#fff!important;
font-weight:bold;
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}

9. Now Save the Template That's All.


If you have any Doubts Please Contact Us: contact@gobloggertricks.com or Comment Below.