This website is dedicated to WordPress, but it can’t stop me from helping Blogger users. I’ll post Blogger tutorials and tricks on a regular basis, but it’ll be just some basic stuff, not some high coding.
In this post, I’ll show you how to display recent posts in Blogger with various codes an options. You’ll find everything recent post trick for Blogger in this tutorial.
Recent Posts With Official Blogger Widget
First & the easiest way to display recent posts in a widget easy is by using Blogger’s original feed widget to display recent posts from the blog’s feed.
Navigate to your Dashboard > Layout > Add A Gadget > Feed Widget. Enter the feed URL of your blog and click on Continue.
Now, just configure the display settings of the posts. You can set the number of posts, widget title and more settings.
Recent Posts Widget With Code
The above widget only works on the widgetized areas of your Blogger. However, here’s how you can add this widget to any part of your blog with some JavaScript.
Navigate to your Dashboard > Template > Edit HTML. Search and paste this code just above </head>:
<script style='text/javascript'>
// ----------------------------------------
// SHOW RECENT POSTS 2
// ----------------------------------------
// Original by blogsolute.com
// Mod by madtomatoe.com
// ----------------------------------------
function showrecentposts(json) {
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
posttitle = posttitle.link(posturl);
var readmorelink = "»»";
readmorelink = readmorelink.link(posturl);
var postdate = entry.published.$t;
var cdyear = postdate.substring(0,4);
var cdmonth = postdate.substring(5,7);
var cdday = postdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
if (!standardstyling) document.write('');
document.write('<div class="bbrecpost2">');
document.write('<span>');
if (standardstyling) document.write('');
document.write(posttitle);
if (standardstyling) document.write('');
if (showpostdate == true) document.write(' - ' + cdday + ' ' + monthnames[parseInt(cdmonth,10)]);
if (!standardstyling) document.write('<div class="bbrecpostsum"">');
if (standardstyling) document.write('');
if (showpostsummary == true) {
if (standardstyling) document.write('');
if (postcontent.length < numchars) {
if (standardstyling) document.write('<i>');
document.write(postcontent);
if (standardstyling) document.write('</i>');}
else {
if (standardstyling) document.write('<i>');
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '... ' + readmorelink);
if (standardstyling) document.write('</i>');}
}
if (!standardstyling) document.write('</div>');
document.write('</span>');
document.write('</div>');
if (standardstyling) document.write('');
}
if (!standardstyling) document.write('<div class="bbwidgetfooter">');
if (standardstyling) document.write('');
document.write('');
if (!standardstyling) document.write('/div');
}
</script>
<script>
var numposts = 25;
var showpostdate = false;
var showpostsummary = true;
var standardstyling = true;
</script>Code language: HTML, XML (xml)In above code, you can change following parts of the code:
- Number of Posts – numposts = 10;
- Show Post Date(True or False) – showpostdate = false;
- Show Post Summary(True or False) – showpostsummary = true;
- Show Standard Styling(True or False) – standardstyling = true;
Now, navigate to Dashboard > Layout > Add A Gadget > HTML/JavaScript. Add following code and save the widget:
<div class="recent-posts">
<script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts'></script>
</div>Code language: HTML, XML (xml)You can now add above code anywhere within your Blogger blog template.
Recent Posts With Scrollbar
This is the one widget that I use in my Blogger blog. It’s just like the above widget, but with some CSS in action!
Navigate to your Dashboard > Template > Edit HTML. Search and paste this code just above </head>:
<script style='text/javascript'>
// ----------------------------------------
// SHOW RECENT POSTS 2
// ----------------------------------------
// Original by blogsolute.com
// Mod by madtomatoe.com
// ----------------------------------------
function showrecentposts(json) {
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
posttitle = posttitle.link(posturl);
var readmorelink = "»»";
readmorelink = readmorelink.link(posturl);
var postdate = entry.published.$t;
var cdyear = postdate.substring(0,4);
var cdmonth = postdate.substring(5,7);
var cdday = postdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
if (!standardstyling) document.write('');
document.write('<div class="bbrecpost2">');
document.write('<span>');
if (standardstyling) document.write('');
document.write(posttitle);
if (standardstyling) document.write('');
if (showpostdate == true) document.write(' - ' + cdday + ' ' + monthnames[parseInt(cdmonth,10)]);
if (!standardstyling) document.write('<div class="bbrecpostsum"">');
if (standardstyling) document.write('');
if (showpostsummary == true) {
if (standardstyling) document.write('');
if (postcontent.length < numchars) {
if (standardstyling) document.write('<i>');
document.write(postcontent);
if (standardstyling) document.write('</i>');}
else {
if (standardstyling) document.write('<i>');
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '... ' + readmorelink);
if (standardstyling) document.write('</i>');}
}
if (!standardstyling) document.write('</div>');
document.write('</span>');
document.write('</div>');
if (standardstyling) document.write('');
}
if (!standardstyling) document.write('<div class="bbwidgetfooter">');
if (standardstyling) document.write('');
document.write('');
if (!standardstyling) document.write('/div');
}
</script>
<script>
var numposts = 25;
var showpostdate = false;
var showpostsummary = true;
var standardstyling = true;
</script>Code language: HTML, XML (xml)In above code, you can change following parts of the code:
- Number of Posts – numposts = 10;
- Show Post Date(True or False) – showpostdate = false;
- Show Post Summary(True or False) – showpostsummary = true;
- Show Standard Styling(True or False) – standardstyling = true;
Now, search and add following code just above the ]]></b:skin> tag of your template:
div.scrollableContainer {
width: 270px;
border: 1px solid #999;
overflow:hidden;
}
div.scrollingArea {
height: 240px;
overflow: auto;
}
.bbrecpost2{
padding:5px 0 5px 5px;
}
.bbrecpost2 a{
text-decoration:none;
}
Now, navigate to Dashboard > Layout > Add A Gadget > HTML/JavaScript. Add following code and save the widget:
<div class="scrollableContainer"> <div class="scrollingArea"> <script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts'></script> </div></div>
You can also post above code anywhere within your blog template.
Recent Posts With Thumbnail
That’s the final type of recent posts widget that we’re going to share in this post. It displays the thumbnails of you recent posts in the right side of the widget.
Navigate to your Dashboard > Template > Edit HTML. Search and paste this code just above </head>:
<script style='text/javascript'>
function showrecentpostswiththumbs(json){document.write('<ul class="recent_posts_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='http://www.webaholic.co.in/other/no-image.jpg';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<img class="recent_thumb" src="'+thumburl+'"/>');document.write('<b><a href="'+posturl+'" target ="_top">'+posttitle+'</a></b><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('<i>');document.write(postcontent);document.write('</i>');}
else{document.write('<i>');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('</i>');}}
var towrite='';var flag=0;document.write('<br><strong>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More -></a>';flag=1;;}
document.write(towrite);document.write('</strong></li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('<hr size=0.5>');}document.write('</ul>');}
</script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;
</script>Code language: HTML, XML (xml)In above code, you can change following parts of the code:
- Number of Posts – numposts = 10;
- Show Post Thumbnails(True or False) – showpostthumbnails = true;
- Show Display More Option(True or False) – displaymore = false;
- Show Display Separator(True or False) – displayseparator = true;
- Show Show Comment Number(True or False) – showcommentnum = true;
- Show Post Date(True or False) – showpostdate = false;
- Show Post Summary(True or False) – showpostsummary = true;
- Number of Characters in Summary – numchars = 100;
Now, search and add following code just above the ]]></b:skin> tag of your template:
img.recent_thumb {padding:1px;width:55px;height:55px;border:0;
float:left;margin:10px;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}
Now, navigate to Dashboard > Layout > Add A Gadget > HTML/JavaScript. Add following code and save the widget:
<div class="recent-posts"> <script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script> </div>
You can also add the above code anywhere in your template.
That’s it for this article! I hope you found a perfect recent posts widget for your Blogger.
it gives an error (Error parsing XML, line 3098, column 58: The reference to entity “alt” must end with the ‘;’ delimiter.) when i save the template on this line
please help me to fix it
Which code are you talking about? And I’d recommend you to add the code to a widget instead of the template.
works great thanks
true, if you wanna share more views please share it with us at http://www.abhicontentwriter.com