Don't Miss

How to Customize Labels Cloud Widget in Blogger v3

By Zohaib Liaqat - 20 Comments
Are you fed up with the ugly design of default blogger Labels Cloud Widget? Do you want to make it more prominent and attention grabbing? Labels Cloud is a Widget provided by Blogger that allows you to categorize your content under specific labels. Labels widget makes your blog user-friendly by allowing your visitors to easily navigate to the content they are looking for by choosing the categories/labels.
Customize Labels Cloud Widget in Blogger v3
The default blogger Labels Cloud widget is simple and leaves a bad impression on your visitors that's why we've to customize it. Labels cloud widget can be easily customized using CSS. If you don't know that how to customize it? Don't worry, in this tutorial we'll show you that How to Turn that Ugly label design into a stylish and clean design. We've designed these labels by using CSS and Animated Gradient effect. Let's begin:

Recommended For You:
How to Customize Labels Cloud Widget in Blogger v1
How to Customize Labels Cloud Widget in Blogger v2
Customized Flat UI Labels Cloud widget for Blogger v1
Customized Flat UI Labels cloud widget for Blogger v2

How to Customize Labels Cloud Widget in Blogger

First and foremost, Log in to your Blogger Account >> Select a Blog >> Template and click Edit HTML. Click inside the template code area and by using Ctrl+F search for the ]]></b:skin> tag. Now choose a style from the below three styles, copy its code and paste it just above/before it (]]></b:skin> Tag)

Note: There is no difference in the coding of the below three styles. The only difference is their colors, we did this to show you that there is nothing technical if you want to match its color with your blog theme. You can change the color by changing the bolded text in the CSS code and use our Color Code Generator 1 and Color Code Generator 2 for HTML color codes.

Style# 1

How to Customize Labels Cloud Widget in Blogger
.label-size {
  position:relative;
  text-transform: uppercase;
  text-decoration:none;
  font-size:13px;
  font-family:Open Sans;
  color:#fff!important;
}

.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 ;
  background-image: linear-gradient(#EE4343, #E07C7C);
  background-size: auto 200%;
  background-position: 0 100%;
  transition: background-position 0.5s;border-bottom:3px solid #000000;
}

.label-size a:hover {
  background-position: 0 0;
}

Style# 2

How to Customize Labels Cloud Widget in Blogger
.label-size {
  position:relative;
  text-transform: uppercase;
  text-decoration:none;
  font-size:13px;
  font-family:Open Sans;
  color:#fff!important;
}

.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 ;
  background-image: linear-gradient(#00FF3B, #778C7C);
  background-size: auto 200%;
  background-position: 0 100%;
  transition: background-position 0.5s;border-bottom:3px solid #000000;
}

.label-size a:hover {
  background-position: 0 0;
}

Style# 3

How to Customize Labels Cloud Widget in Blogger
.label-size {
  position:relative;
  text-transform: uppercase;
  text-decoration:none;
  font-size:13px;
  font-family:Open Sans;
  color:#fff!important;
}

.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 ;
  background-image: linear-gradient(#8A8C8B, #1A1D1B);
  background-size: auto 200%;
  background-position: 0 100%;
  transition: background-position 0.5s;border-bottom:3px solid #000000;
}

.label-size a:hover {
  background-position: 0 0;
}

Finally click Save Template button and you're done.

We hope this article may have helped you in learning How to Customize Labels Cloud Widget in Blogger. Share this article with your friends and don't forget to subscribe us!

20 comments to ''How to Customize Labels Cloud Widget in Blogger v3"

ADD COMMENT
  1. I think your post is very interesting and mostly, I keep looking for like this type of websites where I learn or get new concept. I am happy to visit on your site. Thanks to share it. I was more than happy to find this web site. I need to thank you for your moment due to this unbelievable read!! I definitely savored every bit of it and I have you book-marked to see new things in your web site.I have some good work experience with custom essay writing service and my words are clearly based on what I felt through such processes in the past.

    ReplyDelete
  2. Thanks for sharing.I found a lot of interesting information here. A really good post, very thankful and hopeful that you will write many more posts like this one.
    vidmate.onl
    https://messenger.red/
    showbox.run

    ReplyDelete
  3. Prices can often stop you from choosing the best services, but you can forget all this and leave it behind you when dealing with the termite control company in Dammam, which enjoys high credibility and transparency in dealing to allow you to get the best possible services at the lowest prices.
    شركة مكافحة حشرات
    شركة مكافحة النمل الابيض بالرس
    شركة مكافحة حشرات بالرس

    ReplyDelete
  4. I regularly visit your site and find a lot of interesting information. Not only good posts but also great comments. Thank you and look forward to your page growing stronger.Street View Online

    ReplyDelete
  5. This comment has been removed by the author.

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete
  7. This comment has been removed by the author.

    ReplyDelete
  8. You think that on the Internet you will find love? Till I found a good service, I couldn't believe it until I found slovenian women and we have been for two years together. A number of Slovene women can be found on this blog. Slovene women may not be so famous as other Slavic brides, but when you see how lovely, loving and kind they are, you're going to know this is just a gaffe and the Slovenian brides are all love worthy. I encourage you to check out this resource resources and I'm sure they can support you and you're happy to do so.

    ReplyDelete
  9. Thanks for sharing this best stuff with us! Keep sharing! I am new in the blog writing.All types blogs and posts are not helpful for the readers.Here the author is giving good thoughts and suggestions to each and every write my assignment for me readers through this article.Quality of the content is the main element of the blog and this is the way of writing and presenting.

    ReplyDelete
  10. Its shape is sweet and fast
    Thanks for the sharing
    مباريات اليوم

    ReplyDelete
  11. These projects for exceptional requirements grown-ups can be applied in various manners. The most well-known projects apply them to work. Notwithstanding, there are additionally numerous projects that apply the projects for extraordinary necessities grown-ups to after-care programs. These projects frequently include restorative or advising administrations to help the people to reappear into a customary way of life and to get back to work, family and school. Essay Writing Services

    ReplyDelete
  12. These undertakings for remarkable prerequisites adults can be applied in different habits. The most notable undertakings apply them to work. Regardless, there are moreover various ventures that apply the activities for exceptional necessities adults to after-care programs. These undertakings every now and again incorporate remedial or encouraging organizations to assist individuals with returning into a standard lifestyle and to return to work, family and school. Pay To Write Essay

    ReplyDelete
  13. Homework help is actually good for students who struggle to meet their academic standards. Isn’t it always better to have someone by your side who can help with homework when nothing is working out? We feel that students often get overburdened by unending academic tasks and they require help. If you are in need of assistance too, feel free to let experts know about your issues. All you have to do is to find a suitable website and ask their chat support staff to “online assignment help”. They will take care of things from that point.

    ReplyDelete
  14. This comment has been removed by the author.

    ReplyDelete
  15. You may add a pop-up function to your contact form to make it look more current. Which we may include as a button in our footer. Rather than building an
    press release writing services
    entire contact page for users to click on, a basic contact form appears.

    ReplyDelete
  16. You may add a pop-up function to your contact form to make it look more current. Which we may include as a button in our footer. Rather than building an entire contact press release writing services
    page for users to click on, a basic contact form appears

    ReplyDelete
  17. يلا شوت Yalla Shoot جدول أهم مباريات اليوم مع أهم أخبار كرة القدم الأوروبية والعربية، جدول نتائج المباريات عبر يلا شوت بتحديث لحظي لكُل البطولات والدوريات.


    يلا شوت

    yalla shoot

    ReplyDelete
  18. يلا شوت Yalla Shoot جدول أهم مباريات اليوم مع أهم أخبار كرة القدم الأوروبية والعربية، جدول نتائج المباريات عبر يلا شوت بتحديث لحظي لكُل البطولات والدوريات.


    يلا شوت

    yalla shoot

    الاسطورة لبث المباريات

    يلا كورة

    يلا لايف

    ReplyDelete