Monday, August 20, 2012

CSS Nudge Effect To Blogger Links


Nudge effect is a effect, when you place your mouse on a link, it will nudge. This effect developed with CSS3. Here is a demo of CSS3 nudge effect on blogger links. This effect looks nice on links. You can add this effect all the link or some selected links on blogger

View Demo

Nudge Effect To All Links

  • Blogger Dashboard → Design → Edit HTML
  • Now find the following code using F3
  • ]]></b:skin>
  • Now Paste the following CSS code just above ]]></b:skin>
  • a:link {
    -moz-transition: all 0.1s ease-in 0s ;
    -webkit-transition: all 0.1s ease-in 0s ;
    -o-transition: all 0.1s ease-in 0s ;
    }
    a:hover {
    margin-left: 12px;
  • Now save the template
  • Adding Nudge Effect To Selected Links

  • Blogger Dashboard → Design → Edit HTML
  • Now find the following code using F3
  • ]]></b:skin>
  • Now Paste the following CSS code just above ]]></b:skin>
  • .nudg {
    -moz-transition: all 0.1s ease-in 0s ;
    -webkit-transition: all 0.1s ease-in 0s ;
    -o-transition: all 0.1s ease-in 0s ;
    }
    .nudg:hover {
    margin-left: 12px;
    }
  • Now save the template
  • Nudge Effect On Selected Links
  • Follow the below HTML code format
  • <a class="nudg" href="http://edutechnology.net/">Blogging Tips</a>

    Please like our Facebook Page or Follow us on Twitter or Subscribe

    If you like the article, please spend only 5 second to share with your friends

    0 comments:

    Click Here To add Comment