A Bulleted Recent Posts Widget for Blogger Blogs

For a long time, I was struggling to find a bulleted “Recent Posts” widget for my Blogspot blog which would match in style with the “Popular Posts” widget that is already provided by Blogger.

Finally, I found a snippet of code on another site which I further modified to create my very own widget.

Below is the code for the “Recent Posts” widget. You don’t need to make any changes to it, except for editing this line at the bottom:

<script src="http://blogname.blogspot.com/feeds/posts/summary?max-results=5&alt=json-in-script&callback=recentpostslist"></script>

Replace “blogname.blogspot.com” with your Blogspot blog URL. And change “max-results” from 5 to any number you like, to change the number of recent posts displayed by the widget.

To add it to your Blogspot blog, you need to follow these steps:

1. Login to your Blogger.com account

2. From the Dashboard, go to “Design”

3. Click on “Add a Gadget” and choose “HTML/JavaScript” from the options.



4. On the next page, paste the below code in the body and choose an appropriate title (such as “Recent Posts”).

5. Click on “Save” to add the widget to the blog.

To see how it looks like in action, see the below image:

Blogger Recent Posts widget

Below is the code. You can download it from here. Copy the contents of the file and paste it in the HTML/JavaScript widget.

<!-- Recent Posts -->
<script type="text/javascript">
function recentpostslist(json) {
 document.write('<ul>');
 for (var i = 0; i < json.feed.entry.length; i++)
 {
 for (var j = 0; j < json.feed.entry[i].link.length; j++) {
 if (json.feed.entry[i].link[j].rel == 'alternate') {
 break;
 }
 }
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";
var entryTitle = json.feed.entry[i].title.$t;
if ("content" in json.feed.entry[i]) {
 var postContent = json.feed.entry[i].content.$t;}
else
 if ("summary" in json.feed.entry[i]) {
 var postContent = json.feed.entry[i].summary.$t;}
 else var postContent = "";
// strip off all html tags
var re = /<\S[^>]*>/g;
postContent = postContent.replace(re, "");
// reduce postcontent to numchar characters
if (postContent.length > 130) {
 postContent = postContent.substring(0,127) + "...";}
var item = "<li>" + "<a href=" + entryUrl + '" target="_blank">' + entryTitle + "</a></br>" + postContent + "</br></br></li>";
 document.write(item);
 }
 document.write('</ul>');
 }
</script>
<script src="http://blogname.blogspot.com/feeds/posts/summary?max-results=5&alt=json-in-script&callback=recentpostslist"></script>
<!-- Recent Posts by Label End -->

Signature

4 Comments

  1. MohitMohit01-29-2012

    Why are you giving tutorials if your readers can’t copy the codes.If some one copying your articles then report it to DCMA or other sites.Many of your users are getting irriteted because of disabled right clicks. can’t even correct spellings while writing comment.
    There are lot of ways to copy your articles there is no use of disabling right clicks….
    Very bad idea of disabling right click…..

  2. PoetraPoetra06-14-2011

    man whats the point to made this tutorial if your reader even cant copy the code (recent post code) >.< too over protective IMHO

    find another blog again …. wew …

    • Vijay PadiyarVijay Padiyar06-14-2011

      Hi Poetra

      Thanks for bringing it to my attention! I will make a workaround for this particular article and mail you back.

      Sorry for the copying restriction. I had to put it in place because some sites had plagiarised my articles without even giving accreditation.

      Regards

      Vijay

Leave a Reply