Moreover , the Advantages of recent posts widget is that you wouldn't have to do email marketing to let your readers about your new posts , you can simply Use Recent Posts widget into your Blogger/Blogspot blog for finding them your latest new posts.
Once you have fully able to attract users attraction by letting them know that you are making new posts into your blog ,then they will continue to revolve around your blog for checking more stuff .In Addition , we can say with recent post widget you can easily avoid your out-dated content that were posted a long time ago and keep your visitors to attract with blog.
This way can be easily used to get users back to your blog and it might also a good impact on increasing the ranking in Search Engines results.There are lots of benefits of Adding Recent posts widget into blogger that might be good practice for Getting more visits to your blog.With this Recent Posts features you can attach a visitor for more time by Making him know about your other latest posts into your Blogger Blog ,and in case of its results the more the Search Engines Visibility Results your blog will get.
So However ,you can also give a new stylish look to your Blog by customizing these 5 Amazing and Cool recent Posts widget into your Blogger/Blogspot blog , So lets come to the main part of our Topic on How to Add Amazing and Cool Recent Posts widgets into Blogger easily.
Add 7 Amazing and Cool Recent Post Widgets to Blogger
Recent Posts widget Style #1:
This Widget Style is Rainbow Colorful Recent Posts Widget for Blogger.This is an amazing addition into your blogger by adding this cool Recent Posts Widget into your Blogger. In this Recent Posts widget style ,your Recently posts will display in a different color for each post.This may attract your users by Designing your Blog with this colorful Widget of Recent Posts.And in addition ,the Box of recent posts Will be shown smaller one be one as the Recent posts Will display on your Blog and this will be eye-catching widget for the visitors.
Widget Style CODE:
<script src='https://googledrive.com/host/0BwxhdxTEsxVYSjh3R0g3M3g2bms' type='text/javascript'></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://mytrickspedia.blogspot.com/2015/10/7-amazing-recent-posts-widgets-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>
Recent Posts widget Style #2:
This Recent Posts widget style is very simple.It will simply show the Title of your Recent posts and a little description of those posts .No extra coloring you will get in this widget Style.
<div id="hlrpsa">
<script src='https://googledrive.com/host/0BwxhdxTEsxVYZGhFMEQ4a0g2UHM' type='text/javascript'></script>
<script>
var numposts = 5;var showpostdate = false;var showpostsummary = true;var numchars = 100;var standardstyling = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts">
</script></div><a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://mytrickspedia.blogspot.com/2015/10/7-amazing-recent-posts-widgets-for-blogger.html" rel="nofollow" >Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
#hlrpsa a {color: #0B3861; font-size: 13px;}
#rpdr, #rpdr a {color:#808080;}
#hlrpsa { color: #999999; font-size: 11px; border-bottom:1px #cccccc dotted; margin-top:-10px; padding-bottom:10px;}
.hlrps a {font-weight:bold; }
.hlrpssumm {}
</style>
Recent Posts widget Style #3:
This widget Style is same as the Above style but there is a little different between these both Recent Posts widget Styles. In this widget style ,Only Recent Posts Titles will be shown in your Blogger .It is very simple Recent posts widget style for Blogger.
<div id="hlrpsb">
<script src='https://googledrive.com/host/0BwxhdxTEsxVYMWY2MUFvejRscHM' type='text/javascript'></script>
<script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div><a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://mytrickspedia.blogspot.com/2015/10/7-amazing-recent-posts-widgets-for-blogger.html" rel="nofollow" >Recent Posts Widget</a>
<noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type=text/css>
#hlrpsb a {color: #0B3861; font-size: 13px;}
#rpdr, #rpdr a {color:#808080;}
.bbrecpost2 {
padding-top:6px;
padding-bottom:6px;
border-bottom: 1px #cccccc dotted; }
</style>
Recent Posts widget Style #4:
This is the Simple and eye-catching style of Recent Posts widgets for blogger . In this Style your Recent Posts will show a numbered boxes.And Moreover this widget style is looks more attractive to the users.
<div class="recentpoststyle">
<script src='https://googledrive.com/host/0BwxhdxTEsxVYMTZ5MWVUcG1ySFk' type='text/javascript'></script>
<script>
var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestposts">
</script><a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://mytrickspedia.blogspot.com/2015/10/7-amazing-recent-posts-widgets-for-blogger.html" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
.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;}
</style></div>
Recent Posts widget Style #5:
This Recent Posts widget Style is very cool. You can also Display a Thumbnail Of your Posts as well as it shows a little description about the post.In Addition you it will also Display all recent posts in Numbered with sky blue bar around the Posts thumbnails.Also this Recent Posts Widget style will display the Posts with their Comments count.
Widget Style Code:
<script src='https://googledrive.com/host/0BwxhdxTEsxVYclNqYmY0WXFYa2s' type='text/javascript'></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://mytrickspedia.blogspot.com/2015/10/7-amazing-recent-posts-widgets-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>
Recent Posts widget Style #6:
This is another amazing Recent Posts widget style for Blogger.It looks very colorful and more attractive to visitors. In This widget style Your Recent Posts will be shown in a Numbered Type of view and Just The Title of Recent Posts.
Widget Style Code:
<script src='https://googledrive.com/host/0BwxhdxTEsxVYUjF5Mk9Rbmk5Y28' type='text/javascript'></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://mytrickspedia.blogspot.com/2015/10/7-amazing-recent-posts-widgets-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>
Recent Posts widget Style #7:
This Recent Widget Style have the all qualities that were other Recent Posts widget Style have. In this Widget you can Display your Recent Posts with Numbering at the right side in the blogger and it shows thumbnails of the Posts on the Left Side in Blogger.Moreover ,it also has the features to display the Comments count for each Posts in this Recent Posts Widget Style for Blogger.
<script src='https://googledrive.com/host/0BwxhdxTEsxVYNG9WSTRNejBscFU' type='text/javascript'></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs" rel="nofollow"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://mytrickspedia.blogspot.com/2015/10/7-amazing-recent-posts-widgets-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=Lobster|Gloria+Hallelujah' rel='stylesheet' type='text/css' />
<style type="text/css">
img.recent-post-thumb {width:50px;height:50px;float:right;margin: -4px -35px 0px 0px; border: 4px solid #FCD6CB; border-radius: 100%;}
.recent-posts-container {font-family: 'Gloria Hallelujah', cursive; float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none; background: #fff; }
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: -20px; font-size: 16px;color: #616662;background: #FCD6CB;padding: 9px 14px; border-radius: 100%; margin-top: 15px;}
ul.recent-posts-container li {padding:5px 0px;min-height:50px; list-style-type: none; margin: -2px 5px 5px 5px; border-top: 2px solid #FCD6CB;}
ul.recent-posts-container {border: 2px solid #FCD6CB; }
.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: #616662;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #888;}
.recent-posts-details {padding-bottom: 5px;}
a.readmorelink {color: #4DACE3;}
</style>
How to Add Recent Posts Widgets Style on Blogger
After Selecting the right Posts widget style for your blogger,Now lets come to the next part How to add these Recent Posts widget Style Code into Blogger.So Follow these instructions:Step 1: Go to Blogger and login into your Blog account. Then open your Blog from the Dashboard.
Step 2: Then Go to "Layout" and from that window select "Add a Gadget" in your Layout Section.
Step 3: Now a pop-up window will appear ,select "HTML/JavaScript" from the List.
Step 4:After it will open,Paste your Recent Posts widget Style Code into it and Click on "Save" button for saving the Settings.
Now open your Blog and There you can see your Required Widget style will be showing with your Recent Posts in your Blogger.
There are Lots of Benefits of Using These 7 Best and Amazing Recent Posts widgets for Blogger , it also will help you in improving your Skills in Blogging by customizing your Blog Design with different type of widgets, like Today you have Customized your Blog by Adding Recent Posts widgets into your Blogger and Also learnt How you can make your Blogger Design better then as it is .With these things you can give your blogger a new Look and also keep visitors to spent more time on your Blog.
Am using the third one in my hip hop music blog
ReplyDelete