Customized CSS Labels Widget In Blogger Template.




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.

blog widgets

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



label widget for blogger


/*-----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



cute widget for blog


/*-----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



blogger gadgets


/*-----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.




2 comments:

  1. 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.

    ReplyDelete
  2. Great 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

Related Posts Plugin for WordPress, Blogger...

More From Webworld