Add Multicolored Recent Posts Widget for Blogger

Add Multicolored Recent Posts Widget for Blogger

Having widgets with full of links within your blog reduces bounce rate as the possibility increases of viewers viewing your other posts. A recent post widget lying in your blog shows viewers your latest posts so people may move to other pages otherthan leaving your blog. This increases page views and is a SEO tip too. Other such widgets are popular post widget, random post widget and featured post widget.

The Awesome Multicolored Recent posts widget for Blogger is coded in Javascript. The Recent posts widget for blogger in here can be edited by anyone new to 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.how to add recent posts multicolored widget in blogger awesome fast loading cool add recent posts widget in blogger add javascript of fast loading colorful recent posts widget for blogger install cool top best

Add Multicolored Recent Posts Widget for Blogger

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.

<style type="text/css">

img.recent-post-thumbnail{float:right;height:50px;width:50px;margin:5px -5px 0px 0px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;padding:3px;background: #fff}

ul.recent-posts-wrap {background: #fff;list-style-type: none; margin: 5px 0px 5px 0px; padding: 0px;font:12px 'Ubuntu Condensed', sans-serif;}

ul.recent-posts-wrap li:nth-child(1n+0) {background: #FCD092; width: 94%}

ul.recent-posts-wrap li:nth-child(2n+0) {background: #FFE0B4; width: 94%}

ul.recent-posts-wrap li:nth-child(3n+0) {background: #FFF59E; width: 94%;}

ul.recent-posts-wrap li:nth-child(4n+0) {background: #E1EFA0; width: 94%;}

ul.recent-posts-wrap li:nth-child(5n+0) {background: #B1DAEF; width: 94%;}

ul.recent-posts-wrap li {padding:5px 10px;list-style-type: none; margin: 0 0 -5px; color: #777;}

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

.recent-posts-wrap a:hover { color: #222;}

.post-date {color:#e0c0c6; font-size: 11px; }

.recent-post-title a {font-size: 14px;font-weight: bold;color: #444;}

.recent-post-title {padding: 6px 0px;}

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

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

</style>

<script type="text/javascript">

function showrpwiththumbs(t){document.write('<ul class="recent-posts-wrap">');for(var e=0;e<posts_number;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiB6yUJfPgQgeY4d48LcRTKWMqXvcph4gbxbYhsDGQ7jz4sm6U9qvKUHtp_hbGC3vWi3L33MQBtfn7uoso8pUOUD-bUQli5IHNcBXJolX3-btSVHAtyVOL6cjsZ-m9ARk9qe5r8PVMsWnd/s1600/no-thumb.png"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li class="recent-posts-list">'),1==showpostswiththumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumbnail" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>"),"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";var k=/<\S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"...")}var _="",$=0;document.write('<br><div class="recent-posts-details">'),1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),1==insidereadmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcomments&&(1==$&&(_+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),document.write(_),document.write("</div>"),document.write("</li>")}document.write("</ul>")}

</script>

<script type="text/javascript">

var posts_number = 5;

var showpostswiththumbs = true;

var insidereadmorelink = true;

var showcomments = 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=showrpwiththumbs"></script>

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

<link href='https://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />

• 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.

CONCLUSION

No other changes like setting your blogger url, are to be done inorder to work. The widget will automatically detect those. Also add popular widget post which has basically all uses of recent widget. I hope everything is clear about the recent post widget. If you find any trouble. Ask us in comments.

HAPPY BLOGGING

how to add recent posts multicolored widget in blogger awesome fast loading cool add recent posts widget in blogger add javascript of fast loading colorful recent posts widget for blogger install cool top best