Colorful Customized Flat UI Cloud Widget For Blogger

Improving of blog bringing awesomeness and professionalism to blog and themes and templates is always good. There are several reasons like getting approval of Google Adsense, BuySellAds and also getting approval from big advertising companies. There are several professional templates available on internet which can be use but might not have uniqueness because they are made for the public users. After theme or template it also have some important widgets such like labels, popular post widget, social sharing and related posts etc. If you are enough smart in web designing then you can easily bring in professionalism if you are not them don't worry there are awesome ready made widgets available on internet by which you can make your blog professional. Today in post we are going to do trick which helps to beautify our blog theme a little bit. I have customize my blogger labels widget and below i m going to share it with all.

Colorful Flat UI Labels Cloud Widget

Now a days Flat UI or metro designs are most trending in web designing. Today when i came to my blog and i was thinking about topic. I thought why not today we play with some blogger widgets and share it here. Then started choosing for customization and came to know that labels widget have old looking on all blogs so i started something new to it so i made this Colorful Flat UI Label Cloud Widget.

This is the Colorful Flat UI Cloud Widget in which colors or tag having different multiple colors. That's why we add "Color" word its name. After this it look is inspired from Flat UI colors. Another specialty is that when someone hovers the mouse cursor on label it gives a beautiful effect on hover. This widget is customized using CSS3 and have no JavaScript or any other language program which means it has no effect on loading of blog speed. You can also have live demo on right side of this blog. We are using it here, so lets started the tutorial on have you can implement this Colorful Flat UI Label widget for blogger.

How To Colorful Customized Flat UI Cloud Widget For Blogger

• Login to blogger dashboard.
• Goto layout and click on Add a Gadget.
• Choose Labels widget.

• Click on save button

Now the widget has been added to the blog.

• Now goto template.
• Click on Edit Html.
• Search the below code.

]]></b:skin>

• Copy the below code and the paste above/before ]]></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-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}

• Now save your template.
• Congrats! you have successfully customized colorful Flat UI label cloud widget in your blog.

Final Words

Guys so that was a colorful Flat UI cloud widget i have shared in this post. I hope this will help to improve the design of the blog, it looks good in the design. If you are facing any problem adding this code fee free to ask in comment. Stay connected with us for latest and upcoming widgets. Don\'t forget to share your views and conjointly share with friends.