Customized Flat UI Labels Cloud widget for Blogger

Blogger default labels cloud widget is simple and not so much attractive. Consider that your website has stylish and beautiful look but labels cloud widget is simple, so its a bad impression on your readers/visitors. But don't worry, you can customize blogger simple labels cloud widget to a stylish one using simple techniques. So, today in this articles we are going to learn that how you can customize Blogger default labels cloud widget to a Flat UI Style Labels Cloud widget. Ok, let's come to the point :
Recommended For You:
Customized Colorful Flat UI Labels cloud widget for Blogger
Customize Labels Cloud Widget in Blogger

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: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 a {background:#2aa4cf;border-bottom:3px solid #000000;}
.sidebar .label-size a:hover {background:#000000;border-bottom:3px solid #2aa4cf;}

Customization:

• To change label color replace 2aa4cf with your HTML Color code
• To change bottom border color replace 000000 with your HTML Color code
• To change label color on hover replace 000000 with your HTML Color code
• To change border color on hover replace 2aa4cf with your HTML Color code

Note : You can use our HTML Color Code Generator for HTML Color codes
Step 6. Hit the Save Template button
And you're done !

Share This:

Tags:

Blog Design Blogging Tips

• Prevoius
• Next