How to Customize The Blogger Label Gadget

Hello and Welcome to GetWebInfo.Com. Here you can learn how to customize your blogger theme label widget. 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 words that your readers ignore. But having a organized section of links to your blog categories in your sidebar is a great way to keep your old 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 label (Categories) are out of control. The time when I've seen so far is 729 labels on one blog. That would be a big mess in the sidebar (though, you can only select your widget in just few labels, but later on that).

729 blog Labels / Categories. That's just not right.

The other reason is that the Blogger Label gadget is not just very attractive on many templates. So, I wanted to share a template on the gadgets of how to edit the styles of quick tutorials 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 be harder than it needs to be.

So, let's go. Let's customize!


What we will be working with


Blogger Label Cloud Style Widget





Blogger List Style Label Widget                             

We will work on these two types of label widget style. Here i am post some new style of label view widget that can be really help full and put perfect impression to your blogger reader. But because we are customizing one of the native Blogger gadgets, this code will work on pretty much any template. As long as your template designer does not use too much! Important tags in their CSS, that is.

Note: This code does not work with the latest 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 the label styling so we are 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 will be Creating

I have 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 the "Add CSS" window in the Template Designer. Make suer you gra ll the code for your chosen still from the code window.


Here are the Four (4) style of Blogger Label Widgets style.



                     Style 01                                                                                          Style 02




                           Style 03                                                                                            Style 04


Style 01 The Minimalist


The code for this template is a simple, list-style list of text labels in the center (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: When editing code, make sure you edit the code in a plain text editor program like Text Edit or Note Pad.

Copy and paste code code encrypted Anto-European code code was in "Number of keys" box in template designer (tha> customism> number whiskey).

Style 01 Code

/* STYLE 1 - Custom Blogger Labels Gadget Styles by GetWebInfo.Com */
.Label ul {
text-align: center;    /* center aligns text in sidebar */
}
.Label ul li {
margin: 7px 0;    /* Adds space above and below each link. Change the 7 to adjust your spacing */
}
.Label ul li a {
color: #272727;    /* Link Color */
font-family: "Open Sans";     /* Link Font */
text-transform: uppercase;    /* Link case. Options are uppercase, lowercase, none, capitalize. */
font-style: normal;    /* Font Style. Options are normal and italics. */
font-weight: normal;    /* Font weight. Options include: light, normal, bold, */
letter-spacing: 1px;    /* Space between letters */
font-size: 12px;   /* Font Size. */
}
.Label ul li a:hover {
color: #C39F76;   /* Link hover color */
}





Style 02  Give Me Some Color

Again Copy and paste the text directly in to your page template from Theme> Edit HTML. Make sure you place it in the CSS section of the template.

Or To Take the easy way and go to Theme> Customize> Add CSS. Copy and paste the code then click the Applying to blog button.


Style 02 Code 

/* STYLE 2 - Custom Blogger Labels Gadget Styles by GetWebInfo.Com */
.Label ul li a {
    display: block;
    width: 100%;
    text-align: center;    /* center aligns text in sidebar */
    margin: 7px 0;    /* White space between links */
    padding: 12px 0;    /* Padding for colored background */
color: #272727;    /* Link Color */
    background-color: #f3f3f3;    /* Background Color */
font-family: "Open Sans";     /* Link Font */
text-transform: uppercase;    /* Link case. Options are uppercase, lowercase, none, capitalize. */
font-style: normal;    /* Font Style. Options are normal and italics. */
font-weight: normal;    /* Font weight. Options include: light, normal, bold, */
letter-spacing: 1px;    /* Space between letters */
font-size: 12px;   /* Font Size. */
}
.Label ul li a:hover {
color: #ffffff;   /* Link hover color */
    background-color: #C39F76;    /* Background Color */
}


Style 03 Lets Get Fancy

Again Copy and paste the text directly in to your page template from Theme> Edit HTML. Make sure you place it in the CSS section of the template.

Or To Take the easy way and go to Theme> Customize> Add CSS. Copy and paste the code then click the Applying to blog button.


This setup requires that you have FontAwesome icons installed on your blog. All of our Blogger have this already, so if you are using a Georgia Lou Studios Blogger template or you know your blog already has FontAwesome installed, skip the next step.

Install FontAwsome

Add the Following code to your text template just above the </head> tag.

<link HREF='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' REL='stylesheet'/>


Style 03 Code

/* STYLE 4 - Custom Blogger Labels Gadget Styles by GetWebInfo.Com */
.Label ul li {
    display: inline-block;
    width: calc(50% - 5px);
    box-sizing: border-box;
    float: left;
}
.Label ul li:nth-child(odd) {
    margin-right: 10px;
}
.Label ul li a:before {
   display: block;
   text-align: center;
   margin-bottom: 8px;
   font-family:'FontAwesome';
   font-size: 18px;   /* Icon size */
}
.Label ul li a {
    box-sizing: border-box;
    display: block;
    width: 100%;
    text-align: center;    /* center aligns text in sidebar */
    margin: 5px 0;    /* White space between links */
    padding: 20px 10px;    /* Padding for colored background */
font-family: "Open Sans";     /* Link Font */
text-transform: uppercase;    /* Link case. Options are uppercase, lowercase, none, capitalize. */
font-style: normal;    /* Font Style. Options are normal and italics. */
font-weight: normal;    /* Font weight. Options include: light, normal, bold, */
letter-spacing: 1px;    /* Space between letters */
font-size: 12px;   /* Font Size. */
color: #ffffff;    /* Link Color */
    background-color: #e7b99f;    /* Background Color */
}
.Label ul li a:hover {
color: #ffffff;    /* Link Hover Color */
    background-color: #272727;    /* Background Hover Color */
}
/* ICON CODES */
/* First Icon */
.Label ul li:nth-child(6n+1) a:before {
content:"\f1fc";
}
/* Second 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";
}



Style 04 Ombre or Color Gradient

Again Copy and paste the text directly in to your page template from Theme> Edit HTML. Make sure you place it in the CSS section of the template.

Or To Take the easy way and go to Theme> Customize> Add CSS. Copy and paste the code then click the Applying to blog button.


Style 04 Code

/* STYLE 4 - Custom Blogger Labels Gadget Styles by GetWebInfo.Com */
.Label ul li a {
  box-sizing: border-box;
display: block;
width: 100%;
text-align: center;    /* center aligns text in sidebar */
margin: 7px 0;    /* White space between links */
padding: 12px 10px;    /* Padding for colored background */
font-family: "Open Sans";     /* Link Font */
text-transform: uppercase;    /* Link case. Options are uppercase, lowercase, none, capitalize. */
font-style: normal;    /* Font Style. Options are normal and italics. */
font-weight: 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 */
.Label 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 {
color: #272727;    /* Link Color */
    background-color: #e5d7ca;    /* Background Color */
}
/* Fourth Label Colors */
.Label ul li:nth-child(6n+4) a {
color: #272727;    /* Link Color */
    background-color: #e0e1e6;    /* 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 */
.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:hover {
color: #ffffff;    /* Link 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 */
    background-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: #272727;    /* Background Hover Color */
}
/* Fourth Label Colors */
.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 {
color: #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 */
    background-color: #272727;    /* Background Hover Color */
}

Here are the four label style blogger codes only for you.

To find More Icon Codes 

  1. Visit the FontAwsome site http://fontawesome.io/icons/
  2. Use the search box to find an icon that fits your needs
  3. Under the search results, click on the icon you want to use to open the icon details
  4. Under the big picture of the icon you will see a unicode symbol for the icon for Example: f030

  5. Copy this code in to the content setting for your icon. Leave the quotes and backslash(\) intact.


Bonus Style Label Widget

If you want to get really fancy, you can combine styles 3 & 4 with varying colors and icons.


Bonus Style Code 

/* Bonus Style - Custom Blogger Labels Gadget Styles by Georgia Lou Studios */
.Label ul li {
        display: inline-block;
        width: calc(50% - 5px);
        box-sizing: border-box;
        float: left;
}
.Label ul li:nth-child(odd) {
        margin-right: 10px;
}
.Label ul li a:before {
       display: block;
       text-align: center;
       margin-bottom: 8px;
       font-family:'FontAwesome';
       font-size: 18px;   /* Icon size */
}
.Label ul li a {
        box-sizing: border-box;
        display: block;
        width: 100%;
        text-align: center;    /* center aligns text in sidebar */
        margin: 5px 0;    /* White space between links */
        padding: 20px 10px;    /* Padding for colored background */
font-family: "Open Sans";     /* Link Font */
text-transform: uppercase;    /* Link case. Options are uppercase, lowercase, none, capitalize. */
font-style: normal;    /* Font Style. Options are normal and italics. */
font-weight: normal;    /* Font weight. Options include: light, normal, bold, */
letter-spacing: 1px;    /* Space between letters */
font-size: 12px;   /* Font Size. */
}
/* ICON CODES */
/* First Icon */
.Label ul li:nth-child(6n+1) a:before {
content:"\f1fc";
}
/* Second 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";
}
/* LABEL COLORS */
/* First Label Colors */
.Label ul li:nth-child(6n+1) a {
color: #ffffff;    /* Link Color */
    background-color: #e7b99f;    /* Background Color */
}
/* Second Label Colors */
.Label ul li:nth-child(6n+2) a {
color: #ffffff;    /* Link Color */
    background-color: #e7b99f;    /* Background Color */
}
/* Third Label Colors */
.Label ul li:nth-child(6n+3) a {
color: #ffffff;    /* Link Color */
    background-color: #e7b99f;    /* Background Color */
}
/* Fourth Label Colors */
.Label ul li:nth-child(6n+4) a {
color: #ffffff;    /* Link Color */
    background-color: #e7b99f;    /* Background Color */
}
/* Fifth Label Colors */
.Label ul li:nth-child(6n+5) a {
color: #ffffff;    /* Link Color */
    background-color: #e7b99f;    /* Background Color */
}
/* Sixth Label Colors */
.Label ul li:nth-child(6n+6) a {
color: #ffffff;    /* Link Color */
    background-color: #e7b99f;    /* Background Color */
}
/* HOVER COLORS */
/* First Label Colors */
.Label ul li:nth-child(6n+1) a:hover {
color: #ffffff;    /* Link Hover Color */
    background-color: #272727;    /* Background Hover Color */
}
/* Second Label Colors */
.Label ul li:nth-child(6n+2) a:hover {
color: #ffffff;    /* Link Hover Color */
    background-color: #272727;    /* Background Hover Color */
}
/* Third Label Colors */
.Label ul li:nth-child(6n+3) a:hover {
color: #ffffff;    /* Link Hover Color */
    background-color: #272727;    /* Background Hover Color */
}
/* Fourth Label Colors */
.Label ul li:nth-child(6n+4) a:hover {
color: #ffffff;    /* Link Hover Color */
    background-color: #272727;    /* Background Hover Color */
}
/* Fifth Label Colors */
.Label ul li:nth-child(6n+5) a:hover {
color: #ffffff;    /* Link Hover Color */
    background-color: #272727;    /* Background Hover Color */
}
/* Sixth Label Colors */
.Label ul li:nth-child(6n+6) a:hover {
color: #ffffff;    /* Link Hover Color */
    background-color: #272727;    /* Background Hover Color */
}


Bonus Style Tips: Select the Labels to show in Your Widget

 And now a bonus tips for you. Learn how to trim the labels in your labels widget.

Step 01: Go to the Layout page on your Blogger Dashboard

Step 02: Find your labels gadget and click the Edit link.


Step 03: Under the Show option select Selected Labels

Step 04: Click the edit link that appears

Step 05: A list of all your Labels will appear in the bottom of the window

Step 06: Uncheck any labels you would like to Hide in the widget 


Step 07: Now just Click the Save button to save your settings

Final Words

I hope this article is really help full for your if you like this article so please share it o your social media accounts thanks for reading.

Hello and Welcome to GetWebinfo.com. Here on this site you can be able to find out Latest Articles are about Blogger, SEO, AdSense, WordPress,. You can also be able to find out Latest Tips that can you really need one. You can also Download Premium themes free from this site.