Umumnya widget artikel terbaru atau Recent Post Widget dipasang di halaman depan blog atau di kolom sidebar blog, namun untuk kali ini admin sedekit memodifikasi widgetnya sehingga terlihat nyaman dan dapat dipasang di bawah post artikel (responsive).
Berikut cala singkatnya:
- Login blog agan.
- Masuk (klik) Tema atau Template.
- Lalu klik Edit HTML
- Cari <data:post.body/> dengan cara tekan (Ctrl + F)
- Disana akan ada beberapa code <data:post.body/> trgantung jenis template agan.
- Pilih <data:post.body/> yang kedua atau yang ketiga, lalu,
- Copy code warna merah dibawah ini dan letakkan pas dibawah code <data:post.body/>
<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/AVvXsEjp1ZdaNjk17q3CfS0uUXn__lwyWpwQWJe8t-_877mcH-KGib5PLfS7qYC4qy9k0ZgSY_F5EDc1wlg-HsY8cweE0ESiFdvnq8CQyI4Ki6LDEMVVy1xTsDxUYOHyCVdPEujTDC8QBBXBAefP/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&alt=json-in-script&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 'sans-serif', 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;'/>
- Selanjutnya simpan atau save template agan dan lihat hasilnya.
- Jika dibawah post widgetnya belum muncul, berarti codenya salah tempat, silahkan coba letakkan codenya dibawah <data:post.body/> yang lain.
Admin.
Andi AM
Celebes Blogger Community
Artikel Terbaru!
Recent Posts Widget
