RSS feed for Blogger

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

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.

[js]
<script style=’text/javascript’ src=’http://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://smashingtips.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=recent’></script>
[/js]

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

[js]
var numposts =3;
[/js]

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

[js]
var showpostthumbnails = true;
[/js]
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”.

[js]
var showcommentnum = true;
[/js]
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.

[js]
var showpostdate = true;
[/js]
It’s used to show the date. Either set it to “true” to show date or set it to “false” to hide it.

[js]
<script src=’http://smashingtips.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=recent’></script>[/js]

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 “http://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.

[js]
<script src=’http://smashingtips.com/feeds/posts/default/-/featured?orderby=published&alt=json-in-script&callback=recent’></script>[/js]

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

[js]
<script style=’text/javascript’ src=’http://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>
[/js]

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.

[js]
<script style=’text/javascript’ src=’http://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>
[/js]

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.

[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=’http://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>[/css]

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 :
[html]
<data:post.body/>
[/html]


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.

[html]
<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='http://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>
[/html]


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.
[css]
#recentposts {
width:100%; // Change Width as required
float:left; // Keep it as you want according to your template.
}[/css]

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.


- has written 23 posts on Smashing Tips


14 Responses to “Show Recent Posts With Thumbnail from Particular Label/Category in Blogger”

  1. 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…

  2. Thank you for info..I can try it next

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

    Nice work keep it up !!

  4. 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.

  5. 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)

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

  7. Nice Post Mohammed Rias, i’ll try before

  8. Alright

    i Need horizontal view of recent post by lables

  9. 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