0
Add a Stylish Cool Effects for Blogger Label.Here i will explain you gow to add Labels and How to Customize it with Stylish Effects.Just Follow my steps carefully Then it will be easy For You!

Step1: Go to Blogger Dashboard and Then Layout--> Add a Gadget--> Label (If you don't Undertsand this Please See the Image Below.



Step2: Now a Pop-up Will open Will Label Options. Then Now to Add a Stylish Label Change the Display Option from List to Cloud.



Step3: Now go to Template Which is on the Left Pane of Dashboard. Then Click on Edit HTML

Step4:  Now Search for the following code by Pressing Ctrl+F.

]]></b:skin>


Step5: Now Place the Below Code Just Above
]]></b:skin>


/* Colorful Label Widget By www.wwesnaps.blogspot.Com —————- */

.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}

You can Also Customize the Color of the Widget by Changing the Color Codes.

 Now its All over Reload you blog and Enjoy this Awesome Widget. :) Cheers..!!

Post a Comment