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.
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.
Once you reach that page, Select “Expand Widget Templates” and search for :
<data:post.body/>
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> &lt;script style=&#39;text/javascript&#39; src=&#39;https://smashingtips.com/blogger/recent.js&#39;&gt;&lt;/script&gt; &lt;script style=&#39;text/javascript&#39;&gt; var numposts = 5; var showpostthumbnails = true; var displayseparator = true; var showcommentnum = true; var showpostdate = true; &lt;/script&gt; &lt;script src=&#39;http://9gagbloggerclone.blogspot.in/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=recent&#39;&gt;&lt;/script&gt;</ul></div>
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.
If you don’t want to miss my another cool blogger trick, then subscribe to my blog.
Related Posts
-
October 29, 2012 -
June 8, 2012 Designing Blogger Template : Adding Meta Tags
-
June 7, 2012 Designing Blogger Template : SEO Optimized Title Tag
-
June 6, 2012 Grunge Mag Reloaded Blogger Template
-
February 12, 2010 25 Useful Tools for Registering and Monitoring Domain Name
-
January 24, 2010 Page Navigation Menu Widget for Blogger
Popular
Editor’s Pick
-
April 9, 2023 Mastering the Art of Newborn Sleep: Proven Tips for Better Sleep in the First Week
Congratulations on your new arrival! As a new parent, you’ll quickly realize that one of the biggest challenges of caring for your newborn is ensuring they get enough sleep. In their first week of life, newborns typically sleep for 16-17 hours a day, but it can be difficult to establish a sleep routine that works…
-
October 4, 2009 520+ Yahoo Smileys Emotions for FUN
Yahoo smileys and emotions are pretty famous these days.
-
July 31, 2008 Page Navigation Menu Widget for Blogger
Yesterday I wrote How to add Page Navigation Menu hack by editing your blogger template. Now today I would like to use a different method to add this Page Navigation Menu to our Blogger Blog. Most Bloggers will prefer this method to add Page navigation Menu , because this method is very easy than editing…
-
June 6, 2012 Grunge Mag Reloaded Blogger Template
As you can see , In smashing Tips I have one separate category for Blogger users. I will be showcasing all my unique Blogger hacks , Blogger widgets and Tips to customize Blogger templates here. And am an experienced Blogger template designer , so I thought of sharing at least one Blogger Template every week….
-
January 2, 2010 GrungeMag Reloaded Blogger Template
It’s being a longtime since I have released a blogger template. I have got many requests in my last post for converting wordpress themes to blogger templates. So I have decided to release at least two blogger themes per week. As an initiative to this , I am releasing a three column blogger template which…
14 Comments
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…
Yes, its possible.. Just add the code twice and replace label name “Featured” to the label name from which you want to show the posts..
http://smashingtips.com/feeds/posts/default/-/featured
Thanks! Am using it for my blog now. 😀
Thank you for info..I can try it next
This is what I was looking for my blog will try this for sure and share my feedback.
Nice work keep it up !!
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.
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.
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)
Hi Natacha!
I am using CommentLuv plugin. You can try it for blogger.
not working. i changed my feeburner feed to default but not working
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.
Nice Post Mohammed Rias, i’ll try before
Alright
i Need horizontal view of recent post by lables
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