Skip to main content

3 Awesome Recent Post Widget for Blogger

Having a recent post widget on your blogger blog will help your blog look like more professional as well as user friendly. You don't need to email your blog reader that you will publish a new article. This widget will show your recent post. 
Blogger is a great blogging platform, you can be able to make your blog whatever you like. There are more than 900+ widget available. But you can not get recent post gadget. But don't worry they allow their user to add custom widget on their blog. You can easily able to add lot of gadget in to your blog. However, you might have seen that, some of blog which is build on blogspot that has a recent post widget. Now you may like to add it in your blog. So today in this post, I'm going to share with you a complete guide to add this widget in your site. So let's start. 
 Style - 1
recent post widget for blogger
<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentposts2.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = false;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</script>
<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="
http://www.techshoutme.com/2015/07/awesome-recent-post-widget-for-blogger.html">Recent Posts Widget</a>
<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: #5C4D4D;}
.recent-post-title { margin: 5px 0px; }
.recent-posts-details {border-top: 4px solid #AC707A; margin-top: 5px; padding-top: 5px;}
.recent-posts-details a{ color: #888;}
a.readmorelink {color: #4DACE3;}
</style> 

Style -2 
recent post widget for blogger 1
<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentpoststhumbs.js"></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>
<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="
http://www.techshoutme.com/2015/07/awesome-recent-post-widget-for-blogger.html" rel="nofollow">Recent Posts Widget</a>
<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: 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; }
</style>


Style - 3
recent post widget for blogger 2

  <script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentpoststhumbs.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>
<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://www.techshoutme.com/2015/07/awesome-recent-post-widget-for-blogger.html" rel="nofollow">Recent Posts Widget</a>
<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>

In above I will listed 3 style of widget. Choose one of them which is suitable for your blog. After that, copy the code. Now go to the next steps : 

Adding recent post widget in Blogger.  

Hopefully you choose one of them now time to add one of them on your blog. Just follow the below simple steps: 
  • Log  in to your account and go to blogger dashboard >> Layout >> Add a gadget 
    add a gadget
  • After clicking on the add a gadget link, a popup window will open. Scroll down and select HTML / JavaScript 
    choose html javascript
     
  • Once you click on HTML / JavaScript, you can see a box. Now paste the code here. And write a title. After that, click on save button. 
    paste code
  • Cheers !!! You're successfully done.  

Hopefully you can successfully add recent post widget on your blogger blog. Always try to update your blog. This widget show your all latest article. For that's reasons your page view will increasing. 
Note: This widget are not mine. I will collect code form the awesome blog helplogger.  

Comments

Popular posts from this blog

How To Find Thousand Of CommentLuv Or KeywordLuv Blogs

There is no doubt that blog commenting is an awesome and great way to get quality backlinks instantly. Not only link building it also helps to promote a new blog and giving a thousand of visitor. Most of blogger specially newbie tired to find out Commentluv and keywordLuv enable blogs to put their comment and get number of quality links for their blog. In my blog Techshoutme here I almost share lot of post about increase backlinks .  And also sharing lots of dofollow high PR blog commenting site list. I know these sites aren't enough for you. You may be searching Google to get blog for commenting.  Today I will be going to share a great post and discuss with you an awesome tool that will may help you most. Now you will be able to find out a thousand of blogs easily and also getting lot of quality back link. Let's have look about this online tool and how is it work !!  Finding Commentluv / KeywordLuv Blogs   Hopefully you may already know about comme...

Top 3 Magazine Style Blogger Templates Free

Now a day's blogger is the most popular blogging platform. Starting from privet and commercial website are being created with blogger blogspot platform . Currently besides Wordpress blogger has many resources in Internet like blogger templates etc.  There are a thousand of websites in internet they provide high quality blogger templates both premium and free. You can easily use template from these sites. But from these sites, it's much difficult to choose the best templates.  Today I will give you Top 3 Magazine Style Blogger Templates completely Free. Note- I'm not good at create Blogger template. These templates I have collect from various websites.  1. Corner Mag                                           Live Demo        Download Thi...

How to Make Your Facebook Profile Picture Unclickable or Private?

Facebook has become the world's no-1 social media over the world. Start from teenagers to older one FB is carrying need for everyone. However, there has been so many unwanted circumstance happening on FB. To prevent these things, you should make sure a strong privacy. Today I will share a simple but effective trick is make your Facebook profile picture unclickable / private. If you do it, no one can able to download or see your image at large size. Its a great idea for the teenager or specially for the girls. This little bit setting can help you to being safe your pictures from others. So let's start First of all, Log in to your Facebook account and go to your timeline.  Now click on your profile picture.  Once clicked, your image will open in large size with all the options. By default, Facebook make all images for public means anyone can see it and download as well. Now you need to change the privacy setting Public into Only me. If you have more than one pictu...