Blogger Simple Label widget with Drift Effect
Label widget is good for blog navigation. But blogger
default label is not so attractive. For this reason many blogger coding to make
some variation on it. I have designed this label widget with hover effect.
Which will make little attractive to visitors. This label widget would be
simple and clean style on normal mode but when you will mouse over on widget
then it will change color. Added a black pipe on the right side of the each
label. Hope you would like this label widget. Previously I have designed many
label widget but has choose orange color as trendy style. And this widget has created with pure CSS coding. So to install this
widget simply follow the simple steps from below.
Step 1 Log in to your Blogger account and Go to your Blogger Dashboard
Step 2 Go to your Layout tab.
Step 3 Click on "Add a Widget" then select "Label" Widget (Select Cloud Style).
Step 4 Now click on -> Template -> Edit HTML-> Unfold code ►
Step 5 Now Find this code ]]></b:skin> by pressing Ctrl + F
Step 6 Paste the below code Before/above ]]></b:skin>
/* Simple Label Widget by www.bloggerspice.com */
.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;
}
If you need any help then feel free to contact with me. I will get back to you as soon as possible.