Display Recent, Popular and Random Posts in Blogger with Thumbnails

A blog in its sidebar can have different elements displayed. One of those is a listing of posts from the blog itself. The listing can be of popular posts, recent posts and random posts. These are there to grab visitors’ attention, hoping that those visitors might like to read more articles from the blog. Articles can be listed in the sidebar with just articles titles linked to the articles, or they can be listed with a thumbnail and a snippet of the article. The second one sounds more eye-catching.
In Blogger, we can add widgets or gadgets in order to make posts from the blogs appear on the sidebar. Blogger natively keeps the stats of post views and so it has an official gadget which we can use to display popular posts. Then there are ways to use the blogger post feed to display the most recent posts or even random posts.
Note: For the plugins below to work, jquery must already be included in your template.

Display Popular Posts with Thumbnails in Blogger / Blogspot

Login to Blogger and head on to the layout editor of your blog.
Click on “Add a Gadget” link in the part of the template where you want to list the most popular posts.
From the official list of Gadgets in Blogger, scroll to the one that is titled “Popular Posts”.
Either click on the title or the plus sign right next to it.
In the next step, you can choose the title of the widget along with what to display. You can display the most viewed posts of all time, past 30 days or past 7 days. Choosing all time is not recommended because you’d want to keep this section fresh with recently popular posts. Reading posts from months or even years ago will not always be the visitors choice. But they are bound to have more views because they have been online for so long.
Choose the checkboxes that says image thumbnails and snippets to display those respectively. It is more attractive when you have an image and a bit of text from the post. You can skip the post snippet, but images make your blog widgets look great, trust me.
Click on “Save” and you are done. Top posts from the time period that you selected will be displayed in the sidebar or wherever you chose them to be displayed.

Display Recent Posts with Thumbnails in Blogger / Blogspot

Login to Blogger, select your blog and click on Layout to reach layout editor of your blog.
Click on “Add a Gadget” link where you’d be placing the widget. You can move this gadget later.
Scroll down in the gadget list and find the one that says “HTML/JavaScript”. Click on it to add it.
On the next screen, give your gadget a title like “Recent Posts”.

In the content area, add the following code:

<script type="text/javascript" src="https://www.googledrive.com/host/0B9VnchIrte6hQkFkczZBZEUzQ2M/"></script>
<style type="text/css">
ul.rcpost {line-height: 1.2;}
ul.rcpost li{list-style:none;margin:0;overflow:hidden;padding: 0.7em 0px;}
ul.rcpost .rcthumbs{float:left;margin:0 5px 5px 0}
ul.rcpost strong{display:block}
ul.rcpost p{margin:5px 0 11px}
ul.rcpost .date,ul.rcpost .rccomments{font-size:11px}
ul.rcpost .rccomments{padding-left:5px;border-left:1px solid #969191}
</style>
<div id="recentposts">
</div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
recentposts({
numberofposts:<span style="color: blue;">5</span>,
id_contain:"#recentposts",
commentstext:"<span style="color: blue;">Comments</span>",
imagesize:<span style="color: blue;">72</span>,
snippetsize:<span style="color: blue;">100</span>
});
});
//]]>
</script>

ul.rcpost {line-height: 1.2;}

ul.rcpost li{list-style:none;margin:0;overflow:hidden;padding: 0.7em 0px;}

ul.rcpost .rcthumbs{float:left;margin:0 5px 5px 0}

ul.rcpost strong{display:block}

ul.rcpost p{margin:5px 0 11px}

ul.rcpost .date,ul.rcpost .rccomments{font-size:11px}

ul.rcpost .rccomments{padding-left:5px;border-left:1px solid #969191}

</style>

//<![CDATA[

$(document).ready(function () {

recentposts({

numberofposts:<span style="color: blue;">5</span>,

id_contain:"#recentposts",

commentstext:"<span style="color: blue;">Comments</span>",

imagesize:<span style="color: blue;">72</span>,

snippetsize:<span style="color: blue;">100</span>

});

//]]>

</script>

Configurable options in the code:
numberofposts:9 – Change 9 to whatever number of posts you want to display.
commentstext:”Comments” – Choose what to display for the comments text. You can leave it as it is.
imagesize:72 – Dimensions of your image. 72 is the default one.
snippetsize – Length in characters of the text snippet accompanying the post.

Hit save and you are done. You can edit the CSS in the code if you want.

Display Random Posts with Thumbnails in Blogger / Blogspot

Go to your Layout editor of your blog, where you want to add a random posts gadget.
Click on the “Add a Gadget” link, a popup will follow.
In the popup, select “HTML/JavaScript”, gadget and click on its title or the ‘+’ button to add it.
Give your widget a title like “Random Posts”, or “You may Like” for example.

Add the following code to the “Content” area. Press save when you are done. Your Blogger blog now will now display random posts in the template.

<style type="text/css">
ul.rdpost {line-height: 1.2;}
ul.rdpost li{list-style:none;margin:0;overflow:hidden;padding: 0.7em 0px;}
ul.rdpost .rdthumbs{float:left;margin:0 5px 5px 0}
ul.rdpost strong{display:block}
ul.rdpost p{margin:5px 0 11px}
ul.rdpost .date{font-size:11px}
ul.rdpost .rdcomments{padding-left:5px;border-left:1px solid #969191}
</style>
<script type='text/javaScript'>
var rdnumposts=<span style="color: blue;">5</span>;
var rdsnippet_length=<span style="color: blue;">150</span>;
var rdcomment='<span style="color: blue;">Comments</span>';
var rddisable='<span style="color: blue;">Comments Disabled</span>';
var rdinfo='<span style="color: blue;">yes</span>';
var rdcurpost=[];var rdtotal_posts=0;var rdcurpost=new Array(rdnumposts);function totalposts(json){rdtotal_posts=json.feed.openSearch$totalResults.$t}document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts"></script>');function getvalue(){for(var i=0;i<rdnumposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdcurpost.length;j++){if(rdcurpost[j]==rndValue){found=true;break}};if(found){i--}else{rdcurpost[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdtotal_posts-1));return ranNum};
document.write('<ul class="rdpost">');
</script>
<script type="text/javascript" src="https://googledrive.com/host/0B9VnchIrte6hYXQyQVpaZ01SSjA/"></script>

ul.rdpost {line-height: 1.2;}

ul.rdpost li{list-style:none;margin:0;overflow:hidden;padding: 0.7em 0px;}

ul.rdpost .rdthumbs{float:left;margin:0 5px 5px 0}

ul.rdpost strong{display:block}

ul.rdpost p{margin:5px 0 11px}

ul.rdpost .date{font-size:11px}

ul.rdpost .rdcomments{padding-left:5px;border-left:1px solid #969191}

</style>

var rdnumposts=<span style="color: blue;">5</span>;

var rdsnippet_length=<span style="color: blue;">150</span>;

var rdcomment='<span style="color: blue;">Comments</span>';

var rddisable='<span style="color: blue;">Comments Disabled</span>';

var rdinfo='<span style="color: blue;">yes</span>';

document.write('<ul class="rdpost">');

</script>

Configurable Options:
rdnumbepost=5 – The number of random posts you want to display.
rdsnippet_length=100 – Length of your post snippet alongside the thumbnail.
var rdcomment=’Comments’ – Text for your “comments”. Leave it as it is.
rdinfo=”yes”– Set this to anything else to hide the date and comments info.

Here is a preview of what you will get. You will get something similar depending upon your template:

Display Recent, Popular and Random Posts in Blogger with Thumbnails

Display Popular Posts with Thumbnails in Blogger / Blogspot

Display Recent Posts with Thumbnails in Blogger / Blogspot

Display Random Posts with Thumbnails in Blogger / Blogspot

Next

Newer Post

Previous

Older Post