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.
Copy and paste this code directly into your theme code or in the “Add CSS” box in the Template Designer (Theme > Customize > Add CSS > Ok)
★ Note: This style uses the gadget “List” style, so make sure your Labels gadget is set to “List” in the Display setting.
★ Please note when editing code, make sure you edit the code in a plain text editor program like Text Edit or Note Pad.
Here’s a look at the 4 styles:
Let’s get coding…
@ style 1:
/* STYLE 1 - Custom Blogger Labels Gadget Styles by Georgia Lou Studios */
.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 2:
/* STYLE 2 - Custom Blogger Labels Gadget Styles by Georgia Lou Studios */
.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 3:
/* STYLE 3 - Custom Blogger Labels Gadget Styles by Georgia Lou Studios */
.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 */
}
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 */
/* Seventh Label Colors */
.Label ul li:nth-child(6n+7) a {
color: #272727; /* Link Color */
background-color: #f5f6f1; /* Background Color */
}
/* Seventh Label Hover Colors */
.Label ul li:nth-child(6n+7) a:hover {
color: #ffffff; /* Link Hover Color */
background-color: #272727; /* Background Hover Color */
}
@ style 4:
/* STYLE 4 - 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. */
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";
1 Comments
This comment has been removed by the author.
ReplyDelete