Recent Posts Widget for Blogger (blogspot) blog

Many Bloggers use a Feed widget to display links to recent blog posts. However, when using this widget, we are limited to display only 5 items or less.So I have created a widget which allows you to display more than 5 recent posts. You can customize the title and choose how many posts you would like to display, then install directly to your blog at the click of a button!To install your own recent Post widget in your Blogger layout, simply follow these steps:

17+ Featured Content Slider for Blogger Using jQuery Tutorial

Recent Posts Widget with post snippets 



So, let's see how to install this cool widget in your blog..

STEP #1
Log in to Blogger, go to Design ->

Add a Gadget of HTML/JavaScript type.

<div id="24work">
<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script style="text/javascript" src="http://safir85.ucoz.com/bdlab-blogspot/24work/recent-posts/recent_posts_widget_with_snippets.js"></script>

<script style="text/javascript">var numposts = 5;var showpostdate = false;var showpostsummary = true;var numchars = 100;var standardstyling = true;</script>

<script src="http://24works.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>

<div style="font-family: arial, sans-serif; font-size: 9px;" id="rpdr"><a href="http://24work.blogspot.com/2011/12/recrecent-posts-widget-for-blogger.html" title="Grab this Recent Posts Widget" target="_blank">Recent Posts Widget</a> by <a href="http://24work.blogspot.com" title="Recent Posts Widget">Blogger Widgets</a></div><noscript>Your browser does not support JavaScript!</noscript>

<style type=text/css>

#rpdr {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH7pVeJw_YtM67y-bq6IrhodkFFboJDjoU5bzKmZIiRTRqe1KIbEXBhk5RzJD3L9KQPG_jstMervIQRUmi9Dy7M6FL1C-KSb5iT8nLlgV-oeGBs8e2CSd_1vYLYafgBbHVQ0fRZZMzAJAL/s300/blgo.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}



#rpdr, #rpdr a {color:#808080;}

#mtrpwa { border-bottom:1px #cccccc dotted; margin-top:-10px; padding-bottom:10px;}

.mtrpw a {font-weight:bold; }

.mtrpwsumm {}

</style></div>

Now Click Save

















Recent Posts Widget with post titles only 

So, let's see how to install this cool widget in your blog..

1. Sign into Blogger dashboard

2. Go to Design » Add a gadget » html/javascript

3. Just copy and paste this code..

<div id="24work">

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script style="text/javascript" src="http://safir85.ucoz.com/bdlab-blogspot/24work/recent-posts/recent_posts_widget_post_titles.js"></script>

<script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>

<script src="http://24works.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div>

<div style="font-family: arial, sans-serif; font-size: 9px;" id="rpdr"><a href="http://24work.blogspot.com/2011/12/recrecent-posts-widget-for-blogger.html" title="Grab this Recent Posts Widget" target="_blank">Recent Posts Widget</a> by <a href="http://24work.blogspot.com" title="Recent Posts Widget">Blogger Widgets</a></div><noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>

<style type=text/css>

#rpdr {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH7pVeJw_YtM67y-bq6IrhodkFFboJDjoU5bzKmZIiRTRqe1KIbEXBhk5RzJD3L9KQPG_jstMervIQRUmi9Dy7M6FL1C-KSb5iT8nLlgV-oeGBs8e2CSd_1vYLYafgBbHVQ0fRZZMzAJAL/s300/blgo.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}

#rpdr, #rpdr a {color:#808080;}

#mtrpwb { }

.bbrecpost2 {

padding-top:6px;

padding-bottom:6px;

border-bottom: 1px #cccccc dotted; }

</style>

Now Click Save









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://24works.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! =)

UPDATE:  I updated some of my posts, this post I update Recent Posts Widget for Blogger / Blogspot with Summary And Read More........