›› Css3 : Link Nudging [New Style] ~ ILibrary

Sunday, 27 November 2011

›› Css3 : Link Nudging [New Style]

Do you like this story?

Hello Friends,
After My Previous Post BonBon Buttons For Blogger, i'm here back with a cool new post.
This post will help you to add the cool, new, and stylish Link Nudging widget to your BLOGGER blog.
To add it to your Blog you need to follow these simple and easy steps which will let you to optimize your old nudging style to a new one..

Launch Demo : Click Here

Why To Choose this Over The Old ?

It's Totally Stylish..
Shows Background effect with nudging.
And The Biggest : It is made By CSS3

How To Install ?

It is Very easy to integrate in your Blog and use..
Just you need to follow these nice and easy steps..

Step 1 :

Login to Blogger » Design » Edit Html
Now you need to backup your template first before trying anything. So first Backup your template.

Step 2 :

Now Find The Following Piece of Code [By Pressing Ctrl+F] :

]]></b:skin>

Now Paste the bellow code just before it.

.nudge ul { list-style:none; }
.nudge ul li a { background-color: #fff; color: #afafaf; padding: 10px 0 10px 25px; display:block; text-decoration:none; border-top:1px solid #eee; }
.css3_nudge ul li a {
-webkit-transition-property: color, background-color, padding-left;
-webkit-transition-duration: 500ms, 500ms, 500ms;
}

.css3_nudge ul li a:hover {
background-color: #efefef;
color: #333;
padding-left: 50px;
}

Now Hit Preview, If Everything is fine save the template lest comment here..

Step 3 :

After Saving The Template, Go To Page Elements and click on Add a Gadget.
Now Select HTML/JAVASCRIPT and then add the bellow piece of code in it.

Replace The Links and Names With yours and see the Stylish Widget On Your Blog.
Happy Blogging !!

Sunday, 27 November 2011