JSON stand for “JavaScript Object Notation” is a lightweight data-interchange format.
A feed is a data format used for providing users with frequently updated content. Content distributors syndicate a web feed, thereby allowing users to subscribe to it. It gives users a way to keep up with many sites on the web without having to visit each site individually to see if they have updated.
Now, we will process the JSON script and will display the Recent posts in the widget. Please follow the steps below.
1. Login to your Blogger account.
2. Click on Layout.
3. Click on Add a Gadget.
4. Select “HTML/JavaScript”
5. Add the following code in the gadget code section.
<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 = "<a href="+posturl+">"+title+"</a>" 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://example.blogspot.com/feeds/posts/default?max-results=10&alt=json-in-script&callback=listEvents"> </script> <ul> |
6. In the above code, don’t forget to change “example.blogspot.com” with your blogspot blog name.
> You can increase/decrease the number of items to display by changing the value “max-results=10″ to a different count (optional).
> You can change the CSS style to your own by changing the code at the beginning and between the tags (optional).
7. Save and View it.
(If you have any question, please refer "Help" tab).
(If you have any question, please refer "Help" tab).
