Add Link Hover/Nudging Effect To Blogger Links Using Css

This tutorial will show you How To Add Link Hover/Nudging Effect To Blogger Links Using Css. 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.

Link Nudging Demo

LIVE DEMO

Add Nudging Effect To All Blogger Links

• Go to Blogger Dashboard 
• Click on DropDown Menu and select Template
• Backup your Template before making any changes to your blog
• Now Click on Edit HTML --> Proceed --> Expand Widget Templates
• Press Ctrl + F and search the code shown below

]]></b:skin>

• Now Paste the Code shown below just before/above it

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 DropDown Menu and select Template
• Backup your Template before making any changes to your blog
• Now Click on Edit HTML --> Proceed --> Expand Widget Templates
• Press Ctrl + F and search the code shown below

]]></b:skin>

• Now Paste the Code shown below just before/above it

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

• Now use the HTML code shown below to add nudging effect to selected links

<a class="latesthack" href="http://blogger.com">Blogger</a>

Like it? Share it.