How To Add Nice Recent Post Widget In Blogger

The Above image is how the Good example of how the recent post gadget looks like in blogger.

Recent post is a nice option which makes your blog or site neat and it also makes it easy for your blog readers to navigate around tour blog.

Follow the below steps to Add A Recent Post with nice look to your blogger blog.

How to Add Recent Comments to Blogger 

1. Login to your blogger account and move to your Dashboard.

2. Click on Layout as shown in the screenshot below

3. Click  on Add a Gadget

4. Then click on HTML/JAVASCRIPT on the menu that appears

5. Now Paste the code below in the HTML box that appears.

Code Start 

<script style="text/javascript"  src="http://makingdifferent.github.io/blogger-widgets/recent-posts-widget2.js"></script>

<script style="text/javascript">

var posts_no = 5;

var showpoststhumbs = true;

var readmorelink = true;

var showcommentslink = true;

var posts_date = true;

var post_summary = true;

var summary_chars = 70;</script>

<script  src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>

<noscript>Your browser does not support JavaScript!</noscript>

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

<style type="text/css">

img.recent-post-thumb  {padding:2px;width:65px;height:65px;float:left;margin: 0px 10px 10px;  background: #fff; border: 1px solid #69B7E2;}

.recent-posts-container {font-family: 'Oswald', sans-serif;  float:  left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding:  0;font-size:12px;}

ul.recent-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin-bottom: 5px;}

ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}

ul.recent-posts-container li:before {content:  counter(countposts,decimal);counter-increment: countposts;z-index:  2;position:absolute; left: 15px; font-size: 13px;font-weight:  bold;color: #fff;background: #69B7E2;padding: 4px 10px; border-radius:  100%;}

.recent-posts-container a { text-decoration:none; }

.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #2aace3;}

.recent-posts-details {margin: 5px 0px 0px 92px; }

.recent-posts-details a{ color: #777;}

</style>

Code Stop.

Now to change the number of post that appears, search for this code below

var posts_no = 5;

change the number to any amount you want.

Note: Do not make any changes to the html you copied earlier.

Now give it a Name e.g Recent Post, Trending Post etc

Finally, kindly Click  on Save

kindly leave your comments if this worked for you!

Thanks

SHARE ON: