Adding Nudge Effect To Blogger Links Using Css

Saturday, 10 November 2012

Adding Nudge Effect To Blogger Links Using Css

Nudge effect is a effect, when you place your mouse on a link, it will nudge. This effect developed with CSS3.In This tutorial I will teach you how to add CSS3 nudge effect to blogger links.After adding this effect in your blog all links or selected links slide when someone move there mouse over it. This effect makes your links more attractive.Here is a demo of CSS3 nudge effect on blogger links.

Before going to learn the tutorial, first check a demo for this tutorial below.

LINK NUDGING EFFECT DEMO

Live Demo

ADD NUDGING EFFECT TO ALL BLOGGER LINKS

Go To Blogger Dashboard

Click On Template Tab

Backup your Template before making any changes to your blog

Now Click On Edit HTML Button -->Proceed -->Tick the Expand Widget Templates

Press CTRL+F and Find the ]]></b:skin> Code there

Now Paste The Code Shown Below Just Before/Above ]]></b:skin>

a:link { -webkit-transition: padding-left 250ms ease-out; -moz-transition: padding-left 250ms ease-out; } a:hover { padding-left: 12px;}

ADD NUDGING EFFECT TO SELECTED LINKS

Go To Blogger Dashboard

Click On Template Tab

Backup your Template before making any changes to your blog

Now Click On Edit HTML Button -->Proceed -->Tick the Expand Widget Templates

Press CTRL+F and Find the ]]></b:skin> Code there

Now Paste The Code Shown Below Just Before/Above ]]></b:skin>

.votiveblog { -webkit-transition: padding-left 250ms ease-out; -moz-transition: padding-left 250ms ease-out; } .votiveblog:hover { padding-left: 12px;}

Now Paste below code where you want to show Nudge links effect

<a class="votiveblog" href="YOUR LINK HERE">YOUR TEXT HERE</a>

I hope you like this article.If you needed any help just let me know.Do not forget to share it.Take good care of yourselves and your loved ones. Peace and blessings.