Don't Miss

How to Customize Labels Cloud Widget in Blogger v3

By Zohaib Liaqat - 21 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!

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

ADD COMMENT
  1. 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
  2. This comment has been removed by the author.

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

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

    ReplyDelete
  5. 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
  6. 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
  7. Its shape is sweet and fast
    Thanks for the sharing
    مباريات اليوم

    ReplyDelete
  8. 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
  9. 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
  10. 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
  11. This comment has been removed by the author.

    ReplyDelete
  12. 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
  13. 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
  14. يلا شوت Yalla Shoot جدول أهم مباريات اليوم مع أهم أخبار كرة القدم الأوروبية والعربية، جدول نتائج المباريات عبر يلا شوت بتحديث لحظي لكُل البطولات والدوريات.


    يلا شوت

    yalla shoot

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


    يلا شوت

    yalla shoot

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

    يلا كورة

    يلا لايف

    ReplyDelete
  16. I'm new to the world of blogging. For my instructional blog, I'm using the Super SEO template. Menus and submenus are what I do. The issue is that menus and submenus operate audiobook production services usa fine in a desktop browser but not so much in a mobile device. What is the plan for resolving the issue?

    ReplyDelete
  17. asnanweb موقع اسنان ويب يقدم اهم نصائح للعناية بصحة الفم والاسنان

    ReplyDelete