Create Custom Blogger Recent Posts Widget For Blogspot Blog

How to display the most recent posts widget to the sidebar of your Blogger blog? The usual way of adding recent post is by using the “Feed” Gadget which is available in the Blogger Layout section itself. But there are many limitations to that. There is no option to change the default style and the number of posts which the Gadget render. Today let us create our own Custom Blogger Widget to display most recent posts.
Blogger is without doubt is one of the most popular blogging platform. But when compared to wordpress the availability of plugins or widgets for Blogger is less. There are some very good plugins are available for various purposes.

Create Custom Blogger Recent Post Widget

We can create a recent posts widget for blogger in few steps. Before that let me explain the method we follow to create the widget. This widget make use of JSON and Your Blogger blogspot blog feed.
Atom is Google Data’s default format. You can access your blogs feed and by default you will get the feed which is i ATOM format. We are using the JSON format of the feed to create our Recent Posts Widget. To request a feed in JSON format, we need to use the alt=json parameter.
For example the below code will give you the feed in JSON format.

1

http://myblogexample.blogspot.com/feeds/posts/default?alt=json

To request a feed that wraps JSON in a script tag, use the alt=json-in-script parameter. usually there will be a reference to the callback function by adding the callback=functionName

1

http://myblogexample.blogspot.com/feeds/posts/default?alt=json-in-script&callback=myjavascriptfunction

We will process the JSON script and will display the Recent posts in the widget.
If you are adding our recent posts widget to your sidebar. Please follow the following instructions.

• Login to your Blogger account.
• Click on Layout.
• Click on Add a Gadget.
• Select “HTML/JavaScript”
• Add the following code in the gadget code section.

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

  <style> .recentposts{ padding: 1px; border: 1px solid #000; border-width: 0px;width:380px; display: block; } .recentposts a { border: 1px solid #fff;display: block; text-decoration: none; padding: 5px 2px 5px 5px; color: ##0000CC; font-size: 14px; background: #FFDECE;width:380px; } .recentposts ul {width:380px;list-style-type:square;float: left;} .recentposts li{list-style: square;margin: 0;font-size:12px;padding: 0px 1px 0px 3px;}   </style> <h3>Most Recent Posts</h3> <div class ="recentposts" id="latestposts"></div> <script> function listEvents(root) { var feed = root.feed; var entries = feed.entry || []; var html = ['<ul>']; for (var i = 0; i < entries.length; ++i) { var entry = entries[i]; var posturl; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { posturl = entry.link[k].href; break; } } var title = entry.title.$t; title = "<span class="removed_link" title="+posturl+">"+title+"</span>" var start = (entry['gd$when']) ? entry['gd$when'][0].startTime : ""; html.push('<li>', start, ' ', title, '</li>'); } html.push('</ul>'); document.getElementById("latestposts").innerHTML = html.join(""); } </script> <script src="http://globinch.blogspot.com/feeds/posts/default?max-results=10&alt=json-in-script&callback=listEvents"> </script> <ul>

  <style> .recentposts{ padding: 1px; border: 1px solid #000; border-width: 0px;width:380px; display: block; } .recentposts a { border: 1px solid #fff;display: block; text-decoration: none; padding: 5px 2px 5px 5px; color: ##0000CC; font-size: 14px; background: #FFDECE;width:380px; } .recentposts ul {width:380px;list-style-type:square;float: left;} .recentposts li{list-style: square;margin: 0;font-size:12px;padding: 0px 1px 0px 3px;} </style> <h3>Most Recent Posts</h3> <div class ="recentposts" id="latestposts"></div> <script> function listEvents(root) { var feed = root.feed; var entries = feed.entry || []; var html = ['<ul>']; for (var i = 0; i < entries.length; ++i) { var entry = entries[i]; var posturl; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { posturl = entry.link[k].href; break; } } var title = entry.title.$t; title = "<span class="removed_link" title="+posturl+">"+title+"</span>" var start = (entry['gd$when']) ? entry['gd$when'][0].startTime : ""; html.push('<li>', start, ' ', title, '</li>'); } html.push('</ul>'); document.getElementById("latestposts").innerHTML = html.join(""); } </script> <script src="http://globinch.blogspot.com/feeds/posts/default?max-results=10&alt=json-in-script&callback=listEvents"> </script> <ul>

• In the above code you need to change the last line as follows
• Change the “globinch.blogspot.com” with your blogspot blog name
• You can increase/reduce the number of items to display by changing the value “max-results=10” to a different count.
• You can change the CSS style by changing the code at the beginning and between the tags. Apply your own CSS that suites your blogs look and feel.
• Save and check the page.

If you need further customization of the widget please add in the comment section or mail me.

Before you Go,

Before you go, subscribe to get latest technology articles right in your mailbox!.

EmailEnter your email address

Subscribe