Computer & CSS Tricks: How to show recent post in Blogger

Recent post in blogger

Add Recent Post widget in Your blogger blog allow your visitor to quickly find your latest and Recent post without any hassle .This is the simple and easiest way to add Recentpost/Latest post widget in your blog.

Many blogger use Feed to display Recent blog posts.Using feed widget we are limited to display only five items.But in this Tutorial you will able to show unlimited number of post .

Just Follow some Easy and simple steps :

Log in to your Blogger Account(http://draft:blogger.com)
Then Go To Design----> Page Elements
Then click Add a gadget
click Html/ javascript
Then write Title Recent Post or whatever as your wish
Then Copy and Paste This below Code

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 = "(more)";
    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('<div class="bbrecpost">');
    if (standardstyling) document.write('<br/>');
    document.write(posttitle);
    if (showpostdate == true) document.write(' - ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);
    if (!standardstyling) document.write('</div><div class="bbrecpostsum"">');
    if (showpostsummary == true) {
      if (standardstyling) document.write('<br/>');
      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>');
    if (standardstyling) document.write('<br/>');
}
if (!standardstyling) document.write('<div class="bbwidgetfooter">');
if (standardstyling) document.write('<br/>');
document.write('<span style="font-size:80%;">Widget by <a href="http://emdadblog.blogspot.com">emdadblog</a></span>');
if (!standardstyling) document.write('</div>');

}
</script>
<script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 200;var standardstyling = true;</script><script src="http://emdadblog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>

Customize your setting Using below informationGo to end of the above code and change the http://emdadblog.blogspot.com/feeds/posts/default?orderby with your own blog address.See below example code

You may also customized above code with below information

** Var Numpost=10 (Number of Post showing)

** Var showPostdate=False(if you want to show post date change it true)

** Var show post summery =False(If you want to show post summery make it True )

Then Save
Its done

Computer & CSS Tricks

How to show recent post in Blogger

No comments:

Post a Comment