How To Add Simple Label Widget With Drift Effect To Blogger

Hi guys, today i am going to show you a CSS Trick to make your blogs label widget more eye catching. Blogger label is good for navigation for your visitors, so that they can find your post by labels. But blogger default label is not so attractive and eye catching. This Trick will enable you to add simple and clean style Label’s on normal mode but when you point a mouse on it, then it will change its color. And this Label trick is created with pure CSS coding. So to install this widget simply follow the simple steps from below.

Adding Simple Label Widget With Drift Effect To Blogger

• Login to your blogger dashboard.
• Go to Layout tab.
• Click on " Add a Widget " then select " Label " as Widget.
• Choose selected labels if you want to show limited labels to your visitors, Sorting as Alphabetically and Finally Display as Cloud Style.

• Take a Backup of your Blogger Template.
• Go to Theme >>> Edit HTML.
• Now find this code ]]></b:skin> by searching ( Use Ctrl + F for Searching the code ).
• Paste the below code Above ]]></b:skin>

/* Label Widget with Drift effect by www.digitalnavigate.in */
.Label li {
background: none repeat scroll 0 0 #EEEEEE;
border: 0 none;
color: #666666;
margin: 0 1px 1px 0;
padding: 0;
text-decoration: none;
}
.label-size a {
background: none repeat scroll 0 0 #EEEEEE;
border-bottom: 0 none;
border-image: none;
border-left: 0 none;
border-top: 0 none;
color: #666666;
float: left;
font-size: 12px;
margin: 0 5px 5px 0;
padding: 10px;
text-decoration: none;
}
.label-size a:hover {
background-color: #fd4326;
color: #fff;
text-decoration: none;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
border-right: 5px solid #333333;
}

Note : You can change the color when the mouse hovers on it. Simply change the highlight font color code in red color with the color code of your choice.
If you have any problem with adding do let me know in the comments section or feel free to contact me. If you liked this post, Like and share it with your friends.