Add Featured Link Widget With Vertical Marquee Effects

Add Featured Link Widget With Vertical Marquee Effects

data:blog.title
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.
Anonymous 4/09/2013

Wow! I really love this. Thanks alot.

Revolver says: 6/23/2013

Very good job my friend this works perfectly!But can this updated automatically?I dont know,maybe using labels or someway?

Mohammad Fazle Rabbi says: 6/24/2013

I have used simple marquee effect but if you want to make automatic then you have to use JQuery file..I will create a tutorial soon..till then keep visiting.

Contact Form

Name

Email *

Message *