Blogger default Labels cloud widget is simple, not so much attractive and users are getting bored with ugly and unclean labels cloud widget. Consider that your website has clean, stylish and beautiful look but labels cloud widget is simple and unclean, so its a bad impression on your readers/visitors. Default blogger labels cloud widget is not so much attractive, so today we are going to share a simple technique for customizing blogger labels cloud widget. Here's a colorful Flat UI labels cloud widget for your blog. Let's learn how to customize labels cloud widget.
Step 4. Search ( Ctrl +F ) for the following tag :
Step 5. Now copy the below code and paste it just above/before it ( ]]></b:skin> ).
Step 6. Hit the Save template Button
Congratulations : You've successfully customized your Labels Cloud widget.
How to Customize Labels Cloud widget
Step 1. Add the Default Blogger Label Cloud widget and Configure it like the image below :
Step 2. Hit the Save Button
Step 3. Go to Template and click on Edit HTML Button]]></b:skin>
Step 5. Now copy the below code and paste it just above/before it ( ]]></b:skin> ).
.sidebar .label-size {
position:relative;
text-transform: uppercase;
text-decoration:none;
font-size:12px;
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:3px solid #127F69;}
.sidebar .label-size-1 a:hover {background:#127F69;border:3px solid #1abc9c;}
.sidebar .label-size-2 a {background:#3498db;border:3px solid #226693;}
.sidebar .label-size-2 a:hover {background:#226693;border:3px solid #3498db;}
.sidebar .label-size-3 a {background:#2ecc71;border:3px solid #1F8C4C;}
.sidebar .label-size-3 a:hover {background:#1F8C4C;border:3px solid #2ecc71;}
.sidebar .label-size-4 a {background:#9b59b6;border:3px solid #74398E;}
.sidebar .label-size-4 a:hover {background:#74398E;border:3px solid #9b59b6;}
.sidebar .label-size-5 a {background:#e74c3c;border:3px solid #922C20;}
.sidebar .label-size-5 a:hover {background:#922C20;border:3px solid #e74c3c;}
Step 6. Hit the Save template Button
Congratulations : You've successfully customized your Labels Cloud widget.
This comment has been removed by the author.
ReplyDeleteThanks for sharing.I found a lot of interesting information here. A really good post, very thankful and hopeful that you will write many more posts like this one.
ReplyDeleteucbrowser.vip
shareit.onl
mxplayer.pro
We offer a wide range of Custom Essay Writing Service that seeks to provide a solution to all our clientele writing needs. Our writers have up doctorates credentials to give that assurance to our clientele of receiving high caliber Custom Essay Service to realize their aspirations of admirable grades affordably.
ReplyDelete