Recent Posts Widget for Blogger / Blogspot with Summary And Read More

Showing the most recent posts widget to the sidebar of your Blogger blog? Recent Posts Widget had this great feature as the posts of his latest show with their titles, abstracts with a publication date. This widget allows you to set the number of posts displayed and also allow you to set the number of s characters.Today let us create our own Custom Blogger Widget to display most recent posts.


Read More :
1. Recent Posts Widget for Blogger Text CSS Hover Effect with jQuery
2. Animated Recent posts for Blogger with Thumbnails - Simple Spy

Live Demo

Recent Posts Widget with post snippets


1. Go to Blogger Dashboard >> Layout >> Add a gadget >> Add HTML/Javascript Box.

2. Paste the following code in HTML/Javascript Box.

<script style="text/javascript" src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts-ot/recent-posts-snippets-ycode.js"></script><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="My Blogger Tricks"><img alt="My Blogger Tricks" border="0" src="https://bitly.com/24workpng1" style="position: fixed; bottom: 10%; right: 0%; top: 0px;"/></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="All Blogger Tricks"><img alt="All Blogger Tricks" border="0" src="https://bitly.com/24workpng1" style="position: fixed; bottom: 10%; right: 0%;"/></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="All Blogging Tips"><img alt="All Blogging Tips" border="0" src="https://bitly.com/24workpng1" style="position: fixed; bottom: 10%; left: 0%;"/></a><script style="text/javascript">
var showpostdate = false;
var showpostsummary = true;
var numchars = 100;
var standardstyling = true;
var numposts = 5;
</script>
<script src="http://bdlab.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>

Recent Posts Widget with post titles only

Live Demo

<script style="text/javascript" src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts-ot/recent-posts-titles-ycode.js"></script><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="My Blogger Tricks"><img alt="My Blogger Tricks" border="0" src="https://bitly.com/24workpng1" style="position: fixed; bottom: 10%; right: 0%; top: 0px;"/></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="All Blogger Tricks"><img alt="All Blogger Tricks" border="0" src="https://bitly.com/24workpng1" style="position: fixed; bottom: 10%; right: 0%;"/></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="All Blogging Tips"><img alt="All Blogging Tips" border="0" src="https://bitly.com/24workpng1" style="position: fixed; bottom: 10%; left: 0%;"/></a><script style="text/javascript">
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
var standardstyling = true;
var numposts = 10;
</script>
<script src="http://bdlab.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>

Recent Posts Widget with Post Summary And Read More

Live Demo

<script style="text/javascript" src="http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts-ot/recent-posts-more-ycode.js"></script><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="My Blogger Tricks"><img alt="My Blogger Tricks" border="0" src="https://bitly.com/24workpng1" style="position: fixed; bottom: 10%; right: 0%; top: 0px;"/></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="All Blogger Tricks"><img alt="All Blogger Tricks" border="0" src="https://bitly.com/24workpng1" style="position: fixed; bottom: 10%; right: 0%;"/></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="All Blogging Tips"><img alt="All Blogging Tips" border="0" src="https://bitly.com/24workpng1" style="position: fixed; bottom: 10%; left: 0%;"/></a><script style="text/javascript">
var showpostdate = false;
var showpostsummary = true;
var numchars = 100;
var standardstyling = true;
var numposts = 5;
</script>
<script src="http://bdlab.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>

There are many variables in this script that you need to adjust to blend the widget’s look with that of your blog template. Most of them are self explanatory.

1.In the code, look for the line…

http://bdlab.blogspot.com/feeds/posts/default
and replace the blog address with your own blog address

2.How to change the number of posts

By default, this widget is set to display a maximum of 5 recent posts. To change this number,

var numposts = 5

edit line in the code and replace the number 5 with the number of posts desired:


3.How to change the Number of Characters (Excerpt)


This widget is set to display an excerpt of 100 characters of each post. If you want to change that number, just look for the number 100 in the code and replace it with the number of characters you want to be displayed.

Recommended setting: 50 to 100.

var numchars = 100;

4.How to Show Post Date

If you want to show the post date, look for the line with the word showpostdate in the code. Then change its value from false to true (shown in color red below).

var showpostdate = false;

Happy Blogging! =)

Share on Google Plus

About Unknown

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.