Add Featured Link Widget With Vertical Marquee Effects

Add Featured Link Widget With Vertical Marquee Effects

Comments: 3
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.

Speak Your Mind

Wow! I really love this. Thanks alot.

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

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.

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *