Colorful Recent posts widget in blogger

Colorful recent posts widget in blogger
In my last article, I discussed how to add featured post widget in blogger. In today’s article however, I’m rightly going to walk you through how to add a colorful or multi color recent post widget in blogger

I know you must have came across recent posts widget in other bloggers blog, but in this article, just as the name implies, I’m not just talking about recent post widget, but a multi colorful recent post widget that makes the whole difference from what you used to see.
The recent post widget for blogger blog in question here, is an advanced one that showcases the posts with their titles and thumbnails, and as very important for both blogger and the readers, can also help you increases your blog page-view, visitor’s navigation and click through rate (CTR) and even user's experience.
In the list of Google Blogger Gadgets, there are lists of other gadgets or widgets like popular post widget, featured post widget, etc that can be found there, but unfortunately, there is nothing like recent post widget in the lists of Google Blogger Gadgets, just like random post widget in blogger, and that’s why we have to manipulate not just recent posts widget but a colorful recent post widget in blogger with thumbnails to help upcoming and savvy tech bloggers out there, which requires manual configuration or customization to get it through.
In Wordpress, the case is different because, recent post widget or plugin in Wordpress is in default state, and can be instantly downloaded from the list of other plugins for showcasing most recent posts you’ve made in Wordpress. You can click here to download recent posts widget/plugin for Wordpress.
Recent post widget is important to you and your blog visitors because, it can give your blog visitors a clue of what your blog content is all about, since it show minimum of 5 different articles you’ve posted sequentially and in a chronological order.
This great blogging tool can give your site visitors a wide verity of content to read without navigating the whole blog to find related or similar content to read. It can also help you reduced blog bounce rate since the visitors are left with options of what next content to read instead of bouncing away.
You may think recent post widget is not necessary for your blog but it does, especially, if your blog is large one with huge content, or if you run a multi niche blog; this is because, it helps the visitors to figure out what’s new about your blogging content.
There are several attractive and well customized recent post widgets specifically for blogger blog on the net; most of them are good and some can reduce your site load time. In this post therefore, I’m interested in giving you a well tested and proven colorful (multi color) recent post widget if you blog in Blogspot or Blogger blog.

How to add recent posts widget in Blogger

Adding recent posts widget in blogger blog is relatively easy and simple even if you’re new to blogging minefield. Just follow the step by step processes outline below:
1. Login to your Blogger dashboard.
2. Choose the blog you want to update.
3. Click on “Layout”.
4. Within the layout page, just click “Add Gadget” of any section of the column layout.
Colorful Recent posts widget in blogger1

5. On the new window that open with the list of Google Blogger Gadgets, click on “HTML/Javascript”.
Colorful Recent posts widget in blogger2

6. In the blank new window that will open, paste the following codes below. 
<script style="text/javascript" src=""></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = false;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="" rel="dofollow">recent post Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='' rel='stylesheet' type='text/css' />
<style type="text/css">
img.recent-post-thumb {width:50px;height:50px;float:right;margin: 5px -5px 0px 0px; border-radius: 100%; padding: 3px;background: #fff}
.recent-posts-container {font-family: 'Ubuntu Condensed', sans-serif; float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container {list-style-type: none; background: #fff;padding: 0px; }
ul.recent-posts-container li:nth-child(1n+0) {background: #F49A9A; width: 100%}
ul.recent-posts-container li:nth-child(2n+0) {background: #FCD092; width: 95%}
ul.recent-posts-container li:nth-child(3n+0) {background: #FFF59E; width: 90%;}
ul.recent-posts-container li:nth-child(4n+0) {background: #E1EFA0; width: 85%;}
ul.recent-posts-container li:nth-child(5n+0) {background: #B1DAEF; width: 80%;}
ul.recent-posts-container li {padding:5px 10px;min-height:50px; list-style-type: none; margin: 0px 5px -5px 5px; color: #777;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;color: #444; font-weight: bold;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #222;}
.recent-posts-details {padding: 5px 0px 5px; }

7. Scroll down the same window’s page and click on “Save”.
8. Now, the recent post widget has been added to your blog dashboard layout. All you need is to come back to the “Layout” and click “Save settings”.
Colorful Recent posts widget in blogger3


In conclusion, recent post widget in blogger just likes some other widgets in blogger blog and other CMS, is a great content advertising and marketing tool. So, if you want to increase your visitor’s pageview, time on site, and as well encourage users experience, navigation and reducing bounce rate of your blog, you definitely would need recent post widget integrated into your blog.
That’s that for today… Is there anything I forgot to mention? Kindly let me know what your take on this is by using the comment box. Please, endeavor to share with friend on social media, using the social media share buttons bellow.

No comments:

Post a Comment

Any promoted links in comments will be deleted. Only relevance links in comment (if at all) will be approved.