Recent Post with Thumbnail widget for Blogger from
Blogger Tricks has Become Popular. Further modifing the widget with AutoSlider Taken From the
Scarlett Theme makes it best recent post with Thumbnail for Blogger Blogspot Blog. You can See a Demo on my Sidebar.
Lets See how to Setup AutoSlider Recent Post with Thumbnail Blogspot Widgets
First log into Blogger
Go to Layout –> Page Elements
Click on Add Gadget. Select Html/Javascript and Paste the bellow 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.iblogerz.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>
Click On Save . Now Check Your Blog
Now Lets Understand Settings of AutoSlider Recent Post with Thumbnail Blogger Widgets
#spylist ul{
width:220px;
#spylist li {
width:208px;
boxwidth = 255;
This are the width of your Widget change it to match your Sidebar width
thumbwidth = 70;
thumbheight = 70;
This are the width and Height of the Image.
showPostDate = true;
Change it to False if you don’t want to show Date
numposts = 10;
This is the number of recent posts to show
home_page = “http://www.iblogerz.blogspot.com/”;
This is the Blog address change it to yours
limitspy=4
This is number of posts to show at a Time
intervalspy=4000
This is the time Delay To AutoSlide Posts
Known Bugs and Their Answers
Q.Images are not Shown in My Blog. only no images show ups ?
A.Go to Settings –> Feeds –> Set feeds to Full
Q.The Width of Widget is too Wide. its Doesn’t Fit in my Sidebar ?
A. Try Changing the width. Read Instructions Again.
Thanks To iTs original Author Abu Farhan