Customized Colorful Stylist Flat UI Labels Cloud Widget For Blogger

Increasing the looks of blog like making awesomeness and professionalism to blog templates and themes is usually best. As a result of there ar many reasons for this like getting approval from massive advertising companies like Google Adsense and BuySellAds. There are several professional 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, Social Sharing, Related Posts etc. If you are enough sensible in Web Designing with then you'll simply bring professionalism to your widgets however if not then there are already created awing widgets for you on the net. Today, during this post, we're attending to do a work with our blogs which can beautify our blog template a little bit. I've customized label cloud widget for blogger and below I am going to share it with all.

Colorful Stylist Flat UI Labels Cloud Widget:

These days Flat UI and Metro styles ar largely trending in web designing. Today, once I came to update TechCarePoint and was concerning puzzling over the subject. I believed why not these days I do some customization with Blogger widgets and share it here. Then simply started selecting the widget for personalisation and that i came to grasp that labels cloud widget has been recent betting on all blogs thus I started doing one thing unaccustomed it. And created this colourful Flat UI label cloud widget .

So, this can be colourful Flat UI label cloud widget during which tags or labels ar having multiple colours. that is why we've place "Colorful" word in its name. After this, It's look is impressed from Flat UI styles that is generally famed recently. 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 begin the tutorial on however will we have a tendency to implement this colourful 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 www.TechCarePoint.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.

Final Words:

Readers So that was the colorful Flat UI label cloud widget. I hope this will help you to improve the style and design of your blog as it seems awesome in the design. If you're facing any problem in implementing this widget then feel free to ask in the comments. We're also creating some other widgets in our Lab so keep in touch with us to enjoy new and latest upcoming widgets. Don't forget to share your views and also share it with your friends. Take care!