Home

Add Featured Link Widget With Vertical Marquee Effects

BloggerSpice
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.
Tags:

3 Comments

  1. Wow! I really love this. Thanks alot.
    Reply
  2. Revolver
    Very good job my friend this works perfectly!But can this updated automatically?I dont know,maybe using labels or someway?
    • BloggerSpice
      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.
    Reply
    Reply
  1. To insert a code use <i rel="pre">code_here</i>
  2. To insert a quote use <b rel="quote">your_qoute</b>
  3. To insert a picture use <i rel="image">url_image_here</i>
Go Up