Customize Default Label Cloud Gadget in Blogger

Last Updated on: 2019-10-13T15:34:25Z   /   Read
Blogger Label Gadget provides two styles - List and Cloud. Last time I had shared tutorial on how to customize default label gadget in Blogger - List option and now its time for tutorial on how to make default label gadget stylish in Blogger - cloud option. Default label gadget - cloud style doesn't meet our expectations. So, it a must to edit it into something really cool. The design I'm going to share is worth trying and named as: Flat UI Labels Cloud Style. Let's get started.

Customize Default Label Gadget In Blogger - Cloud
Note: The reference code is shared by BloggerYard, which is currently offline. I personally loved the design and thought to share among all my fellow bloggers.

Features of Customized Beautiful Label Gadget Blogger

By now you might have seen the demo. That's cool right? Let's see the features of customized default label gadget.
  • 100% Killer Design.
  • No images are used.
  • Pure CSS Design.
  • Easily fits in Sidebar.
  • Easy to Customize.
  • Select/Deselect the Labels.
  • Different colors for labels based on number of articles.
  • Premium Design.

Recommended: Setup Creative Custom 404 Error Page for Blogger

How to customize default label Gadget In Blogger - Cloud?

I've divided the section into two parts: Adding of Label Gadget and Installation of Code.

Step 1: Add Default Label Gadget to Blogger

Go to Blogger DashboardLayoutAdd a GadgetSelect Label Gadget. Now a Label Gadget will pop up. Edit it as,
Title: <Give your title>
Show: All Labels/Selected Labels [Any one option]
Sorting: Alphabetically/By Frequency [Any one option]
Display: Cloud
Note: You must select the CLOUD option else this trick won't work.

Step 2: Adding CSS Code to Blogger

Before adding the codes,a good habit is to Backup the blog. Once done, Go to ThemeEdit HTML. Search for ]]></b:skin> and paste the code just above it. Check editing section on how you can customize label gadget. Once everything is done, click on Save Template.
/* Customize Default Label Cloud Gadget in Blogger By TwistBlogg.Blogspot.com */
/* Flat UI Labels Cloud By TwistBlogg.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}

Editing Section,
➤ Its pretty simple to edit the CSS code. To change the background color, modify background:#hex_value and for changing hover effect color, modify background: #hex_value 

➤ To change font size, modify font-size:13px and for font family, modify font-family:Open Sans. I personally feel like font-family: inherit will look pretty cool as it make use of default template font family.

*Bonus : You might have noticed we have disabled the copy text selection option in our whole blog except coding section. Let me tell you its completely CSS based technique. You can also add it in your blogger blog: Learn how to disable copy text selection in Blogger

That's all folks ! That was easy right? I hope this tutorial on how to customize blogger default label cloud widget into colorful Flat UI label cloud widget will help you improve the navigation and design of your blog. If you face any problem in the process, ping me a message or comment down below. We're cooking some other blogger widgets in our kitchen so feel free to stay tuned with us for more customized blogger widgets. Happy Blogging pals ! 💪 [Tschüss - Bye Bye in German]
Comment Policy: We love comments and appreciate the time that our readers spend to share ideas and give feedback. Thank you to everyone who comments at the TwistBlogg.com.

However, we also want our comments to be as useful as possible to all of our readers. While we keep 99% of comments, we will remove spam and irrelevant comments.

Note: We reserve the right to remove any comments from the site; please leave comments that are respectful and useful.