How to add Recent post widget/gadget in blogger blog.

How to add Recent post widget/gadget in blogger blog.

• Log into Blogger.com
• Go to Blogger Dashboard.
• Click on Layout
• Than Click on Add a Gadget.

 5 Type of Recent Post Widget Blogger Widgets/Gadgets

• Now choose html/Javascript .
• Now copy paste your desired code from below.

 5 Type of Recent Post Widget Blogger Widgets/Gadgets

Scrolling/Ticker Recent Post Widget

It is a scrolling recent post widget for blogger blog.this recent post widget with thumbnails will show images on the right hand side and post titles in the left side with details or snippets.there are lots of options for customization if you want.i think it is the best animated recent post widget with thumbnails.

 5 Type of Recent Post Widget Blogger Widgets/Gadgets

<style>img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:right;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;}</style> <script style='text/javascript' src="https://dl.dropbox.com/s/ercbfzxm41o63i4/NBTjQuery-scrolling-ticker.js" ></script> <script style='text/javascript' src='https://dl.dropbox.com/s/mzcmuhcas156xhx/NBTscrollingRP.js'></script> <script style='text/javascript'> var numposts = 10; var showpostthumbnails = true; var displaymore = false; var displayseparator = false; var showcommentnum = false; var showpostdate = false; var showpostsummary = true; var numchars = 100; $(document).ready(function () {$('#sai').vTicker({ speed: 500, pause: 3000, showItems: 3, animation: 'fade', mousePause: false, height: 0, direction: 'up' });}); </script> <div id="sai"> <script src='http://www.rohanmod.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script> </div>

Stylish Animated Recent Post Widget

It is a animated recent post widget for blogger blog as blogger widget.this recent post widget shows thumbnails or images on the left side and post titles on the right side along with it shows the number of comments for the specific posts.best blogger widget in category ofanimated recent post widget with thumbnails.

 5 Type of Recent Post Widget Blogger Widgets/Gadgets

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
.spydate{
overflow:hidden;
font-size:10px; }

#spylist ul{
width:350px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:230px;
background: #1ed2f2;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 1px 10px !important;
-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;border: 0 none !important;-webkit-border-top-left-radius:40px;-webkit-border-bottom-right-radius:40px;-moz-border-radius-topleft:40px;-moz-border-radius-bottomright:40px;border-top-left-radius:40px;border-bottom-right-radius:40px;
}

#spylist li:hover {
background: #84f6f5;

}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}

#spylist li img {
float:left;
margin-right:5px;
margin-top:3px;
background:none;
border:0;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>
<script language='JavaScript'>


imgr = new Array();

imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;

boxwidth = 255;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 70;

thumbheight = 70;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = false;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 5;

home_page = "http://rohanmod.blogspot.com/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
<script src='http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/recentpostthumbspy-min.js' type='text/javascript'></script>
</div><a style=" float:right;font-size:8px; color:#3B78CD; text-decoration:none;" href="http://rohanmod.blogspot.in/2013/03/5-type-of-recent-post-widget-blogger.html">Blogger widget</a>

Recent Post Widget With snippets and without snippets

This recent post widgets has two variations first blogger widget recent post widget is with snippets or details of post and second recent post widget is with post titles only.both are very fast in loading.best simple recent post widget in category of blogger widget.

 5 Type of Recent Post Widget Blogger Widgets/Gadgets

<div id="hlrpsa">
<script src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-snippets.js">
</script>
<script>
var numposts = 5;var showpostdate = false;var showpostsummary = true;var numchars = 100;var standardstyling = true;
</script>
<script src="YOUR-BLOG/SITE-URL/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts">
</script></div>
<div id="rpdr" style="font-family: arial, sans-serif; font-size: 9px;">
<a href="http://rohanmod.blogspot.in/2013/03/5-type-of-recent-post-widget-blogger.html" target="_blank" title="Rohanmod">Recent Posts Widget</a> by <a href="http://rohanmod.blogspot.com" title="Recent Posts Widget">rohanmod</a></div>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
#hlrpsa a {color: #0B3861; font-size: 13px;} #rpdr {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9h6i47lpfVI5qdQjrEp5U8OVYGMnPZ8IkUAGozNj99ZPgs7Khi9ed8X3TXu23jVOghayLrSpjSfYeRx_euIxaZu3q_NXOIx6-R3RmjkuaBgUqNUJvxmYBf2T4grCVHua6zoEbj-h1KYe6/s1600/blogger.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;}
#hlrpsa { color: #999999; font-size: 11px; border-bottom:1px #cccccc dotted; margin-top:-10px; padding-bottom:10px;}
.hlrps a {font-weight:bold; }
.hlrpssumm {}
</style>

Recent Post widget without snippets

<div id="hlrpsb">
<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-titles-only.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://your-blog.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://rohanmod.blogspot.in/2013/03/5-type-of-recent-post-widget-blogger.html" title="Grab this" target="_blank">Recent Posts Widget</a> by <a href="http://rohanmod.blogspot.com" title="Recent Posts Widget">rohanmod</a></div><noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type=text/css>
#hlrpsb a {color: #0B3861; font-size: 13px;} #rpdr {background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9h6i47lpfVI5qdQjrEp5U8OVYGMnPZ8IkUAGozNj99ZPgs7Khi9ed8X3TXu23jVOghayLrSpjSfYeRx_euIxaZu3q_NXOIx6-R3RmjkuaBgUqNUJvxmYBf2T4grCVHua6zoEbj-h1KYe6/s1600/blogger.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;}
.bbrecpost2 {
padding-top:6px;
padding-bottom:6px;
border-bottom: 1px #cccccc dotted; }
</style>

Recent Post Widget with thumbnails.

It is most widely used recent post widget with thumbnails for blogger blog.you can see this recent post widget with thumbnails or images  in many websites and blogs.it is very fast in loading and attractive also.these are reasons why most of the bloggers using this recent post widget with thumbnails.  This recent post widget with thumbnails has images on the left side and post titles and descriptions below the post title.so it is covering every aspect of a post like image/thumbnails,Post title,Snippets/Description.fast in loading and attractive.A complete recent post widget with thumbnails.

 5 Type of Recent Post Widget Blogger Widgets/Gadgets

<div class="eggTray">
<script src="http://helplogger.googlecode.com/svn/trunk/listbadge.js">{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list",
"pipe_params":{"URL":"YOUR-BLOG/SITE-URL/feeds/posts/default"},
"hideHeader":"false","height":"500","count": 8 }</script>
<div style="font-family: arial, sans-serif; font-size: 9px;" class="ycdr"><a href="http://rohanmod.blogspot.in/2013/03/5-type-of-recent-post-widget-blogger.html" target="_blank" title="Grab this widget">Recent Posts Thumbnails</a> <a href="http://rohanmod.blogspot.com/" target="_blank">Blogger Widget</a></div><noscript>Your browser does not support JavaScript!</noscript></div>
<style type=text/css>
.eggTray {margin:10px 0px;padding:0px;}
.ybr li {border-bottom:0px #cccccc dotted; padding:0px 0px 10px 0px!important;}
.pipesTitle {padding-top:0px;}
.pipesDescription {display:true;}
.ycdr {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoVuwHZp2nYVP86xxniFNxCdGZsurKZwgaL5p9xVlmQztXQuC9zm4E29_eVk9yYiFFLogYg3VShyphenhyphenMhdVZm72Q6nvpuQIHNDTG3l-epUI3yEramHzHI_Qq00Co4XjZlJDvzlGsdQZuT2KE/s1600/logo.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 4px 0px 0px 0px;line-height:14px;}
.ycdr, .ycdr a {color:#999999;}
.widget .popular-posts ul {padding-left:0;}
</style>

Blogger widget customization

Insert your blog url where YOUR-BLOG/SITE-URL is present.