Add Multicolored Recent Posts Widget For Blogger

The Awesome Multicolored Recent posts widget for Blogger is coded in Javascript. The Recent posts widget for blogger in here can be edited by any newbie blogger. This awesome looking multicolored blogger recent post widget's values like number of posts to be displayed, colors,... can be changed according to your wish.

INSTALLATION:

• STEP 1: Log in to your Blogger dashboard and move to the "Layout" tab.
• STEP 2: Click on "Add a gadget" seen on the area of the where you think to add this. 
• STEP 3: In the pop up displayed drag down to "HTML/Javascript"  and click on it.
• STEP 4: Copy the below code in to the HTML/Javascript box.

<script style="text/javascript" src="https://895de0820234a166b61dc94b043c6d48020ddb46.googledrive.com/host/0BzOH-YXRPGmofmxBYjl2dGxqbllfRVdZa0FmN3pmdHpqaFhOXzRLanZsVllsYUY2dGdIdGs/colorful-recent-posts-widget-boostweb.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://boostweb.blogspot.com/2015/08/how-to-add-install-top-best-awesome-multicolored-fast-loading-recent-posts-widget-for-blogger.html" rel="nofollow">Grab this</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>

• STEP 5: Click on "save"
• STEP 6: Click on "Save arrangement"

CUSTOMIZATION:

• 1- var posts_no = 5; - Change the number of posts to display from 5.
• 2- var showpoststhumbs = true; - Change into false to hide image thumbnail.
• 3- var readmorelink = true; - Change into false to hide read more link.
• 4- var showcommentslink = false; - Change into true to show comment link.
• 5- var posts_date = true; - Change into false to hide post date.
• 6- var post_summary = true; - Change into false to hide post summary.
• 7- var summary_chars = 70; - Change 70 to change the number of characters in displayed summary.