HomeBlogger Tricks

How to Add Recent Post Widget with Thumbnails in Blogger Blog

Like Tweet Pin it Share Share Email
Blogger is Best Platform to run a Blog free without hosting , it provides good quality and Good Page Opening speed for each blog . So, come to Point as you know here I am Sharing “How to Add Recent Post Widget with Thumbnails in Blogger Blog” yeah right. Blogger widget is also best way to optimize your blog and Increase little Traffic on your Blog .

So, this is Recent Post widget it means when you will post anything on your blow then this will automatically add your post here in the list to show and attract the visitors. As I said Attract the Visitor  , yes because this Widget also show thumbnail of your post in other words Logo of your Post . SO without Wasting your Time I am starting ..

Recent Post Widget with Thumbnails :-

Go to Your blogger blog Panel-> Layout -> Add a Gadget -> HTML/JAVA Script

#1. Now you will see a window there 2 box First one is Title There you can fill by your Choice.

#2. In Second Box Past Given below Code there in Body named Box.

<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=’http://recent-post-techkgp.googlecode.com/files/recent%20post_www.techkgp.com.js’></script>

    <script style=’text/javascript’>

    var numposts = 7;

    var showpostthumbnails = true;

    var displaymore = false;

    var displayseparator = true;

    var showcommentnum = false;

    var showpostdate = false;

    var showpostsummary = true;

    var numchars = 100;</script>

    <script src=’http://www.onlyloudest.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs’></script>

                                                              

Customization of Widget :

·        Change Only Red Colored words.
             ·       var numposts = 7;  here only change the no. I mean replace digit on place “7” . It means it will show No. of 7 Post on Home Page by this Widget You can Increase or Decrease it.
              ·        And Second only change you domain name on Replace “Onlyloudest.com” .

And now No need to More Change , Click on “Save” button and then Save changes in layout page. Now come to your Blog And refresh page and see changes.