June 13, 2016

How to Create a Recent Post Widget in Blogger (Version 2.0)

http://thegreatowl.blogspot.com/2016/06/how-to-create-recent-post-widget-in.html

Hi guys. For some reason the first Recent Post Widget seems not to be working on my case and for some users. And as part of the goal to make sure this blogsite up-to-date I am now updating or rather sharing it to you guys a recent post widget that is working for me and for some bloggers out there. This updated widget is very similar to the first version, It displays the title only. no date. no summary. Simply just the post title.

Step 1.0 Add a HTML Gadget on your layout then paste the CODE 1.0 on it.



CODE 1.0
Codes in Violet = Variable Editable
Code in Orange = Style Editable

<div class="recentpoststyle"><script type="text/javascript">function showlatestposts(e){for(var t=0;t<posts_no;t++){var r,s=e.feed.entry[t],n=s.title.$t;if(t==e.feed.entry.length)break;for(var a=0;a<s.link.length;a++)if("alternate"==s.link[a].rel){r=s.link[a].href;break}n=n.link(r);var i="... read more";i=i.link(r);var l=s.published.$t,o=l.substring(0,4),u=l.substring(5,7),c=l.substring(8,10),m=new Array;if(m[1]="Jan",m[2]="Feb",m[3]="Mar",m[4]="Apr",m[5]="May",m[6]="Jun",m[7]="Jul",m[8]="Aug",m[9]="Sep",m[10]="Oct",m[11]="Nov",m[12]="Dec","content"in s)var d=s.content.$t;else if("summary"in s)var d=s.summary.$t;else var d="";var v=/<\S[^>]*>/g;if(d=d.replace(v,""),document.write('<li class="recent-post-title">'),document.write(n),document.write('</li><div class="recent-post-summ">'),1==post_summary)if(d.length<summary_chars)document.write(d);else{d=d.substring(0,summary_chars);var f=d.lastIndexOf(" ");d=d.substring(0,f),document.write(d+" "+i)}document.write("</div>"),1==posts_date&&document.write('<div class="post-date">'+m[parseInt(u,10)]+" "+c+" "+o+"</div>")}}</script><script type="text/javascript">var posts_no = 10;var posts_date = false;var post_summary = false;var summary_chars = 0;</script><script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts"></script><noscript>Your browser does not support JavaScript!</noscript><style type="text/css">.recentpoststyle { list-style-type: none; text-align: center;}.recentpoststyle a {text-decoration: none;}.recentpoststyle a:hover {color: orange;}.recent-post-title a { color: #444; text-decoration: none; font: 14px Arvo;}</style></div>