Stylish Slide Drift Hover Effect Label Widget In Blogger

0 /

Also Read

How to add Stylish Slide Drift Hover Effect Label Widget In Blogger
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 */
.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;
}
Step 7. Save your template..Done !!
SUMMARY

how to add simple Stylish Slide Drift Hover Effect Label Widget In Blogger,sliding effect label gadget for blogspot blogger website template

KEEP ON READING

SUBSCRIBE ARTICLES BY EMAIL

Post a comment Blogger Disqus

0 Comments on "Stylish Slide Drift Hover Effect Label Widget In Blogger" So Far - Comment Now!
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

MARKUP FOR WRITING COMMENTS:
1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Regards:
Team Bloggersstand