The Blogger Label Gadget is not pretty. And tag clouds are old school. And ugly. Especially the default styles with the different sized fonts. It just ends up a big blog of words that your readers ignore.
But having an organized section of links to your blog categories in your sidebar is a great way to keep your older content alive and relevant. And to keep your readers reading!
So, let’s learn how to customize the Blogger Label Gadget!
Why You Should Use a Blogger Label Gadget
Many of my customers skip the Blogger Labels Gadget. They do this for a couple of reasons.
The first reason is because their Labels (Categories) are out of control. The all time record that I’ve seen so far has been 729 Labels on one blog. That would be a huge mess in the sidebar (although, you can select to only show a few Labels in your widget, but more on that later).
729 blog Labels/Categories. That’s just not right.
* If you’re Blogger Labels are out of control and you want to know more about the right way to use blog Labels and Categories, check out my post on The Right Way to Organize Your Blog with Categories and Labels.
The other reason is that the Blogger Label gadget just isn’t very attractive on many templates. So, I wanted to share a quick tutorial on how to edit the styles of your template’s Labels gadget to make it look more modern.
I’m going to share 4 different design options to customize the Blogger Label Gadget for you to choose from.
In future tutorials, I’ll also be sharing a quick and easy way to add a customized menu to the sidebar and how to add image Category buttons to Blogger the easy way. Some bloggers may it WAY harder than it needs to be.
So, here we go. Let’s customize!
What we’ll be working with
I’ll be working on a test blog with one of our Blogger templates, the Phoebe.
But because we’re customizing one of the native Blogger gadgets, this code will work on pretty much any template*. As long as your template designer didn’t use too many !important tags in their CSS, that is.
*Note: This code does not work with the newest Blogger.com default themes (Contempo, Soho, Emporio, Notable). Their code is dramatically different from most of the classic and premium Blogger.com themes.
I have actually stripped out all Labels styling so we’re starting from the default.
The Blogger Label Gadget has 2 style options: list and cloud. Here’s what the default styles look like on the Phoebe template.
What We’ll be Creating
I’ve designed 4 styles for you to play with.
This is all done with a bit of CSS you can add directly to your template or in the “Add CSS” window in the Template Designer. Make sure you grab all the code for your chosen still from the code window.
The code is clearly annotated so you can change colors and font sizes to suite your tastes.
Here’s a look at the 4 styles:
Let’s get coding.
Style 1 – The Mimimalist
The code for this style will give you a simple, list style Labels list with text centered in the sidebar (instead of left aligned).
You can also add a little white space between the links and specify their color and hover colors for some more control.
Note: This style uses the gadget “List” style, so make sure your Labels gadget is set to “List” in the Display setting.
This style doesn’t take much code at all. But it gives you a nice, minimal style.
I have added comments next to the code so that you’ll be able to customize it to your taste. You can even set the font family, font size and more.
Copy and paste this code directly into your theme code or in the “Add CSS” box in the Template Designer (Theme > Customize > Add CSS).
* Please note when editing code, make sure you edit the code in a plain text editor program like Text Edit or Note Pad.
STYLE 1 CODE:
Style 2 – Give me some color
This style is also fairly simple, but we’re going to add a colored background and some hover styles to give it more pop.
You will also be able to set the colors and hover colors as well as text styles, size and more.
Again, copy and paste the text directly into your page template from Theme > Edit HTML. Make sure you place it in the CSS section of the template.
Or take the easy route and go to Theme > Customize > AddCSS. Copy and paste the code then click the Apply to blog button.
This style also uses the gadget “List” style.
STYLE 2 CODE:
Style 3: Ombre or color gradient
I’ve seen this style on a few blogs and like the extra color pops it can add.
This style works best when you have a limited number of Labels. The code allows up to 6 colors. The colors will “rotate” through if you have more than 6 Labels.
You can use more more or less colors as well. See how below.
This style again uses the gadget “List” style.
STYLE 3 CODE:
Use Less Colors
Just remove the code for the 4th, 5th, 6th, colors, etc. Easy as pie.
Add More Colors
These 6 colors above will repeat every 6 labels. But if you want to add more colors, add 2 more lines like this:
* You’re just changing the + 7 to the number to match your label number. So for the 8th label, it would be +8, etc.
Style 4 – Let’s get fancy
This design gets really fancy. We’re going to add an icon above each of our links. A different icon for each link even.
This style again uses the List style for the gadget settings.
Because of the work involved with adding the icons, this style works better with a limited number of Labels links (6-12 maybe).
* You can also skip the icons. Just deleted the icon setting (will be labeled in code) on each link.
This setup requires that you have FontAwesome icons installed on your blog. All of our Blogger have this already, so if you’re using a Georgia Lou Studios Blogger template or you know your blog already has FontAwesome installed, skip the next step.
Add the following code to your text template just above the </head> tag.
STYLE 4 CODE:
To Find More Icon Codes
- Visit the FontAwesome site: http://fontawesome.io/icons/
- Use the search box to find an icon that fits your needs.
- Under the search results, click on the icon you want to use to open the icon details.
- Under the big picture of the icon you will see a unicode symbol for the icon. Example: f030
- Copy this code into the content setting for your icon. Leave the quotes and backslash (\) intact.
Add More Icons
For a 7th, 8th, etc. icon, add another group of code like this to the bottom of the main code:
* Just change the + 7 number to match your icon number (i.e., 8th = 8, 9th = 9). You can add as many as you need
If you want to get really fancy, you can combine styles 3 & 4, with varying colors and icons.
BONUS STYLE CODE:
Bonus Tip: Select the Labels to Show in your Widget
And now, a bonus tip. Learn how to trim the Labels in your Labels widget.
1. Go to the Layout page on your Blogger Dashboard.
2. Find your Labels gadget and click the Edit link.
3. Under the Show option, select Selected Labels.
4. Click the edit link that appears.
5. A list of all your Labels will appear in the bottom of the window.
6. Uncheck any labels you would like to HIDE in the widget. (Checked labels will be shown).
7. Click the Save button to save your settings.
Sum It Up
OK, I hope you find this tutorial helpful in adding a custom styles Labels widget to your Blogger sidebar.
Labels widget (and properly organized Labels) are a great way to help your visitors discover more of your content and keep your older content alive and valuable.