Add Auto Scrolling Recent Posts Widget With JQuery Spy Effect to Blogger

After sharing a cluster of Social Bookmarking gadgets like Social widget with cool hover effect for blogger with our readers. Today I don't have any social bookmarking gadget to share with you because Today I have a splendid widget for you. As we all know recent posts or popular posts or recommended posts widgets are very popular because they are also one of the main reason of low bounce rate and loyal reader plus also help to increase number of page views. They plays a vital role in linking one post to another post. I have already posted a cool Recommended Post Widget with you but today I have a special treat for our readers. Because today I have come with Auto Scrolling Recent Posts Widget With Jquery Spy Effect for Blogger.

Features of Auto Scrolling Recent Posts Widget With Jquery Spy Effect for Blogger

Some of the cool features of Auto scrolling Recent post widget are given below :

This widget Uses J query Spy Effect Which is the best feature of this widget.
This widget Auto scroll and you can also adjust the number of posts to display at a time and speed of scrolling.
Each snippet contains Title, Thumbnail, Publish date and also the number of comments on the post.
The widget is customizable so you can easily customize this widget.

Check out the DEMO of this Widget

Demo

How To Add Add Auto Scrolling Recent Posts Widget With J query Spy Effect to Blogger

This widget uses JQuery So Ignore this step if you have already added jQuery plugin to your blog.

1. Go to Blogger dashboard >> Template >> Edit HTML.

2. Search </head> in your template and place the following code just above it.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

After adding the JQuery plugin follow the following steps.

1. Go to Blogger Dashboard >> Layout >> Add a gadget >> Add HTML/Javascript Box.

2. Paste the following code in HTML/Javascript Box.

<style type="text/css" media="screen">

</style>

<script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://lh6.googleusercontent.com/-kPPx1sCN4Pg/T-3xq72pLeI/AAAAAAAACFM/IdO7GsyUvGM/s1600/no-thumbnail.png";
imgr[1] = "https://lh6.googleusercontent.com/-kPPx1sCN4Pg/T-3xq72pLeI/AAAAAAAACFM/IdO7GsyUvGM/s1600/no-thumbnail.png";
imgr[2] = "https://lh6.googleusercontent.com/-kPPx1sCN4Pg/T-3xq72pLeI/AAAAAAAACFM/IdO7GsyUvGM/s1600/no-thumbnail.png";
imgr[3] = "https://lh6.googleusercontent.com/-kPPx1sCN4Pg/T-3xq72pLeI/AAAAAAAACFM/IdO7GsyUvGM/s1600/no-thumbnail.png";
imgr[4] = "https://lh6.googleusercontent.com/-kPPx1sCN4Pg/T-3xq72pLeI/AAAAAAAACFM/IdO7GsyUvGM/s1600/no-thumbnail.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 15;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://www.bloggiks.com/";
limitspy=4;
intervalspy=4000;
</script>

<div id="bloggiks-widget">
<script src='http://widgetbloggiks.googlecode.com/svn/trunk/recent.js' type='text/javascript'></script>
</div>

3. Now change the highlighted text in the above code as given below.

http://bloggiks.com : With your Blog's URL.

Limitspy=4 : Here 4 is the number of posts to be displayed at a time you can change it as you want to.

intervalspy=4000 : If you want to increase the speed of scrolling then just decrease this value.

4. After making changes according to your needs click on save and that's it.

Last Words

Do give us feedback about this widget and also share your experience about it. If you need any asistance then just let us know. Hope you all guys like this decent and cool widget. Hope this widget will help you to give a cool look to your blog. Subscribe to get free email updates directly to your inbox. Happy Blogging.