Recent Posts Wigdet for Blogger With Thumbnail

Recent Post Widget

Actually blogger shows the recent posts in default. Blog means to reveal the ideas, describing something that you like, criticizing or sharing about your personal or business matters. So that blog always should be representative, then blogs can be useful to every people. Therefore you should make  more useful. To make , your blog useful, your blog should be representative first. There are several factors that you must apply to make your blog good representative. Among them, proper showing the information revealed in your blogs are very important. To manage the information of your blog properly, you must add many widget likewise recent post, popular post widget etc. Among them, here I have just told you how to add recent post widget in your blogger blog.

How to Add Recent Post Widget in Blogger Manually?

Step 1: Login In into Blogger.

Step 2: Go to Layout>>Html/Javascript

Step 3: Click on Html/Javascript 

Step 4: Just add the below code and save it.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.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;
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><a href="http://allblogsolution.blogspot.com/" rel="dofollow" target="_blank" title="All Blog Solution"><img src="" alt="Blog Solutions and tips" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://allblogsolution.blogspot.com/" rel="dofollow" target="_blank" title="Tips and Tricks of Blogger for bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga_B0OON2BK8RY_bWNj2I5JeVJkkx96VLRRNHV9LgvSZcvl2oF2Vaw1Mr4kKUC2oyO7iI2K4WTOZP9KwRyt7eo1LghbNb6ox0JzpM2C1Fzsum6c1-i_uq4yHfm5QxPM-d9FD7UkvgYK0s/s1600/imageicon.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga_B0OON2BK8RY_bWNj2I5JeVJkkx96VLRRNHV9LgvSZcvl2oF2Vaw1Mr4kKUC2oyO7iI2K4WTOZP9KwRyt7eo1LghbNb6ox0JzpM2C1Fzsum6c1-i_uq4yHfm5QxPM-d9FD7UkvgYK0s/s1600/imageicon.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga_B0OON2BK8RY_bWNj2I5JeVJkkx96VLRRNHV9LgvSZcvl2oF2Vaw1Mr4kKUC2oyO7iI2K4WTOZP9KwRyt7eo1LghbNb6ox0JzpM2C1Fzsum6c1-i_uq4yHfm5QxPM-d9FD7UkvgYK0s/s1600/imageicon.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga_B0OON2BK8RY_bWNj2I5JeVJkkx96VLRRNHV9LgvSZcvl2oF2Vaw1Mr4kKUC2oyO7iI2K4WTOZP9KwRyt7eo1LghbNb6ox0JzpM2C1Fzsum6c1-i_uq4yHfm5QxPM-d9FD7UkvgYK0s/s1600/imageicon.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga_B0OON2BK8RY_bWNj2I5JeVJkkx96VLRRNHV9LgvSZcvl2oF2Vaw1Mr4kKUC2oyO7iI2K4WTOZP9KwRyt7eo1LghbNb6ox0JzpM2C1Fzsum6c1-i_uq4yHfm5QxPM-d9FD7UkvgYK0s/s1600/imageicon.png";
showRandomImg = true;
boxwidth = 256;
cellspacing = 5;
borderColor = "#223c36";
bgTD = "#010101";
thumbwidth = 70;
thumbheight = 70;
fntsize = 13;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://allblogsolution.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='http://googledrive.com/host/0B-GuAkK2nj5gM0dXQllSZ1Y1ekU' type='text/javascript'></script>
</div>

Note: It should be noted that the home_page = "http://allblogsolution.blogspot.com/" must be replace by your blogger URL and if you already added the google api (<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>), then do not add.

Here are some useful things for you when you goes to put this widget into your blogger:-

1. You can change the numposts=10 into numposts=9 or 11 choose the number how many posts you want to display.
2. And limitspy=4, intervalspy=4000,summeryColor="#666", boxwidth, showrandomimage, summerfontsize,summerypost can be changed by yourself.

Tweet