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!
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.
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.
Ugh!
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.
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 - Custom Blogger Labels Gadget Styles by Georgia Lou Studios */.Label ul { text-align: center; /* center aligns text in sidebar */ }Change the 7 t.Label ul li { margin: 7px 0; /* Adds space above and below each link. o adjust your spacing */ } .Label ul li a { color: #272727; /* Link Color */ink case. Options are uppercase, lowercase, nofont-family: "Open Sans"; /* Link Font */ text-transform: uppercase; /* Lne, capitalize. */ font-style: normal; /* Font Style. Options are normal and italics. */ing: 1px; /* Space between letters */ font-size: 12px; /* Font Size. */ } .font-weight: normal; /* Font weight. Options include: light, normal, bold, */ letter-spa cLabel ul li a:hover { color: #C39F76; /* Link hover color */}
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 2 - Custom Blogger Labels Gadget Styles by Georgia Lou Studios */.Label ul li a { display: block; width: 100%;ebar */ margin: 7px 0; /* White space between links */text-align: center; /* center aligns text in si d padding: 12px 0; /* Padding for colored background */ color: #272727; /* Link Color */t */ text-transform: uppercase; /* Link case. Optionbackground-color: #f3f3f3; /* Background Color */ font-family: "Open Sans"; /* Link Fo ns are uppercase, lowercase, none, capitalize. */ font-style: normal; /* Font Style. Options are normal and italics. */letters */ font-size: 12px; /* Font Size. */ } .Label ul li a:hover { color:font-weight: normal; /* Font weight. Options include: light, normal, bold, */ letter-spacing: 1px; /* Space between #ffffff; /* Link hover color */ background-color: #C39F76; /* Background Color */}
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:
/* STYLE 3 - Custom Blogger Labels Gadget Styles by Georgia Lou Studios */.Label ul li a { box-sizing: border-box; display: block; width: 100%;/* White space between links */ padding: 12px 10px;text-align: center; /* center aligns text in sidebar */ margin: 7px 0; /* Padding for colored background */ font-family: "Open Sans"; /* Link Font */capitalize. */ font-style: normal; /* Font Style. Options are normal and italics. */ font-weigtext-transform: uppercase; /* Link case. Options are uppercase, lowercase, none, ht: normal; /* Font weight. Options include: light, normal, bold, */ letter-spacing: 1px; /* Space between letters */ font-size: 12px; /* Font Size. */ } /* LABEL COLORS *//* First Label Colors */ .Label ul li:nth-child(6n+1) a { color: #272727; /* Link Color */ background-color: #b0a8a6; /* Background Color */ } /* Second Label Colors */ .L abel ul li:nth-child(6n+2) a { color: #272727; /* Link Color */ background-color: #c3c5c4; /* Background Color */ } /* Third Label Colors */ .Label ul li:nth-child(6n+3) a {lor */ background-color: #e0e1e6color: #272727; /* Link Color */ background-color: #e5d7ca; /* Background Color */ } /* Fourth Label Colors */ .Label ul li:nth-child(6n+4) a { color: #272727; /* Link C o; /* Background Color */ } /* Fifth Label Colors */ .Label ul li:nth-child(6n+5) a { color: #272727; /* Link Color */ background-color: #f0ede4; /* Background Color */ } /* Sixth Label Colors */hover { color: #ffffff; /* L.Label ul li:nth-child(6n+6) a { color: #272727; /* Link Color */ background-color: #f5f6f1; /* Background Color */ } /* HOVER COLORS */ /* First Label Hover Colors */ .Label ul li:nth-child(6n+1) a :ink Hover Color */ background-color: #272727; /* Background Hover Color */ } /* Second Label Hover Colors */ .Label ul li:nth-child(6n+2) a:hover { color: #ffffff; /* Link Hover Color */#272727; /* Background Hover Color */ } /* Fourth Label Cbackground-color: #272727; /* Background Hover Color */ } /* Third Label Hover Colors */ .Label ul li:nth-child(6n+3) a:hover { color: #ffffff; /* Link Hover Color */ background-color :olors */ .Label ul li:nth-child(6n+4) a:hover { color: #ffffff; /* Link Hover Color */ background-color: #272727; /* Background Hover Color */ } /* Fifth Label Hover Colors */ .Label ul li:nth-child(6n+5) a:hover {ckground-color: #272727; /* Backgroundcolor: #ffffff; /* Link Hover Color */ background-color: #272727; /* Background Hover Color */ } /* Sixth Label Hover Colors */ .Label ul li:nth-child(6n+6) a:hover { color: #ffffff; /* Link Hover Color */ b aHover Color */}
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:
/* Add More Colors */
* 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.
INSTALL FONTAWESOME
Add the following code to your text template just above the </head> tag.
THE CODE
STYLE 4 CODE:
/* STYLE 4 - Custom Blogger Labels Gadget Styles by Georgia Lou Studios */.Label ul li { display: inline-block; width: calc(50% - 5px);dd) { margin-right: 10pbox-sizing: border-box; float: left; } .Label ul li:nth-child( ox; } .Label ul li a:before { display: block; text-align: center; margin-bottom: 8px;sizing: border-box; displfont-family:'FontAwesome'; font-size: 18px; /* Icon size */ } .Label ul li a { box -ay: block; width: 100%; text-align: center; /* center aligns text in sidebar */for colored background */ font-family: "Open Sans";margin: 5px 0; /* White space between links */ padding: 20px 10px; /* Padding /* Link Font */ text-transform: uppercase; /* Link case. Options are uppercase, lowercase, none, capitalize. */s include: light, normal, bold, */ letter-spacing: 1px; /* Space betwfont-style: normal; /* Font Style. Options are normal and italics. */ font-weight: normal; /* Font weight. Optio neen letters */ font-size: 12px; /* Font Size. */ color: #ffffff; /* Link Color */ background-color: #e7b99f; /* Background Color */ } .Label ul li a:hover {a:before { content:"\f1fc"; } /* Secondcolor: #ffffff; /* Link Hover Color */ background-color: #272727; /* Background Hover Color */ } /* ICON CODES */ /* First Icon */ .Label ul li:nth-child(6n+1 ) Icon */ .Label ul li:nth-child(6n+2) a:before { content:"\f0b1"; } /* Third Icon */ .Label ul li:nth-child(6n+3) a:before { content:"\f03e"; } /* Fourth Icon */ .Label ul li:nth-child(6n+4) a:before {content:"\f040"; } /* Fifth Icon */ .Label ul li:nth-child(6n+5) a:before { content:"\f1ea "; } /* Sixth Icon */ .Label ul li:nth-child(6n+6) a:before { content:"\f030";}
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:
/* Add More Icons *//* Seventh Icon */ld(6n+7) a:before { content:"\f030"; }.Label ul li:nth-chi
* Just change the + 7 number to match your icon number (i.e., 8th = 8, 9th = 9). You can add as many as you need
BONUS STYLE
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.
Post A Comment: