In this
tutorial we will describe about Customize Labels Widget for blogger blog.
Labels widget shows a list of the categories of your posts. It helps visitors
to observe the posts under a definite category. It’s also very useful for easy
navigation. Default blogger Labels
widget is not so good to look at. Don't be anxious, now I will share some cool attractive
labels widget for your blogs. This Labels widget created by simple CSS codes. I
have used clean CSS code so it won't slow down the loading time of your Blog. To
do this follows the below steps.
HOW TO ADD CSS CUSTOM LABEL WIDGET IN BLOGGER TEMPLATE?
Step 1 Go to
your Blogger Dashboard >> Layout tab.
Step 2 Click
on "Add a Widget" then select "Label" Widget then Select “Cloud”
Style.
Step 3 Click
on -> Template -> Edit HTML
Step 4 Find
this code ]]></b:skin>
by pressing Ctrl+F (Windows) or
CMD+F (Mac)
Step 6 Copy
any of following code and Paste the code
above/before ]]></b:skin>
Design 01
/*-----Custom Labels Cloud widget by www.blogsnucleus.blogspot.com.com----*/
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #C6C6C6;
border-radius: 3px;
float:left;
text-decoration:none;
font-size:10px;
color:#666;
}
.label-size:hover {
border:1px solid #6BB5FF;
text-decoration: none;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter:
progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455,
M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455,
sizingMethod='auto expand');
zoom: 1;
}
.label-size a
{
text-transform: uppercase;
float:left;
text-decoration: none;
}
.label-size a:hover {
text-decoration: none;
}
Design 02
/*-----Custom Labels Cloud widget by www.blogsnucleus.blogspot.com.com----*/
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5
{
font-size:100%;
filter:alpha(100);
opacity:10
}
.cloud-label-widget-content{
text-align:left
}
.label-size {
background:#0dd7b4;
display:block;
float:left;
margin:0 3px 3px 0;
color:#ffffff;
font-size:11px;
text-transform:uppercase;
}
.label-size a,.label-size span{
display:inline-block;
color:#ffffff !important;
padding:6px 8px;
font-weight:bold;
}
.label-size:hover {
background:#333333;
}
.label-count {
white-space:nowrap;
padding-right:3px;
margin-left:-3px;
background:#333333;
color:#fff !important;
}
.label-size {
line-height:1.2
}
Design 03
/*-----Custom Labels Cloud widget by www.blogsnucleus.blogspot.com.com----*/
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5
{
font-size:100%;
filter:alpha(100);
opacity:10
}
.cloud-label-widget-content{
text-align:left
}
.label-size {
border-radius:30px;
background:#FA0830;
display:block;
float:left;
margin:0 3px 3px 0;
color:#ffffff;
font-size:11px;
text-transform:uppercase;
}
.label-size a,.label-size span{
display:inline-block;
color:#ffffff !important;
padding:6px 8px;
font-weight:bold;
}
.label-size:hover {
border-radius:30px;
background:#333333;
}
.label-count {
white-space:nowrap;
border-radius:30px;
padding-right:3px;
margin-left:-3px;
background:#333333;
color:#fff !important;
}
.label-size {
line-height:1.2
}
Design 04
/*-----Custom Labels Cloud widget by www.blogsnucleus.blogspot.com.com----*/
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5
{
font-size:100%;
filter:alpha(100);
opacity:10
}
.cloud-label-widget-content{
text-align:left
}
.label-size {
background:#08A2FA;
border-radius: 30px;
display:block;
float:left;
margin:0 3px 3px 0;
color:#ffffff;
font-size:11px;
text-transform:uppercase;
}
.label-size a,.label-size span{
display:inline-block;
color:#ffffff !important;
padding:6px 8px;
font-weight:bold;
}
.label-size:hover {
background:#000000;
}
.label-count {
white-space:nowrap;
padding-right:3px;
margin-left:-3px;
background:#000000;
color:#fff !important;
}
.label-size {
line-height:1.2
}
Step 7 Now
hit the Save template button.
Note: To modify
the label color just change color code only from code block.
Now visit
your Blog, you will see the beautiful CSS label widget. I hope this new CSS
custom Label will love every blogger. For more exciting post keep in touch.
Let me show you a valuable resource which can add more labels in case, if you looking for more help. It is called Label Templates.
ReplyDeleteGreat job for publishing such a nice article. I am impressed by the details that you have shared in this post and It reveals how nicely you understand this subject. I would like to thanks for sharing this article here. creative digital agency Jakarta.
ReplyDelete