Don't Miss

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 !

2 comments to ''Customized Flat UI Labels Cloud widget for Blogger"

ADD COMMENT
  1. the feasible errors when installing Tutu Helper itutuhelper.com This is all you have to do to access some remarkable.

    ReplyDelete
  2. To enhance the performance from the students you need to take into consideration some latent factors like a classroom design on https://www.slideshare.net/edubirdie/edubirdie, how big booklets that you simply hands to students throughout the assignments, etc. Detailed specs are available on this web site along with further recommendations.

    ReplyDelete