Add Featured Link Widget With Vertical Marquee Effects

Marquee effects were traditionally used in most of the blogs because this was the only way to make some animation in blog site. As a result bloggers were always feel weakness to applying Marquee effects on Text or images. Today I will share a technique that will help you to add a marquee effects on your selected posts title with vertical or upward flow. This widget can be used as a featured posts or visitors choice. I believe that this widget will able to contribute on increasing blog page view. Simple interface and fast loading is the main features of this widget. So I hope you will like it as well as your visitors.

Live Demo

Step 1 Go to your Layout tab.

Step 2 Click on "Add a Gadget" then select "HTML/JavaScript" Gadget.

Step 3 Now Copy the below code and paste it in "HTML/JavaScript" Gadget and Save it.

<style type="text/css">
.quick ul li {
background:transparent url(http://1.bp.blogspot.com/-JahvMZXJX7E/UTX3amdrLpI/AAAAAAAAB9M/HFge-d_Ipqs/s320/BS+Blogger.png) no-repeat 2px;
list-style-type: none;
margin:0 0 5px;
padding: 5px 5px 5px 30px !important;
border: 1px solid #dddddd;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.quick ul li:hover {
background:#FEB04D url(http://1.bp.blogspot.com/-JahvMZXJX7E/UTX3amdrLpI/AAAAAAAAB9M/HFge-d_Ipqs/s320/BS+Blogger.png) no-repeat 2px;
list-style-type: none;
margin:0 0 5px ;
padding-left:20px;
padding-top:7px;
}
</style>
<div class="quick ul li">
<marquee direction="up" scrolldelay="30" scrollamount="1" onmouseover="this.stop()" onmouseout="this.start()" height="300">
<ul>
<li>
<a href="http://www.bloggerspice.com/2013/01/how-to-install-blogger-custom-templates.html">How to Install Blogger Templates</a></li>
<li>
<a href="http://www.bloggerspice.com/2013/01/make-backup-and-restore-of-your-blogger_8.html"> How to Backup and Restore Your Templates</a></li>
<li>
<a href="http://www.bloggerspice.com/2013/01/how-to-remove-navbar-from-blogger.html"> How to Remove Navbar</a></li>
<li>
<a href="hhttp://www.bloggerspice.com/2013/01/how-to-remove-subscribe-to-post-atom_9.html"> Remove Subscribe to Posts Atom</a></li>
<li> <a href="http://www.bloggerspice.com/2013/01/split-your-blogger-header-in-two-parts.html"> Split Your Blogger Header Into Two Column</a></li>
<li>
<a href="http://www.bloggerspice.com/2013/01/optimize-your-blog-post-titles-for.html">Optimize Your Blog Post Title</a></li>
<li>
<a href="http://www.bloggerspice.com/2013/01/optimizing-blogger-title-tag-by-adding.html"> Optimize Blogger Title Tag</a></li>
<li>
<a href="http://www.bloggerspice.com/2013/01/customize-your-posts-with-blogger_13.html"> Customize your Post with permalink</a>  </li>
<li>
<a href="http://www.bloggerspice.com/2013/01/the-most-effective-seo-on-page-and-off.html"> On page and off page Optimization</a>
</li>
</ul></marquee></div>

Customization:

• Change http://www.bloggerspice.com/2013/01/how-to-install-blogger-custom-templates.html with post link
• Change How to Install Blogger Templates with Post title
• Finally Change all links and post title with your own from above.