Recent Post merupakan fitur suatu blog yang mana fitur ini berfungs untuk menampilkan artikel paling terbaru yang telah diterbitkan / publikasikan dari blog anda.
Recent post atau artikel terbaru yang diterbitkan ini bisa dipasang pada sidebar dari blog anda, widget recent post minimalis ini cukup bagus untu semua template blogger yang telah banyak bertebaran diinternet.
Lihat Juga : Bootstrap Tutorial Membuat Breadcrumbs
Untuk pemasangan widget recent post blogger minimalis ini sangatlah mudah dilakukan, anda bisa membacanya melalui tutorial membuat recent post artikel tebaru blog minimalis.
Recent post ini menggunakan javascript untuk memanggil artikel terbaru dari blog anda, jadi harap perhatikan tutorialnya dengan telti agar membuat recent post berkerja dengan baik dan optimal di blog anda.
Berikut ini tutorial membuat recent artikel blog
Membuat widget recent post blogger minimalis.
1. Masuk Blogger
2. Klik Tata Letak
3. Disini kalian pilih widget sidebar untuk menempatkan recent post berada di sidebar dan klik Tambahkan gadget untuk memulai penempatan kode recent post blog.
4. Lalu cari dan pilihlah widget HTML/Javascript
5. Berilah nama bebas bisa Recent post, Artikel Tebaru atau yang lainnya
6. Copy kode recent post dibawah dan pastekan pada kotak widget HTML/Javasript
<div class="recent-kenscripts">
<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-title-kenscripts">'),document.write(n),document.write('</li><div class="recent-summ-kenscripts">'),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="recent-post-date-kenscripts">'+m[parseInt(u,10)]+" "+c+" "+o+"</div>")}}
</script>
<script type="text/javascript">
var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestposts">
</script><a style="font-size: 9px; color: #CECECE;margin-top:10px;" href="https: //kenscripts.blogspot.com/" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
.recent-kenscripts {counter-reset: countposts;list-style-type: none;}
.recent-kenscripts a {text-decoration: none;color: #49A8D1;}
.recent-kenscripts a:hover {color: #000;}
.recent-kenscripts li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 1;position:relative;font-size: 15px;font-weight: bold;color:#fff;background:#69B7E2; margin:13px 5px 0px -6px;line-height:30px;width:30px;height:30px;text-align:center;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}li.recent-title-kenscripts{margin-bottom: 5px;padding: 0;}
.recent-title-kenscripts a {color: #444;text-decoration: none;font: bold 13px "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}
.recent-post-date-kenscripts {font-size: 11px;color: #999;margin:5px 0px 15px 32px;}
.recent-summ-kenscripts {border-left:1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 10px; font: 15px Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif;}
</style></div>
Catatan : Gantilah link https://kenscripts.blogspot.com/ pada kode javascript diatas dengan link blog kalian
7. Done
Membuat recent post ini sangatlah mudah bukan, mungkin tampilannya tidak sesuai dengan selera kalian lakukanlah pengedita pada bagian CSSnya agar sesuai selera kalan.
Lihat Juga : Cara Membuat Efek Gelap dan Terang Saat Hover Gambar
Sekian tutoril kali ini, semoga dapat membantu kalian.
Terima kasih telah berkunjung.
Demo