Recent post widget is one of widget that is widely used by bloggers.
The function of this widget is to display a list of recent articles in our blog, but beside of it there’s also a recent post widget by label that simply displays a list of recent articles by a particular label.
The recent post by label widget is mostly used on blog that use magazine style template, even though it widget can also be used on the blog using a simple blogger template.
Well, on this occasion I will write some recent post widgets, as recent post widget with a thumbnail and a summary, a simple recent post, and recent post by label.
Before I write the widgets codes, I will write how to install the recent post widget, in case anyone needs it.
Here are some of recent post widget code that you can plug in the gadget contains HTML / JavaScript, please choose the code that you like
But this widget does not show recent post by label
Widget code:
You may also move the CSS code and set it up before code
Widget code:
Widget code:
This widget also has a setting that can be set as desired, for example if we want to display a list of recent articles with thumbnail without summaries.
So please set according to taste.
Widget code:
Those are some recent post widget code to bloggers that I can include at this time.
How to install recent post in blogger that I wrote above is the easiest and simplest way.
If you get the way how to use the widget, then please separate the widget code and place each code at place which you like.
For example:
Css code is installed before the code
Script code before the code
The function of this widget is to display a list of recent articles in our blog, but beside of it there’s also a recent post widget by label that simply displays a list of recent articles by a particular label.
The recent post by label widget is mostly used on blog that use magazine style template, even though it widget can also be used on the blog using a simple blogger template.
Well, on this occasion I will write some recent post widgets, as recent post widget with a thumbnail and a summary, a simple recent post, and recent post by label.
Before I write the widgets codes, I will write how to install the recent post widget, in case anyone needs it.
How to Install Recent Post Widget In Blogger
This is the easiest way to install the recent post widget in blogger, the steps should be taken are:- Sign in to your blogger dashboard
- Go to Layout page
- Click Add a Gadget
- Select gadget HTML / JavaScript
- Replace the recent post widget code on the Conten
- Save.
Here are some of recent post widget code that you can plug in the gadget contains HTML / JavaScript, please choose the code that you like
Simple Recent Post Widget
This is a simple recent post widget without thumbnail or summary, as well as open recent post by label. <script type="text/javascript"> function showrecentposts(json){for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}posttitle=posttitle.link(posturl);if(standardstyling)document.write('<li>');document.write(posttitle)}if(standardstyling)document.write('</li>')} </script><script type="text/javascript"> var numposts = 5; var standardstyling = true;</script> <script type="text/javascript" src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>
Information:- Please replace number 5 on code
var numposts=5;
with the number of articles you want.
Recent Post Widget With Thumbnail + Summary
This is a recent post widget with thumbnail and summary that you can set according to taste, either just want to show post title + thumbnail, post title + summary, or want to show all of them.But this widget does not show recent post by label
Widget code:
<script style="text/javascript">//<![CDATA[ function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;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/AVvXsEg0Hf9KU5ZEzYACZsy2I2tbHG-vYnyi-CcV9NRlnYPI03pBqbIe23v_GoJfnOYW0Kz2yvMcaOOz4n-7WSSD8IvUANZjRyos5KKj1I-oXMpjBAE5ySsMg90GPmpM4MU1xv9YwnlojFDH0W_f/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==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" sasaran ="_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('<div class="recent-posts-details">'),1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),1==readmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" sasaran ="_top">Read more</a>',$=1),1==showcommentslink&&(1==$&&(_+=""),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" sasaran ="_top">'+l+"</a>",_+=l,$=1),document.write(_),document.write("</div>"),document.write("</li>")}document.write("</ul>")} //]]></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><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 20px 10px 0; background: #fff; border: 1px solid #ddd;} .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 {position:relative;padding:5px 7px;min-height:65px; list-style-type: none; margin-bottom: 5px;border:1px solid #ddd} ul.recent-posts-container {color:#555;counter-reset: countposts;list-style-type: none;} .recent-posts-container a { text-decoration:none; } .recent-post-title a {font-weght:bold; text-transform: uppercase; color: #2aace3;} .recent-posts-details {margin: 5px 0px 0px 92px; } .recent-posts-details a{ color: #777;} </style>
The widget setting:var posts_no = 5;
→ Change number 5 to determine the amount of recent post displayedvar showpoststhumbs = true;
→ Parameter to display thumbnail or not, change true to false if you do not want to show thumbnailvar readmorelink = true;
→ Parameters to display Read More or notvar showcommentslink = true;
→ Parameter to display the number of comments or notvar posts_date = true;
→ Parameter to display the post date or notvar post_summary = true;
→ Parameter to display summary or notvar summary_chars = 70
→ Parameter to specify the number of summaries.
<style type="text/css">
and </style>
You may also move the CSS code and set it up before code
</head>
in the template that you use.Recent Post Widget With Thumbnail And Navigation Next and Previous
If you want to install the latest articles list with thumbnail accompanied by navigation Next and Previous, then please use this widget.Widget code:
<script type='text/javascript'>//<![CDATA[ var numfeed = 5; var startfeed = 0; var urlblog = "http://www.makeonblog.com/"; var charac = 40; var urlprevious, urlnext; function arlinafeed(e,t){for(var n=e.split("<"),r=0;r<n.length;r++)-1!=n[r].indexOf(">")&&(n[r]=n[r].substring(n[r].indexOf(">")+1,n[r].length));return n=n.join(""),n=n.substring(0,t-1)}function showrecentpostsae(e){var t,n,r,a,i,s="";urlprevious="",urlnext="";for(var l=0;l<e.feed.link.length;l++)"previous"==e.feed.link[l].rel&&(urlprevious=e.feed.link[l].href),"next"==e.feed.link[l].rel&&(urlnext=e.feed.link[l].href);for(var d=0;d<numfeed&&d!=e.feed.entry.length;d++){t=e.feed.entry[d],n=t.title.$t;for(var l=0;l<t.link.length;l++)if("alternate"==t.link[l].rel){r=t.link[l].href;break}i="content"in t?t.content.$t:"summary"in t?t.summary.$t:"",a="media$thumbnail"in t?t.media$thumbnail.url:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimyVotBR0b5iWAGC48cdK0wO8jFvxgxIeX5Q_qTY63axLrd86QQCM9UsXtHXJPHHCj5_w76nwO0iqGF5jvXd8KwyXLd61qVmCUB3k96IBXOl1ZDDzjp-4JbPLjgQcagg6iHa95JxWX9_wx/s1600/no-image.png",s+="<div class='recentpostel'>",s+="<a href='"+r+"' target='_blank'><img src='"+a+"' /></a>",s+="<h6><a href='"+r+"'>"+n+"</a></h6>",s+="<p>"+arlinafeed(i,charac)+"...</p>",s+="</div>"}document.getElementById("recentpostsae").innerHTML=s,s="",s+=urlprevious?"<a href='javascript:navigasifeed(-1);' class='previous'>Previous</a>":"<span class='noactived previous'>Previous</span>",s+=urlnext?"<a href='javascript:navigasifeed(1);' class='next'>Next</a>":"<span class='noactived next'>Next</span>",s+="<a href='javascript:navigasifeed(0);' class='home'>Home</a>",document.getElementById("recentpostnavfeed").innerHTML=s}function navigasifeed(e){var t,n;-1==e?(t=urlprevious.indexOf("?"),n=urlprevious.substring(t)):1==e?(t=urlnext.indexOf("?"),n=urlnext.substring(t)):n="?start-index=1&max-results="+numfeed+"&orderby=published&alt=json-in-script",n+="&callback=showrecentpostsae",incluirscript(n)}function incluirscript(e){1==startfeed&&removerscript(),document.getElementById("recentpostsae").innerHTML="<div id='recentpostload'></div>",document.getElementById("recentpostnavfeed").innerHTML="";var t=urlblog+"/feeds/posts/default"+e,n=document.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src",t),n.setAttribute("id","arlinalabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("arlinalabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)}; //]]></script> <div id="recentpostsae"></div><div id="recentpostnavfeed"></div> <style type="text/css"> #recentpostnav{border:1px solid #585858;width:100%;margin:0 auto} #recentpostsae{margin:0} .recentpostel{background:#fff;display:block;border:1px solid #ddd;margin:5px 0;padding:10px;height:79px} .recentpostel img{background:#fff;padding:4px;float:left;height:70px;margin-right:8px;width:70px;border:1px solid #ddd} .recentpostel h6,.recentpostel h6 a{text-decoration:none;font-size:13px!important;font-weight:700!important;margin:0;color:#111} .recentpostel:hover{background-color:#fefefe} .recentpostel p{font-size:12px;text-align:left;color:#555;line-height:normal;margin:5px 0} #recentpostload{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimnCbY8tRcOj_NCL1wKX2En5wD2MEvLs8u5iHUU6vZhlRrjJvvaPC5zjPD0aDkg6t16dM8QFhGJY_uXxzm7UrvNWXGyWDFe7P9GyPe_wxW9FlpPAYPJ4YrpJ6l9bOkvbkO-ygXS13OZ4kF/s1600/loader.gif) 50% 50% no-repeat #fff;height:470px;border:1px solid #ddd} #recentpostnavfeed{border:1px solid #ddd;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0} #recentpostnavfeed:hover{background-color:#fefefe} #recentpostnavfeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px} #recentpostnavfeed span{padding:5px 10px} #recentpostnavfeed .next{float:right} #recentpostnavfeed .previous{float:left} #recentpostnavfeed .home{text-align:center} #recentpostnavfeed a:hover,#recentpostnavfeed span.noactived{color:transparant!important} </style>
Information :var numfeed = 5;
→ parameter to specify the number of articles displayedvar urlblog = "http://www.makeonblog.com/";
→ Parameter for the blog address that will be shown the recent post list.var charac = 40;
→ Number of summaries characters<div id="recentpostsae"></div><div id="recentpostnavfeed"></div>
→ is the code that will call and show recent posts with thumbnails and navigation.
A Simple Widget of Recent Post by Label
This widget allows you to display a simple recent post by label, which will only display the post title only.Widget code:
<script type='text/javascript'> function showrecentposts(t){for(var e=0;numposts>e;e++){var n,r=t.feed.entry[e],i=r.title.$t;if(e==t.feed.entry.length)break;for(var a=0;a<r.link.length;a++)if("alternate"==r.link[a].rel){n=r.link[a].href;break}i=i.link(n),standardstyling&&document.write("<li>"),document.write(i)}standardstyling&&document.write("</li>")} var numposts = 5; var standardstyling = true; </script> <div class='LatestPost'> <script type='text/javascript' src='/feeds/posts/default/-/blogger%20tutorial?orderby=published&alt=json-in-script&callback=showrecentposts'></script></div> <style type="text/css"> .LatestPost li{list-style:none;margin:0;padding:0.5em 0;border-bottom:1px dashed;} </style>
Info:var numposts = 5;
→ parameter to specify the number of recent post displayed/feeds/posts/default/-/blogger%20tutorial
→ Replace the wordsblogger%20tutorial
with the article label name that you want to show.
Recent Post By Label Widget With Thumbnail
This is a widget that will display a list of recent articles by label we choose that are accompanied by thumbnail and summary.This widget also has a setting that can be set as desired, for example if we want to display a list of recent articles with thumbnail without summaries.
So please set according to taste.
Widget code:
<script style="text/javascript">//<![CDATA[ function labelthumbs(t){document.write('<ul class="label_with_thumbs">');for(var e=0;e<numposts;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 m=n.link[o].title,l=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/AVvXsEgjdo4-Xbn39G4lud1Et81eSiQUGFGboZ5YUJbzy8-SL_yvqaAqjgcKV0VNJn7oC9YB494N2DmaqZJ4B8X9No9uMiu8WpuGxc505zKvOnXVj-gzaopcb51OW4Pee8OuYUX_LQiFHq8-pukF/"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),w=p.substring(8,10),A=new Array;if(A[1]="Jan",A[2]="Feb",A[3]="Mar",A[4]="Apr",A[5]="May",A[6]="Jun",A[7]="Jul",A[8]="Aug",A[9]="Sep",A[10]="Oct",A[11]="Nov",A[12]="Dec",document.write('<li class="clearfix">'),1==showpostthumbnails&&document.write('<a href="'+r+'" sasaran ="_top"><img class="label_thumb" src="'+u+'"/></a>'),document.write('<strong><a href="'+r+'" sasaran ="_top">'+i+"</a></strong><br>"),"content"in n)var v=n.content.$t;else if("summary"in n)var v=n.summary.$t;else var v="";var y=/<\S[^>]*>/g;if(v=v.replace(y,""),1==showpostsummary)if(v.length<numchars)document.write(""),document.write(v),document.write("");else{document.write(""),v=v.substring(0,numchars);var k=v.lastIndexOf(" ");v=v.substring(0,k),document.write(v+"..."),document.write("")}var _="",x=0;document.write("<br>"),1==showpostdate&&(_=_+A[parseInt(g,10)]+"-"+w+" - "+f,x=1),1==showcommentnum&&(1==x&&(_+=" | "),"1 Comments"==m&&(m="1 Comment"),"0 Comments"==m&&(m="No Comments"),m='<a href="'+l+'" sasaran ="_top">'+m+"</a>",_+=m,x=1),1==displaymore&&(1==x&&(_+=" | "),_=_+'<a href="'+r+'" class="url" sasaran ="_top">More »</a>',x=1),document.write(_),document.write("</li>"),1==displayseparator&&e!=numposts-1&&document.write("")}document.write("</ul>")} //]]></script> <div class="rpplab"><script type='text/javascript'> var numposts = 5; var showpostthumbnails = true; var displaymore = false; var displayseparator = false; var showcommentnum = false; var showpostdate = false; var showpostsummary = true; var numchars = 50;</script> <script type="text/javascript" src="/feeds/posts/default/-/blogger%20tutorial?orderby=updated&alt=json-in-script&callback=labelthumbs"></script></div> <style type="text/css"> img.label_thumb{ float:left; padding:5px; border:1px solid #ddd;margin-right:10px; height:55px; width:55px; } img.label_thumb:hover{ background:#f7f6f6; } .label_with_thumbs { float: left; width: 100%; min-height: 70px; margin: 0px 10px 2px 0px; adding: 0; } ul.label_with_thumbs{margin:0;} ul.label_with_thumbs li {color:#555;padding:5px 0; min-height:65px; margin-bottom:10px;list-style:none;border-bottom:1px solid #ddd;} .label_with_thumbs a {color:#2aace3} .label_with_thumbs strong {} </style>
Widget settings:var numposts = 5;
→ Change number 5 with the number of articles you want to display, for example become 7.var showpostthumbnails = true;
→ Change true to false if you do not want to display the thumbnail.var displaymore = false;
→ Change false to true if you want to display the read more links.var showcommentnum = false;
→ Change false to true if you want to show the number of comments on the post.var showpostdate = false;
→ Change false to true if you want to show the date in the recent post.var showpostsummary = true;
→ Change true to false if you do not want to show summaryvar numchars = 50;
→ Change number 50 with amount of characters that you want./feeds/posts/default/-/blogger%20tutorial
→ Change blogger%20tutorial with the post label name that will be displayed. If the label name has space then replace the space with %20
<style type="text/css">
and </style>
Those are some recent post widget code to bloggers that I can include at this time.
How to install recent post in blogger that I wrote above is the easiest and simplest way.
If you get the way how to use the widget, then please separate the widget code and place each code at place which you like.
For example:
Css code is installed before the code
</head>
or before the code ]]></b:skin>
Script code before the code
</head>
or </body>
0 Response to "Select Recent Post Widget For Bloggers That You Love"