Scrolling/Ticker Recent Post Gadget For Blogger

You may found many widgets for displaying recent posts from your blog,but they can show only a selected number of posts.If you set more number of posts then it will take more space of your blog.By adding scrolling recent posts widget to your blog you can show more number posts without taking so much space of your blog.Also this widget is highly customizable there are so many things which you can customize.This gadget is created by Prayag of Stylifyyourblog so I gave credits to him.Now lets see a list of customizable things.

You Can Customize These Things

1. Total Number of Recent Posts To Display.
2. Showing Post Thumbnails.
3. Display More Button.
4. Number Of Comments.
5. Date Of Post.
6. Show Post Summary.
7. Number Of Characters In Post Summary.
8. Scrolling Speed.
9. Number of Posts At a Time.
10. Pause Scrolling On Mouse Hover.

How To Add This Widget To Your Blog?

• Go to Blogger Dashboard > Design > Edit/Page Layout.
• Click Add a Gadget > HTML/JavaScript.
• Paste below code and save it.

<style>img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:right;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;}</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script style='text/javascript' src="http://code.helperblogger.com/hb-jquery-ticker.js" ></script>
<script style='text/javascript' src='http://code.helperblogger.com/hb-recentposts.js'></script>
<script style='text/javascript'>
var numposts = 7;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 100;
$(document).ready(function () {$('#sai').vTicker({
speed: 500,
pause: 3000,
showItems: 3,
animation: 'fade',
mousePause: false,
height: 0,
direction: 'up'
});});
</script>
<div id="sai">
<script src='http://www.yourblog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
</div>

Now replace http://www.yourblog.blogspot.com with your blog URL.

Optional Customizations

• To change total number of posts find this code var numposts = 7; 
• If you don't want to show post thumbnails then change this value var showpostthumbnails = true; to false.

Now with using above tricks you can customize this widget so easily.

Read the property and change the value as you wish.You can find these properties from line number 06 to 19 in above code.

To view live demo of your changes you can use our HTML Editor.