Don't Miss

Customized Flat UI Labels cloud widget for Blogger

By Zohaib Liaqat - 3 Comments
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.

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
Step 4. Search ( Ctrl +F ) for the following tag :

]]></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.

3 comments to ''Customized Flat UI Labels cloud widget for Blogger"

ADD COMMENT
  1. This comment has been removed by the author.

    ReplyDelete
  2. Thanks 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.
    ucbrowser.vip
    shareit.onl
    mxplayer.pro

    ReplyDelete
  3. 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