Four Kinds of Recent Posts For Blogger With Javascript

Recent Posts are the latest post from your blog, most landing to your blog or website is on posting page which already index with search engine, so to show your reader what is your new posting, you must show it on recent posts widget. I have collected four kinds of recent posts for Blogger  which you can used.

Recent Posts For Blogger With Javascript

To use this, you must copy and paste the code inside HTML/Javascript Gadget in your Blogger Layout Dashboard, you can find it by clicking Add Gadget, then scrool down to find gadget like image below:

Recent Post With Javascript
Blogger Recent Posts With Javascript.
Blogger Recent Posts.

1. Recent posts with side scroll, you can set height and count value

<script src="http://helplogger.googlecode.com/svn/trunk/listbadge.js">{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list",
"pipe_params":{"URL":"http://YOUR-BLOGSPOT-URL/feeds/posts/default"},
"hideHeader":"false","height":"230","count": 2 }</script>
<style type=text/css>
.eggTray {margin:10px 0px;padding:0px;}
.ybr li  {border-bottom:0px #cccccc dotted; padding:0px 0px 10px 0px!important;}
.pipesTitle {padding-top:0px;}
.pipesDescription {display:true;}
.ycdr {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvGFFY7NjPQbADZdfVFfMJXCXLS0_QH-xE4d9WWfKgPw8HxmHSb4O4LdJB5MyP3a5LcqEGhOnvwZHiKYq2EPKzCDydJm0rNfQVMhIdlb9RvjJ5qNu7xcGoYWJ4fboz3w___8CZQMPd6P4/s1600/logo.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 4px 0px 0px 0px;line-height:14px;}
.ycdr, .ycdr a {color:#999999;}
.widget .popular-posts ul {padding-left:0;} 
</style>

2. Recent posts slider widget with fade effect. 

<link rel="stylesheet" type="text/css" href="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="slider-rotator" class="slider-rotator loading"></div>
<script type="text/javascript" src="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script>
<script type="text/javascript">
makeSlider({
    url: "http://YOUR-BLOGSPOT-URL"
});
</script>

3. For me this one is a nice recent post widget

<link href="https://dl.dropboxusercontent.com/u/137869302/style.css" type="text/css" rel="stylesheet" />
<script src="https://dl.dropboxusercontent.com/u/137869302/json.js"></script>

<script type='text/javascript'>
var numposts = 3;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;</script>
<script type="text/javascript" src="http://YOUR-BLOGSPOT-URL/feeds/posts/default?orderby=published&alt=json-in-script&callback=labelthumbs"></script>

4. Static recent posts, I was use it here in my blog, now I use no.2
 

<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://lh5.googleusercontent.com/-U6Zvv-gKB9Q/T7nuuNurOUI/AAAAAAAAAlE/XUhuecqHO0w/s200/images.jpeg";
showRandomImg = true;
tablewidth = 400;
cellspacing = 2;
borderColor = "#11170d";
bgTD = "#73b0a9";
imgwidth = 120; //image thumb with
imgheight = 90; //image thumb height
fntsize = 12; 
acolor = "#000";
aBold = false;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 0;  // this to show summary or not
summaryFontsize = 11;
summaryColor = "#666";
icon2 = " ";
numposts = 7;  //how many post show
home_page = "http://YOUR-BLOGSPOT-URL";
</script>
<script src="https://dl.dropboxusercontent.com/s/55hv1y6m4zmbgtu/recentposts_horizontal.js?dl=1&token_hash=AAHP5vPfxrschulh4xx4fOTLVlheTKjU0ZiaTpSXNQE3sQ" type="text/javascript"></script>

That's four common kinds of recent post which usually used on my blog, but there is one blogger recent posts without javascript which can used, it from feedburner publicize buzzboost, you can see how it display from there.

I hope you can choose which one is best for your blog and do not forget to adjust site address YOUR-BLOGSPOT-URL became yours, thanks.