Adding Recent Posts With Thumbnails Widget To Blogger

Published on December 14, 2012

Hi guys how you doing? I am working with blogger around 2 years but last 3 months really great time. I have learned a lot of things in blogger in these 3 months. I want to share all my knowledge with you. I got good grip on Blogger-API and Blogger Template coding. Wait a sec! Way I am telling all this today. Its because today I Lunched new Blogger-Labs. From now I Put together all blogger related thinks on Blogger-Labs. I will try to explain all things I have done with blogger (tweaks and tips I have done with my blog). To-day’s post about how to add recent posts widget to blogger blog.

If you want to see the demo. This blog it self has it. You can also see it form above demo link on Blogger-Labs. How to add step by step 1)Go to you blogger accounts Dashbord. 2)Layout>Add a Gadget 3)Select HTML/Javascript Gadget 4)Copy the below code and past it in that widget and give name as “Recent Posts”.

<style type="text/css">
  img.recent_thumb {
    padding: 0px;
    width: 76px;
    height: 72px;
    border: 4px solid #ddd;
    float: left;
    margin: 0 5px 0 0;
  }
  .recent_posts {
    float: left;
    width: 100%;
    min-height: 70px;
    margin: 5px 0px 5px 0px;
    padding: 0;
    font-size: 14px;
  }
  .recent_posts li {
    padding-bottom: 0px;
    padding-top: 5px;
    min-height: 65px;
  }
  .recent_posts b {
    font-weight: inherit;
  }
  .recent_posts a {
    text-decoration: none;
  }
  .recent_posts strong {
    font-size: 10px;
  }
</style>
<script
  style="text/javascript"
  src="//labs.techumber.com/LABS/js/blogger/recentposts/recent-posts.js"
></script>
<script style="text/javascript">
  var numposts = 5;
  var showpostthumbnails = true;
  var showpostsummary = true;
  var numchars = 95;
</script>
<script src="**//www.techumber.com/**feeds/posts/default?orderby=published&alt=json-in-script&callback=recentposts"></script>

5. Change the //www.techumber.com/ to your blogger url. 6)your can also change number of posts to be display using numpost variable. 7)Now save your Gadget. That’s it now you can see recent post on your blog.