Blogger, Blogger Hack

Show Recent Posts With Thumbnail from Particular Label/Category in Blogger

14 178
Show Recent Posts from Particular Label/Category in Blogger

Hey Blogger friends, Today i have come up with another cool blogger hack. It’s about showing recent posts with/without thumbnail from any particular label/category in blogger. As you can see in my sidebar, I have listed recent posts from each category, but i have done this in wordpress. So if you want to do same with your blogger blog, You just need to add some simple script to your blogger template. You can find some default gadgets in blogger “Add page element” section to show recent posts, but they don’t provide an option to show recent posts from a particular category. So in this post, I will guide on how to show the recent posts with thumbnail in blogger.

Know The Code

Before installing the code, you must know what the code contains and how can you use it.

<script style='text/javascript' src='https://smashingtips.com/blogger/recent.js'></script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
</script>
<script src='https://smashingtips.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=recent'></script>

As you can see in the above snippet, we got 5 variables.

var numposts =3;

This line controls the number of recent posts shown. You can change the number ‘3’ to any number you wish.

var showpostthumbnails = true;

This is used to enable or disable thumbnails in the recent posts. You can either have them or disable them. It’s your wish. To enable thumbnail, you must set it “true” and to disable it set it to “false”.

var showcommentnum = true;

You can either show the number of comments or disable it. It’s also same as before, you must set it to “true” to enable the comment and set it to “false” to disable it.

var showpostdate = true;

It’s used to show the date. Either set it to “true” to show date or set it to “false” to hide it.

<script src='https://smashingtips.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=recent'></script>

This line tells the json to pull recent posts from which blog. You need to edit this link to show recent posts of your blog or just show recent posts from a particular category.

To show recent posts from your entire blog, you can just change the domain “https://smashingtips.com” to your blog domain.

If you want to show the recent posts from a specific label, then you need to change the link that line of code to below this.

<script src='https://smashingtips.com/feeds/posts/default/-/featured?orderby=published&alt=json-in-script&callback=recent'></script>

In the above code, you need to change two parameters. First one is the domain name and the second one is the category name. For example, i want to show recent posts from label called “featured”, so i used its name in that link.

If you want to use this script either to show featured posts or for showing recent posts from other existing categories in your blogger blog, then just change the keyword “featured” to your label name.

Installing the widget

To add the recent posts from particular category, Just follow the below steps

  • Login to your Blogger Account
  • Select your blog
  • Navigate to the Layout page of your blog
  • Select Add a gadget in the layout where you want to add
  • Choose HTML/Javascript gadget

  • Place the following code in the text area and give it a title as you wish
<script style='text/javascript' src='https://smashingtips.com/blogger/recent.js'></script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
</script>
<script src='http://9gagbloggerclone.blogspot.in/feeds/posts/default?orderby=published&alt=json-in-script&callback=recent'></script>

Remember to change your name of blog and other parameters. The above code is to show recent posts of your blog.

If you want to show recent posts from particular category, then you must add the following code instead of the above one.

<script style='text/javascript' src='https://smashingtips.com/blogger/recent.js'></script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
</script>
<script src='http://9gagbloggerclone.blogspot.in/feeds/posts/default/-/categoryname?orderby=published&alt=json-in-script&callback=recent'></script>

As you read in the beginning itself, remember to change the parameters as you wish.

Styling your Recent Posts

The above codes only fetches the recent posts from your blog. Most likely it must be suiting your current sidebar layout. But in case its messing up your current theme, then here is the styling code which you may need.

Let’s us see the recent posts structure and how you can modify it.

Code structure for Recent Posts

So each link as the above structure. If by chance the above widget is messing up with your template. Then you need to do the following modifications in CSS.

<style>
#recentposts ul {
border : medium none;
margin : 3px;
padding : 0;display:block;
}

#recentposts ul li {
font-family: Georgia, serif;
border-bottom: 1px solid #ccc;
display:block;
margin-bottom:5px;
}

#recentposts ul li img.thumbnail {
border: 1px solid #DDD;
padding: 2px;
background-color: white;
float: left;
margin: 0 8px 0 0;
}

.recentposts ul li a:link, .recentposts ul li a:visited, .recentposts ul li a:active {
display: block; 
color: #727272; 
padding: 8px; 
background-image: none !important;
display:block;
} 

#recentposts ul li span.meta {
display: block;
font-size: 10px;
text-transform: uppercase;
color: #777;
line-height: 20px;
}</style>
<div  id="recentposts"><ul>
<script style='text/javascript' src='https://smashingtips.com/blogger/recent.js'></script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
</script>
<script src='http://9gagbloggerclone.blogspot.in/feeds/posts/default?orderby=published&alt=json-in-script&callback=recent'></script></ul></div>

So now we have placed the links within a div section called “Recentposts” and similarly in CSS we have specified proper style for the div section.

So now you can try the above code for adding the recents posts in your site.

Show posts from Particular Label below the post

Now if you want to show the recent posts from a particular label for example “featured” posts below the post, then you need to add the above code into your template following the below steps.

Go to your Template section of your blog. And place the code to your edit HTML.


Go to Edit HTML page


Place code into EDIT HTML

Once you reach that page, Select “Expand Widget Templates” and search for :

      <data:post.body/>


Place code into EDIT HTML

Now place the original recent posts code from below to the edit html page. It is also the same code as above, but just we need to encode the script to make it work.

<style>
#recentposts {
width:100%;
}
#recentposts ul {
border : medium none;
margin : 3px;
padding : 0;display:block;
}

#recentposts ul li {
font-family: Georgia, serif;
border-bottom: 1px solid #ccc;
display:block;
margin-bottom:5px;
clear: both;
min-height: 58px;
}

#recentposts ul li img.thumbnail {
border: 1px solid #DDD;
padding: 2px;
background-color: white;
float: left;
margin: 0 8px 0 0;
}

.recentposts ul li a:link, .recentposts ul li a:visited, .recentposts ul li a:active {
display: block; 
color: #727272; 
padding: 8px; 
background-image: none !important;
display:block;
} 

#recentposts ul li span.meta {
display: block;
font-size: 10px;
text-transform: uppercase;
color: #777;
line-height: 20px;
}</style>
<div id='recentposts'><ul>
<script style='text/javascript' src='https://smashingtips.com/blogger/recent.js'></script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
</script>
<script src='http://9gagbloggerclone.blogspot.in/feeds/posts/default?orderby=published&alt=json-in-script&callback=recent'></script></ul></div>


Show recent posts below post

Showing Adsense ad and Recent Posts side by side

If you want to show recent posts along with some subscription form or along with an adsense ad, then you need to edit this code in the CSS.

#recentposts {
width:100%; // Change Width as required
float:left; // Keep it as you want according to your template.
}
Conclusion

I wanted to cover everything related to recent posts widget in blogger, but still there are lots of other things you can add to this. So i will make a second part of this post with few more modifications to the script.

If you want any other specific hacks or some modifications to your blogger, mention in comments i would like to write about them.

What’s my next Post?

In next post, i will show you how to give a new look to the featured posts in blogger just like below.

featured posts in blogger

If you don’t want to miss my another cool blogger trick, then subscribe to my blog.

About the author / 

Related Posts

14 Comments

  1. genim June 14, 2012 at 5:31 pm - 

    thank you… how about two label in one page.. say..

    Latest blog posts…
    1. Title 1
    2. Title 2
    3. Title 3

    Latest news…
    1. Title 1
    2. Title 2
    3. Title 3

    Is this posible?.. I tried the code twice.. but it only shows the first label lists…

      • JAMBI October 28, 2012 at 4:35 pm - 

        Thanks! Am using it for my blog now. 😀

  2. melia June 17, 2012 at 3:38 am - 

    Thank you for info..I can try it next

  3. cursedboy July 19, 2012 at 9:12 pm - 

    This is what I was looking for my blog will try this for sure and share my feedback.

    Nice work keep it up !!

  4. Hammad August 2, 2012 at 7:21 pm - 

    Thanks for nice tips. Is there any way to show posts from more than one label in single page. I mean not as u mention above because it can works in one r two label case. I ve a blog with more than 500 posts with many labels. Now I want to furthor categories them in 3,4 main categories. One way is that I ve to relabeled all the posts which is time consuming. If u have any idea I ll be thankful.

    • Mohamed Rias August 15, 2012 at 8:55 am - 

      Yes. You just need to mention that label name here

      replace the categoryname with your label name and it will work fine for as many number of labels you want.

  5. Natacha August 10, 2012 at 2:59 pm - 

    Hi,
    I am so confused. I would love to give people who comment on my blog the possibility to show their recent post(s) like you have underneath this post, where I can click which post I’d like to show.

    I have tried to find it somewhere on the internet for weeks and I just don’t get it to work. English isn’t my first language and it is all so complicated.
    Could you help me perhaps???
    PLEASE!
    Natacha (from Luxembourg)

    • Mohamed Rias August 28, 2012 at 11:24 pm - 

      Hi Natacha!

      I am using CommentLuv plugin. You can try it for blogger.

  6. bhagat August 28, 2012 at 10:11 am - 

    not working. i changed my feeburner feed to default but not working

    • Mohamed Rias August 28, 2012 at 11:18 pm - 

      Hi Bhagat,

      Yesterday i had problem with my server. Please try again now, it will work fine now. You can host the .js file in your host or google sites.

  7. Julak Sourie August 31, 2012 at 6:57 am - 

    Nice Post Mohammed Rias, i’ll try before

  8. Ansari October 17, 2012 at 3:03 am - 

    Alright

    i Need horizontal view of recent post by lables

  9. Nenad October 21, 2012 at 9:14 am - 

    Thank You for this GREAT script. I applied it and it works perfectly. That is EXACT what I needed for my webzine.

    There one thing, I have few labels and I want them all, and I did that, BUT it shows ONLY 25 posts!!!

    I changed this variable/line
    var numposts =3; to 50 cause I have a lot of posts (arround 300 by label) and it only shows 25. Can you tell me why is that? and how can I show ALL posts from certain label?
    You can see the page at link below, now there are 2 labels so far “26.frejm” and “intervju”

    http://hellycherrywebzine123.blogspot.com/p/a.html

    Thank you

Popular

Editor’s Pick

  • Designing Blogger Template : Adding Meta Tags

    WordPress users have many powerful plugins such as “All in one Seo” and “Yoast Seo plugin” for adding custom meta descriptions to each and every post/page. Again blogger doesn’t provide a plugin platform or custom fields support to add meta description and tags. Though these days in seo meta keywords and descriptions are given less…

  • 70+ Stunning HDR images with useful Photoshop Tutorials

    High Dynamic Range Imaging ( HDRI or just HDR ) is a technique which was developed to produce high dynamic range images from the photographs taken at different exposures of light. In comparison with normal digital imaging techniques HDR imaging techniques can produce a wider range of luminescence between dark and light. The main intention…

  • Mastering the Art of Timelapse Photography: Tips and Techniques

    Timelapse photography is a technique that involves capturing a series of photos over a period of time and then combining them into a video sequence to create the illusion of time passing quickly. Mastering this art can add a unique dimension to your photography skills. The importance of mastering timelapse photography lies in the fact…

  • 12 Best Mid Range DSLR cameras

    I am almost got fed-up to hear “What’s the best DSLR”I receive several emails from our readers asking which one they should opt. Now the true fact is, almost all DSLR cameras is good enough to take clean pictures .They all provide you with good specs, sharp images but it’s you who will decide whether…

  • Read More hack for Blogger with automatic Thumbnail creator script

    You might have noticed that since few weeks I have been using a strange script which enables us to summarize content and show only the summary with a thumbnail in Home Page , Archives page and Labels page. Since some of my readers requested this hack in gtalk , so I am going to explain…