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


Recent Posts Widget with post snippets





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





Recent Posts Widget with post titles only




<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



Recent Posts Widget with Post Summary And Read More




<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! =)










Many thanks to bloggerplugins for making this code and I just tested and modified to work on blogger


20 comments:

  1. yea! finally. i got it. done. tq for the information. :)

    ReplyDelete
  2. I am reading this late but it is really awesome to see a widget like. blue widget

    ReplyDelete
  3. This is a really good read for me, Must admit that you are one of the best bloggers I ever saw.Thanks for posting this informative article

    ReplyDelete
  4. I recently came across your site and have been reading along. I thought I would leave my first comment. I don't know what to say except that I have enjoyed reading. Nice site. I will keep visiting this site very often.
    interview questions

    ReplyDelete
  5. Very nice post. I simply stumbled upon your weblog and
    wished to say that I've really loved browsing your blog posts. In any case I'll be subscribing in your
    rss feed and I'm hoping you write again very soon!
    Feel free to visit my blog ... thanksgiving desktop photos

    ReplyDelete
  6. http://www.Saeedbaba.com

    very nice post and nice blog

    ReplyDelete
  7. Nice Widget dear thanks for sharing with us.
    Regards
    Www.howinblogger.org

    ReplyDelete
  8. Very nice post.Nice Widget dear thanks for sharing with us.
    http://www.circlestech.com/

    ReplyDelete
  9. Hi,

    Thanks for the nice Blog. If your searching more these kinds of nice blog please visit at Free Blog Site

    Thanks

    ReplyDelete
  10. Nice Post
    Watch T20 World cup live
    Home

    ReplyDelete
  11. Very informative article,its great for introduce new technology in modern World.Great article. Thanks for sharing!
    Education Essays

    ReplyDelete

  12. Thank you! It is done. Very useful post. I spent much time thank to you.
    Education Essays

    ReplyDelete
  13. Looking forward to more of the information.

    ReplyDelete
  14. That's very genuine blog post shared.

    ReplyDelete

 
Top