Tuesday

ADD ANIMATED EFFECT TO LABELS LIST IN BLOGGER


In this post we will add effect to the links in your label list. We will add a hover effect to the label list, and when your user place their cursor on the label it will move horizontally. Isn't it is good, I had also added this gadget. You can see live demo of this gadget in my blog labels.


ADD ANIMATED EFFECT  TO YOUR BLOG LABEL LIST




1). Open your blog and go to Dashboard.

2). Select Layout and Edit HTML.


3). Find the following piece of code in your blog HTML code. HOW TO FIND CODE IN YOUR BLOG HTML CODE

</head>


NOTE :- Before making any changes you should backup your blog template code. HOW TO BACKUP YOUR BLOG TEMPLATE

4). Paste 
the following code just above/before the code you have searched.

<!--Animated Label Links For Blogger http://www.pcleaks.blogspot.com-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>
var dur = 450; 
$(document).ready(function() {
$('a.linknudge, .Label ul li a').hover(function() {
$(this).animate({
paddingLeft: '20px'
}, dur);
}, function() {
$(this).animate({
paddingLeft: 0
}, dur);
});
});</script>

<!--End Animated Label Links For Blogger http://www.pcleaks.blogspopt.com-->
5). Save your template and experience the change.


If you got a good experience than leave comments and Email Me for any assistance.

No comments:

Post a Comment