In this tutorial we are going to explain how to add slide drift style blogger label widget for your website or blog.In previous post we already talked about how to add customize css blogger label gadget with five different styles in blogger template.This blogger label widget have slide drift hover effect on it.To grab this stylish hover effect blogger label gadget follow the steps mentioned below.
how to add stylish drift slide blogger label widget
installation steps
Step 1. Log in to your Blogger account.Step 2. Go to Layout.
Step 3. Click on "Add a Widget" then select "Label" Gadget (Select Cloud Style) and Save it.
Step 4. Now Click on Template then Edit HTML
Step 5. Now Find this code ]]></b:skin> by using Ctrl+F
Step 6. Now Paste the following code above ]]></b:skin>
/* Stylish hover Slide drift Label Widget by www.bloggersstand.com */Step 7. Save your template..Done !!
.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;
}