Breaking News
recent

Recent Posts Widget With Thumbnails For Blogger Blog

In this post, we are going to see "How to Add a Recent Posts" widget to your blog. The "Recent Posts" widget with thumbnails will help the blog visitors to find the recent posts quickly.

This is one more widget which will help your blog to gain traffic and it even adds a good look to your blog. It will improve the user experience of your blog many folds.

The Recent posts widget will boost the website/blog performance by reducing the bounce rate and the amount of time a user spend on your blog/website.


This widget shows the title of the post, thumbnail and a small summary.

So, let's check out "How To Add Recent Posts Widget with Thumbnails"-

Step 1: Go to Blogger Dashboard - Click on Layout

Step 2: Click on "Add a Gadget"

Step 3: Select "HTML/JavaScript" from the list. Copy and Paste the below 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='http://recent-post-techkgp.googlecode.com/files/recent%20post_www.techkgp.com.js'></script>
<script style='text/javascript'>
var numposts = 5;
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.technogadgetworld.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script> 


Customization:
  • Change the URL "http://www.technogadgetworld.blogspot.com" with your own blog address.
  • Change the numposts = 5 value with any number of posts you want on your Recent Posts Widget.
  • Change the numchars = 100 value with any number of characters you want to show in summary of Recent Posts.
  • Change the true to false to activate or deactivate any feature of this widget.
Step 4: Now save the widget. And save the arrangement and Visit your blog.

Congrats. You have now added the "Recent Posts" widget on your blog.

If you have any doubts or suggestions. Please comment below.

14 comments:

  1. Thanks for the tutorial! Worked great.

    ReplyDelete
  2. How to generate if the url is "http://pinterest.com/ceylonist/feed.rss"

    ReplyDelete
  3. More and more stunning stuff, now my blog is full of your widgets.I am starting to be your avid fan


    Thank you so much

    ReplyDelete
    Replies
    1. You're welcome. And, I'm glad my posts helped you to reshape your blog. Happy blogging. :)

      Delete
  4. I'm not getting Any thumbnail.Please Help me......

    ReplyDelete
    Replies
    1. Maker sure your posts does have a picture. And, check whether "showpostthumbnails = true".

      Delete
  5. It doesn't update with newer posts.

    ReplyDelete
  6. Is there a way to not have the words in italics?

    ReplyDelete
    Replies
    1. You need to add the following code/tag in 4th and 7th line after font size - Add this tag from this bracket [font-style: italic;]

      If you still have any doubts please comment back. We will be pleased to help you.

      Thank you

      Delete
  7. Hi Ather,
    I think you did not understand what Tina asked you. She asked the method to disable italic sentences in snippets. Even I'm asking the same question - how to disable showing italic sentences in snippets? Is it possible?

    ReplyDelete
  8. Thanks for sharing this informative article. I, hope this recent post widget will make my blog attractive.

    ReplyDelete
  9. The tristian tate age was designed with the user experience in mind, including a straightforward, user-friendly structure that makes navigation a snap.

    ReplyDelete

All rights reserved by TechnoGadgetWorld or TGW. © Copyright protected 2012-2015. Powered by Blogger.