Customize Labels Widget in Blogger

Label Widget For Blogger

Many bloggers use this widget to make the navigation easy for users. This widget allows you to make separate categories for different posts. You can use labels to add categories for different topics. Number of posts is associated to a single label which can be accessed easily by clicking a single label. Blogger default label style doesn't look professional. Customizing label widget makes your blog beautiful. Your blog looks more stylish and attractive.

How To Add Label Widget In Blogger?

Follow these simple steps to add label widget to blogger.

• Log in to your Blogger account.
• Go to Dashboard ==> Layout ==> Add a gadget.
• Click on labels and add categories.
• Click on save.

How To Customize Blogger Label Widget?

• Go to Dashboard ==> Template ==> Edit HTML. 
• Find the following code.

]]></b:skin>

• Copy the code below and past it just above ]]></b:skin> tag

.label-size{
margin:0;
padding:0;
position:relative;
} 
.label-size a{
float:left;
height:24px;
line-height:24px;
position:relative;
font-size:12px;
margin-bottom: 9px;
margin-left:20px;
padding:0 10px 0 12px;
background:#0089e0;
color:#fff;
text-decoration:none;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px; 
border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-webkit-border-top-right-radius:4px; 
border-top-right-radius:4px; 
} 
.label-size a:before{
content:"";
float:left;
position:absolute;
top:0;
left:-12px;
width:0;
height:0;
border-color:transparent #0089e0 transparent transparent;
border-style:solid;
border-width:12px 12px 12px 0; 
} 
.label-size a:after{
content:"";
position:absolute;
top:10px;
left:0;
float:left;
width:4px;
height:4px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background:#fff;
-moz-box-shadow:-1px -1px 2px #004977;
-webkit-box-shadow:-1px -1px 2px #004977;
box-shadow:-1px -1px 2px #004977;
} 
.label-size a:hover{background:#555;} 
.label-size a:hover:before{border-color:transparent #555
transparent transparent;}

• Click on save button and you are done.

What Next?

This is a small tutorial on adding label widget to Blogger. You can customize it or redesign it as you want. Implement it on your blog and let me know by commenting.
Subscribe to our daily tutorials feed.