Flat 3D Colorful Cloud Labels Widget For Blogger Prajjwal Rajput Friday, July 18, 2014 2 Comments

After a day I'm back again with the amazing and beautiful widget for your blogger blog. Just Yesterday We had shared an amazing and useful bu important widget with your for your blogger blog and I was shared Related Posts widgets for blogger blog this widget are very important for every blogger because this widget give the suggestion to your visitors that if have the read the full completes posts by your visitors then your visitor seen this widget and this widget show maximum 8 posts in it and your visitor click the anyone post then your visitor stated to read your related posts or second post so this is our previous post. But today I'm going to share a beautiful widget that which you to make your blogger blog more beautiful and more attractive this Flat 3D colorful cloud labels widget for blogger. The competition of improving the appearance of blog like professional and awesome design templates and is always best way to get more advertiser to your blog and get approval its ads. There are several  premium and responsive blogger templates on the whole internet world which we can use but it might not have unique because every one can use these templates. The best condition to make your blogger template unique just you can design or customize the blogger add in it the unique features just like Next Blogger Tricks then you're template look like professional premium templates. If you're expert in web designing then you can easily bring professionalism to your blogger widgets but if not then there are also already made beautiful and awesome widgets for you only on Next Blogger Tricks. Today in this tutorial we'e going to your blogs which will beautiful for your blogger template. Today I've customized my labels widget with the help of CSS in colorful cloud you can look at my blog sidebar.

Flat 3D Colorful Cloud Labels

The Flat 3D colorful cloud look like the Metro style design. Yesterday when I came to update the Next Blogger Tricks. I want to make changes in it's sidebar and more. and it's widgets like labels In yesterday my labels has not attractive and not awesome and beautiful when I can read the CSS topics from most popular site W3schools.org then I will got idea to place this code in right place in Next Blogger Tricks just look at sidebar of next blogger tricks in bottom. you will shown an awesome Flat 3D colorful cloud labels which make next blogger tricks more attractive.

How This Made?

This Flat 3D colorful Cloud Labels was build with the help of CSS language you can study in so many programming and web designing languages such as C, C++, JavaScript, Net Beans IDE, CSS and etc.This widget having multiple pure CSS colors with hover effect function. One more best thing this colorful cloud labels were not affected in your blogger blog loading speed it not increase nor decrease. every blogger want to their blog are more unique better than others and more attractive which means this widget is User eye friendly this widget also increase your blogger blog popularity every visitors after seen this widget they say "Hummn Nice Customization" When your visitor their mouse over this labels then these labels are automatically color changes like animations. This widget customized using Pure CSS3 not a JavaScript which it'll not affected to your blogger loading speed. So let's start the tutorial on how to add this flat 3D  colorful cloud labels widget in blogger blogs.

How To Add Flat 3D Colorful Labels Widget In Blogger Blogs?

• Go To Blogger Dashboard>>Template>>Edit HTML
• Find the below code Using (Ctrl+F)

]]></b:skin>

• Then Paste the below code above the ]]></b:skin>

 /* Flat 3D Colorful Cloud Labels By Www.NextBloggerTricks.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:400;
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.
• Let's jump to next Part

Installing Cloud Widget In Blogger :-

• Go To Blogger Dashboard>>Layout>>Add Gadget
• Choose Labels Widget
• Make setting like below image.

• The Click on Save Buttons.
• That's All!
• CONGRATULATIONS! you're successfully add this Flat 3d Colorful Cloud Labels Widget In Blogger Blogs.

Last Words

So friend's this is our little tutorial and I will back again with amazing and useful tutorial for your blogger blog if you're facing problems or getting error during this process so leave comments for solutions and don't forget to like our Facebook page and also share this tutorial with your friends on social networking sites.

Happy Blogging!

Tweet

Tags: Blogger Widget / Blogging Tips