Show Recent Latest Post with Thumbnail Image in Blogger

How to Display Latest Recent posts in blogger (blogspot) Show any number of posts and topic in yo widget area it’s easy below make you to enable Comments, Date, post summary, and read more link. we already shared many blogger tutorial with you.

Follow these very simple steps to add the “Recent Posts Widget Blogger with Thumbnails” in your blog.

• Go To Blogger > Design > Page Elements


• Click on “Add a Gadget” link


• From the pop-up window, choose HTML/JavaScript


• Copy and paste the following code below and save

 Recent Post Widget Code 1:

       <div class="$bs-recent-posts-widget">
        <script src="http://helplogger.googlecode.com/svn/trunk/listbadge.js">{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list",
        "pipe_params":{"URL":"http://www.srdelta.com/feeds/posts/default"},
        "hideHeader":"false","height":"","count": 7 }</script>
        <div style="font-family: arial, sans-serif; font-size: 9px;"><a href="http://www.wrock.org" target="_blank" title="Grab this template">Recent Posts Widget With Thumbnails</a></div><noscript>Your browser does not support JavaScript!</noscript></div>
        <style type=text/css>
        .$bs-recent-posts-widget {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/AVvXsEiqfZKgWVrnXv1dWnJXA_93_TaNVcQKZiJeERAsHnOF3EB50-r9z7Jj2U5rJfXx-2uCv2qneQG3AKIBeZistqs9lrYCyu8vZmYGXhv5ofeC8oXkYCAhZkJXnl1WcnC7HHX1SSDV8B-iLw4/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>

Make changes according to your requirement like:

.pipesDescription {display:true;} – Change true or false to show to hide description in recent post widget.

“count”: 7  – this numbers of post you want show in widget like 7 or 5

“URL”:”http://www.vdreamz.com/feeds/posts/default” – change this with your own rss feed link.

Diff. Method and code 2:

Upload and try this code same method above if previous widget does not work use this what you need to change in  this code mention after code.

<style type='text/css'>
img.recent_thumb {padding:1px;width:55px;height:55px;border:0;
float:left;margin: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='<a href="https://bloggerrecent.googlecode.com/svn/wrock-org-blogger.js">https://bloggerrecent.googlecode.com/svn/wrock-org-blogger.js</a>'></script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;</script>
<script src='http://bolly2u.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
<hr/><small><a href='http://www.wrock.org/' target='_blank'>Wrock.Org</a></small>

• Change bolly2u.blogspot.com to Your Blog address


• Change numposts = 5 to Show number of Recent posts with thumbnails


• Change numchars = 100 to number of characters to show in summary of recent posts


• Change true to false to activate or deactivate any feature of this widget


• Don’t Forget to Save it

You can also change the design of this widget using CSS codes.