Recent Post Widget (Latest Articles) Below Blog Posts

Blogger Tips - How are you blogger friends? This time the admin will share one of the widgets that is most popular with bloggers because it has very good functions at the blog SEO level. 

Generally the latest article widget or Recent Post Widget is installed on the front page of the blog or in the blog sidebar column, but this time the admin has slightly modified the widget so that it looks comfortable and can be installed under the article post (responsive).

Here's the short way:

• Login to your blog.
• Enter (click) Theme or Template. 
• Then click Edit HTML 
• Search for <data:post.body/> by pressing (Ctrl + F) 
• There will be several <data:post.body/> codes depending on your template type. 
• Select the second or third  <data:post.body/> , then,
• Copy the red code below and place it just below the code <data:post.body/>

<div dir='ltr' style='text-align: left;color: #fff;font-size: 12px;background: #1A7C62;padding: 8px 10px;margin: 0 0 5px;' trbidi='on'>

<b>Artikel Terbaru!</b></div>

<script type='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/AVvXsEhIpqzNU1cvcKbf77RRMzNZ4lpsDvIORditIh0KfZv_dAKZMy4JZXMCYxsOCJihzcG1cRq7xDH9z41CmfuIfV2hLi-ZP-ASelPkR4y-5RgUzD90Hm5ZkNLbM0NpDdcnYe5Ciy1YDgTRfOZZ/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+'" 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==readmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcommentslink&&(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_no = 3;

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&amp;alt=json-in-script&amp;callback=showlatestpostswiththumbs'/>

<a href='https://buktiinaja.blogspot.com/' rel='nofollow' style='font-size: 9px; color: #1A7C62; margin-top: 10px;'>Recent Posts Widget</a>

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

<style type='text/css'>

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

ul.recent-posts-container {list-style-type: none; background: #fff;padding: 0px;font:12px &#39;sans-serif&#39;, sans-serif;margin: 5px 0px 5px 0px;}

ul.recent-posts-container li:nth-child(1n+0) {background: #8AD3D2;}

ul.recent-posts-container li:nth-child(2n+0) {background: #B6E4E3;}

ul.recent-posts-container li:nth-child(3n+0) {background: #DCF3F2;}

ul.recent-posts-container li:nth-child(4n+0) {background: #F49A9A;}

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

ul.recent-posts-container li {padding:5px 10px;list-style-type: none; margin: 0 0 -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>

</b:if>

<div style='clear: both;'/>

• Next, save or save your template and see the results.
• If the post widget doesn't appear under the post, it means the code is in the wrong place, please try placing the code under another <data:post.body/> .

Hope it is useful.

Admin.
Andi AM
Celebes Blogger Community