Colorfull Flat Label Widget

Improving the appearance of blog like bringing awesomeness and professionalism to blog templates and themes is always best. Because there are several reasons for this like getting approval from big advertising companies such as Google Adsense and BuySellAds. There are several templates on the internet which we can use but it might not have uniqueness because they're made for public and everyone can use that. After theme or template, it's also important to have professional widgets such as Labels or Tags widget, Popular Posts widget, Related Posts etc. If you're enough smart in web designing then you can easily bring professionalism to your widgets but if not then there are also already made awesome widgets for you on the internet. Today, in this post, we're going to do a tweak with our blogs which will beautify our blog theme a little bit. Just today, I've customized label cloud widget for blogger and below I'm going to share it with all.

Colorful Flat UI Labels Cloud Widget

These days Flat UI and Metro designs are mostly trending in web designing. Today, when I came to update Tools Valley and was about thinking about the topic. I thought why not today I do some customization with Blogger widgets and share it here. Then just started choosing the widget for customization and I came to know that labels cloud widget has been old looking on all blogs so I started doing something new to it. And made this colorful Flat UI label cloud widget. 

So, This is colorful Flat UI label cloud widget in which tags or labels are having multiple colors. That's why we've put "Colorful" word in its name. After this, It's look is inspired from Flat UI designs which is mostly famous these days. The colors which we've used in this widget are also Flat UI colors. Another specialty of this widget is that when someone hovers the mouse on any label it will give a beautiful effect on hover. This widget is customized using pure CSS3 and we've not used any JavaScript or any other heavy programming language which means that it will not affect on the loading speed of your blog. You can have its live demo by looking in the right sidebar of this blog. We're also using it here. So, let's start the tutorial on how can we implement this colorful Flat UI label cloud widget for Blogger.

Step 1. Adding Labels Cloud Widget

• Go To Blogger >> Layout >> Add a Gadget
• Choose "Labels" Widget.
• Make Settings Like The Below Image & "Save" It.

Now the widget has been added into the blog and let's customize the label cloud widget.

Step 2. Customizing Labels Cloud Widget

• Go To Blogger >> Template >> Backup Your Template
• Click Edit HTMl and Find For ]]></b:skin>
• Copy and Paste The Following Code Above ]]></b:skin>

/* Flat UI Labels Cloud By toolsvalley.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}

• Click "Save Template".
• Congratulations! You've successfully customized colorful Flat UI label cloud widget in your blog.