• Sunday, 19 October 2014

    Link Nudge Effect With CSS And JQuery

    Link Nudge Using CSS3


    • Go to Blogger Account
    • Design -> Edit HTML
    • Find ]]></b:skin>  and copy the below code BEFORE it
    a.toolsvalley {
    -moz-transition: all 0.1s ease-in 0s ;
    transition: all 0.1s ease-in;
    -webkit-transition: all 0.1s ease-in 0s ;
    -o-transition: all 0.1s ease-in 0s ;
    }

    a.toolsvalley:hover {
    margin-left: 12px;
    }
    • Save it.
    • If you want link nudge effect to a link add class toolsvalley to each link
    Eg: <a class="toolsvalley" href="http://blogger.com">Blogger</a>
    If you want this Link Nudge Effect to labels follow the steps below
    • Go to Design->Edit HTML
    • Find ]]></b:skin> and copy the following code BEFORE it

    .toolsvalley,Label li,#Label1 ul li a,.Label li a {
    -moz-transition: all 0.2s ease-in 0s ;
    -webkit-transition: all 0.2s ease-in 0s ;
    -o-transition: all 0.2s ease-in 0s ;
    }

    .toolsvalley:hover,Label li:hover,#Label1 ul li a:hover,.Label li a:hover {
    margin-left: 14px;
    }

    • That's all the Link Nudge with CSS3

    Link Nudge using jQuery

    Step 1: Add jQuery plugin (if your blog have a jquery plugin,ignore this step)
    • Go to Template->Edit HTML
    • Copy and paste the below code <head>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
     Step 2 :Adding jQuery script for Link Nudge
    • Sign In to your Blogger Account
    • Go to Design->Edit HTML
    • Find </head> and copy below code snippet BEFORE it
    <!--Tools Valley Link Nudge Start-->
    <script type='text/javascript'>
    var speed = 300; // Speed Of Animation
    $(document).ready(function() {
    $(&#39;a.noopln,#Label1 ul li a,.Label li&#39;).hover(function() {
    $(this).animate({paddingLeft: &#39;13px&#39;}, speed);
    }, function() {$(this).animate({paddingLeft: 0}, speed);
    });
    }); </script><a href='http://toolsvalley.blogspot.com'><img src='http://1.bp.blogspot.com/-RikrI-c_pyQ/T2DTcP6aMvI/AAAAAAAAAL0/H6v7PVoHM_w/s1600/1x1juice.png'/></a><!--Tools Valley Link Nudge End-->
    • Save it
    You can put link nudge effect to a link by adding a class noopln
    Eg: <a class="toolsvalley" href=" ">Your Link</a>

    If your link already have a class then add this class after a space.

    Eg: <a class="anotherclass toolsvalley" href=" ">Your Link</a>
    The above jQuery code snippet is also work with your Labels,If you don't need Link Nudge effect to your labels then delete the red blinking highlighted code in it.
    And Save the Template linknudge css3 and jquery
    Its almost finished,If you enjoyed this article share and like toolsvalley.in

    Popular Posts

    Contact Form

    Name

    Email *

    Message *