How to Install A Simple Recent Post Widget in Blogspot blog - Today I'm going to share a simple recent post widget that may have been familiar for bloggers. This widget still has the same function with the recent post widget with navigation ever I shared before, which is to bring a feed of the latest posts on our blog. The only difference of this widget is that, it does not display the thumbnails of the post. It's quite simple, which makes this widget light and helps to load your blog faster.
Before you add this widget on your own blog, make sure to take a look of this widget by clicking on the below demo button.
If you like this widget and want to install it on your own blog, then simply follow the below simple steps.
How to install recent post widget on blogger
At the first visit to your blogger dashboard - Visit
Go to the "Layout" section.
Click on "Add a gadget".
Now select the "HTML/JavaScript" option.
Copy the below code and paste it in "Html/JavaScript" box.
<style scoped='' type="text/css">
ul#recent-posts{list-style:none;margin:0;padding:0}li.recent-posts{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-word;padding:10px 0;margin:0;}
li.recent-posts:last-child{border-bottom:0;}
li.recent-posts a{color:#444;}li.recent-posts a:hover{color:#444;text-decoration:underline}
</style>
<ul id="recent-posts"></ul>
<script>
//<![CDATA[
var homePage = "http://www.askwithloud.com",
numPosts = 5;
function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="recent-posts"><a href="'+link+'" title="'+title+'" target="_blank" rel="nofollow">'+title+'</a></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp);
//]]>
</script>
Note- Replace the above highlighted URL with your own blog URL.
Note- Replace the above highlighted number according to your need.
After that, click on the save button, then refresh your blog and see the magic.
That's it! I hope you like this widget! Stay tuned for more cool widgets! Thanks for reading +Prince Chaudhri
0 Comment to "Simple Recent Post Widget For Blogger"
Post a Comment