Add Link Nudging Effect to Blogger Links Using Simple CSS

In this tutorial we will show you how to add link nudging effect to blogger links using CSS. Later adding this effect in your blog all links or particular links slide when somebody move there mouse over it. This effect creates your links more attractive and eye-catching.

Link Nudging Demo

Watch Live Demo Here

• Home
• Widgets and plugins
• Trips and Tricks
• Tools

HOW TO ADD NUDGING EFFECT TO ALL BLOGGER LINKS?

• Go to Blogger Dashboard --> Design --> Edit HTML
• Backup your Template before making any changes to your blog
• Now  Expand Widget Templates
• Find the code shown below using [ctrl+F] ]]></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;}

How to add nudging effect to particular links?

• Go to Blogger Dashboard --> Design --> Edit HTML
• Backup your Template before making any changes to your blog
• Now  Expand Widget Templates
• Find the code shown below using [ctrl+F]

 ]]></b:skin>

Now Paste the Code shown below just before/above it

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

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

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

THATS TO www.mybloggerblog.com 

Tweet