›› Css3 : Link Nudging [New Style]
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..
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] :
Now Paste the bellow code just before it.
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 !!
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;
}
.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.
<div class="css3_nudge nudge">
<ul >
<li><a href="#" target="_blank" >Name 1</a></li>
<li><a href="#" target="_blank" >Name 2</a></li>
</ul>
</div>
<ul >
<li><a href="#" target="_blank" >Name 1</a></li>
<li><a href="#" target="_blank" >Name 2</a></li>
</ul>
</div>
Replace The Links and Names With yours and see the Stylish Widget On Your Blog.
Happy Blogging !!
About Me
- Sidharth
- This is Sidharth, the proud admin of ILibrary. He is a student(+2) and aspires to be Popular..... He likes to Share his works and so here is the Platform Where he is going to share all his works.... Never miss out a post...... Follow us By email to keep yourself up to date !!!!