AutoSlider Recent Post Blogger Widget With Thumbnail

If you are using a readmore hack (half summary) like mine it is important to show recent posts, in this way visitors can view it from the same page without going back.

Likewise if the visitor don't find the article interesting they might not go back to view the other posts.

Moreover it adds internal links to boost search engine ranking. Here is a new way to add recent posts to your site with an autoslider.

How to Setup:

* Log into Blogger

* Go to Layout --> Page Elements

* Click on Add Gadget

* Select Html/Javascript

* Paste the below code in it.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>
<script language='JavaScript'>
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://www.yoursite.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='http://popular-post-blogger.googlecode.com/files/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>

Settings:
========
#spylist ul{
width:220px (Width of the Widget)

#spylist li {
width:208px (Width of the Widget)

boxwidth = 255 (Box of your Widget)

thumbwidth = 70 (Width of the Image)

thumbheight = 70 (Height of the Image)

showPostDate = true (Change it to False if you don't want to show Date)

numposts = 10 (Number of recent posts to show)

limitspy = 4 (Number of posts to show at a Time)

intervalspy = 4000 (Time Delay To AutoSlide Posts)

Via: ibloggerz | Demo
Digg Google Bookmarks reddit Mixx StumbleUpon Technorati Yahoo! Buzz DesignFloat Delicious BlinkList Furl

Related Posts

7 comments: on "AutoSlider Recent Post Blogger Widget With Thumbnail"

littleWriter (Anunoy) said...

again a useful tool... thanks :)

Robin Hood said...

My dear freind. This is not working from today. Is there any problem.

Today afternoon when I am checking my blog, it is not working. What is the reason.

Also what about the Demo. I can't find there.

Dan* said...

@ Robin Hood

i can see it working in your website. It happens sometimes server being down it gets fix in few hours.

About the demo blog i think that person has moved to a new domain or might be under construction.

Robin Hood said...

The reason why its working now is that, I changed the source code....but kept the rest.

Dan* said...

@ Robin Hood

gr8 ! good thinking ;-)

Robin said...

Can I ask a doubt. Is there any way to upload source. I am not that much expert in programming. Tell me where to upload the script by my own as it is not sure that to how much extend this code will work in future. What should i do inorder to make me my own. So that I can edit it later....

Post a Comment