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.
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.
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.