Add Nudge Effect To Text In Blogger

Hello Friends!!
In this tutorial I will teach you how to add css nudge effect to blogger links.I made this code using css3.If you don't know what is Nudge effect then you can see live demo .After adding this effect in your blog all links or selected links slide when someone move there mouse over it will move some millimeter in right.

View Demo

Adding Nudge Effect To All Links

1. Go to blogger Dashboard.
2. Go to Templates--->Edit Html.
3. Find for ]]></b:skin>
4. Copy and Paste the below code before/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;

Adding Nudge Effect To Selected Links

1. Go to your blogger Dashboard.
2. Go to Templates--->Edit Html.
3. Find for ]]></b:skin>
4. Copy and Paste the below code before/above ]]></b:skin>

. BloggingTrickzAndToolz102 {
-moz-transition: all 0.1s ease-in 0s ;
-webkit-transition: all 0.1s ease-in 0s ;
-o-transition: all 0.1s ease-in 0s ;
}
. BloggingTrickzAndToolz102:hover {
margin-left: 12px;
}

Now paste the below code where you want to add your nudge effect.

<a class="BloggingTrickzAndToolz102" href="Your Link">Your Text</a>

It's Done.

Categories: Blogger Tricks , CSS