Blogging And Social Media Marketing

Recent Post Widget/Code For Blogspot Blogs

Just as you’ve read in the title of this article, today i will be writing on how you can add recent post widget on your blogspot blog with ease. Let’s move on below.

This widget is coded in JavaScript and styled with CSS and it displays the recent post on your blog, showing a snippet of the post along with the title of the post.

How To Add The Recent Post Widget

Head over to your Blogger Dashboard >> Layout >> and on the right or left sidebar you wish to add it and click the “Add a Gadget” link


From the pop-up window, scroll down and click on the “HTML/JavaScript” option


Now copy and paste the below code in the HTML/JavaScript box

var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;

Your browser does not support JavaScript!

.recentpoststyle {counter-reset: countposts;list-style-type: none;}
.recentpoststyle a {text-decoration: none; color: #49A8D1;}
.recentpoststyle a:hover {color: #000;}
.recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 2;position:relative;font-size: 20px;font-weight: bold;color: #fff;background: #69B7E2; margin: 15px 5px 0px -6px; padding: 0px 10px; border-radius: 100%;}
li.recent-post-title { padding: 5px 0px;}
.recent-post-title { font-family: “Avant Garde”,Avantgarde,”Century Gothic”,CenturyGothic,AppleGothic,sans-serif;}
.recent-post-title a {color: #444;font-size: 13px; text-decoration: none; padding: 2px; font-weight: bold;}
.post-date {padding: 5px 2px 5px 30px; font-size: 11px; color: #999; margin-bottom: 5px;}
.recent-post-summ { border-left: 1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 11px; font-family: Garamond,Baskerville,”Baskerville Old Face”,”Hoefler Text”,”Times New Roman”,serif; font-size: 15px;}

You can change “var posts_no =5;” to any number of posts to display.
To disable date, you can change “var posts_date =true;” to false.
If you want to disable snippet of words in the post, you can change from “var post_summary =true;” to false.
You can also change the number of letters at “var summary_chars =80;” to 60, 120, 150 and so on.

But if you dont understand the code, you can paste it that way to avoid error from editing.

Emmanuel Ekanem

Blogger, Web Designer and Freelance Writer. I Help Businesses get an Online Presence using a Blog, ChatBot and Social Media with structured contents.

I've been featured on Top Websites like Naij.com, NigerianToday etc.

2 comments