LATEST: We are offering PENTESTING and WEB DEVELOPMENT service with low price Learn More

7/07/2013

Add Nice Jquery Effect To Blogger Labels

Today i will show how to add popout effect to your LABELS with mouse over.It looks very preety and eye catching.Its a simple code and will take 10 sec to adding it to your blog.After adding it to your blog ,it will look like image below:

Follow The Below Steps For Adding It


STEP 1: Goto blogger DASHBOARD >> TEMPLATE

STEP 2: Now click on EDIT HTML


STEP 3: Now press ctrl+f and search for </head>

STEP 4: Now paste the below code code just before </head>


<!-- label effect by www.hacking-articles.blogspot.com !-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>
    var dur = 400; // Duration Of Animation in Milli Seconds
    $(document).ready(function() {
        $(&#39;a.linknudge, .Label ul li a&#39;).hover(function() {
            $(this).animate({
                paddingLeft: &#39;25px&#39;
            }, dur);
        }, function() {
            $(this).animate({
                paddingLeft: 0
            }, dur);
        });
    }); // end of Jquery Script
</script>
<!-- label effect by www.hacking-articles.blogspot.com !-->

STEP 5:  Now save your template and reload your blog and see the changes.



About Author:

Hi, Its me Aamir Khan, Owner of HACKING ARTICLES. I am an Ethical Hacker, Pro Blogger, addicted Web Developer and Security Researcher with experience in various aspects of Information Security. I am from Pakistan.Hacking is my passion and i wanna myself to be called as a LEGEND in this field.

Follow him @ Twitter | Facebook


1 comment:

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. Make sure to click the "Subscribe By Email" link below the comment to be notified of follow up comments and replies.
2. Please "Do Not Spam" - Spam comments will be deleted immediately upon our review.
3. Please "Do Not Add Links" to the body of your comment as they will not be published.
4. Only "English" comments shall be approved.
5. If you have a problem check first the comments, maybe you will find the solution there.