2 Stylish Recent Post Widget for BlogSpot Blogger

Recently, i shared Beautiful Recent Posts Widget With Thumbnail for Blogger but today i am going to share 2 more Stylish Recent posts that help the people to easily find your recent articles without any inconvenience. But when it comes to Stylish they just don't want to leave your site. When people visit your blog it is important to keep them there for many reasons, Displaying a list of your most recent posts in your sidebar is a great way to keep your readers enjoy your blog. This gadget displays your most recent posts and includes a small thumbnail but it has the added extra of using a dashed separator that shows your posts in ascending order.

Check out: Auto Numbering Plus Thumbnail Popular Posts Widget for Blogger

There are many reasons to add recent post widget If you have a lot of post on the blog, or if you want to show everyone your list of favorite books, but have little space in the sidebar widget this will be a great help to you. This post explains how to add auto scrolling (marquee) recent posts Widget on his blog that looks good on your BlogSpot blog. This is similar to the display of recent post in your sidebar, but this will have a marquee in this widget. Now if you want to show your blog in this way, either on top or bottom of your blog, then you can use this new widget.

Check out: How to Add Trending Post Widget to BlogSpot Blogger

Recent Post Style #1

<script type="text/javascript" src="https://cdn.rawgit.com/knigulper/github.io/gh-pages/knigulper.com/recentPostsWidget.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = false;
var showcommentslink = false;
var posts_date = false;
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=Ubuntu+Condensed' rel='stylesheet' type='text/css' />
<style type="text/css">
img.recent-post-thumb {width:50px;height:50px;float:right;margin: 10px  5px 0px 0px; border-radius: 100%; padding: 2px;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: #f1ae28; width: 100%; border:1px solid #ffffff}
ul.recent-posts-container li:nth-child(2n+0) {background: #f1ae28; width: 95%;}
ul.recent-posts-container li:nth-child(3n+0) {background: #f1ae28; width: 90%;}
ul.recent-posts-container li:nth-child(4n+0) {background: #f1ae27; width: 85%;}
ul.recent-posts-container li:nth-child(5n+0) {background: #f1ae29; 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; color: #FFF}
.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; }
</style>

Recent Post Widget Style #2

<script type="text/javascript" src="https://cdn.rawgit.com/knigulper/github.io/gh-pages/knigulper.com/recentPostsWidget.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = false;
var posts_date = false;
</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:35px;height:35px;float:right;margin: -14px 0px 0px 5px; border:  1px solid #cea5ac; border-radius: 10%;}
.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: 0px 10px 5px 35px;}
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: 5px; font-size: 16px;color:  #4D4D4D;background: #F7F7F7;padding: 9px 14px; border: 1px solid  #efefef;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover{color: #4DACE3;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #0000FF;}
.recent-post-title { margin: 5px 0px; }
.recent-posts-details {border-top: 4px dashed #AC707A; margin-top: 5px; padding-top: 5px;}
.recent-posts-details a{ color: #888;}
a.readmorelink {color: #4DACE3;}
</style>

Adding Recent Post Widget to Blogger Blog

1. Choose your favorite widget from above and copy the code 
2. Login your blogger Dashboard >  layout  > add a Gadget 
3. Select HTML/JavaScript and paste the code
4. Click Save the gadget

Customization:

Change the blue colored text with your preffered style that suits the best to your blogger template.

• var posts_no = 5; -                 Replace with the number of posts you want to display
• var showpostthumbnail -     Select false if you want thumbnail not to be displayed
• var showpostdate -               Select true if you want to show the date and false to hide

If you face any problem with the above tutorial, feel free to post your comment. I will be glad to help you.

Share this post