Cara Membuat Widget Postingan Terbaru (Recent Post) dengan Mudah

Cara Membuat Widget Postingan Terbaru (Recent Post) dengan Mudah - Mari kobarkan semangat dalam menghias blog kita sobat, ada berbagai cara untuk merubah tampilan blog menjadi keren. termasuk dengan menambahkan widget recent post (postingan terbaru) pada blog sobat. tulisan ini merupakan kelanjutan tulisan saya sebelumnya mengenai cara membuat populer post menarik dan keren.

Recent post berfungsi untuk menunjukkan pada pengunjung postingan terbaru (artikel terbaru) yang di buat si pemilik blog pada suatu daftar. Ada berbagai variasi yang dapat digunakan dalam hal ini, pada kali ini saya akan memberitahu salah satunya sobat cara menambahkan recent post dengan mudah dan cepat.

Sebenarnya cara memasang widget postingan terbaru tidak perlu dengan mengotak atik template, cukup dengan beberapa langkah sobat bisa mempunyai widget kece.  

cara menambahkan widget postingan terbaru

1. Silahkan sobat login terlebih dahulu ke blog sobat
2. Cari Tata letak kemudiah tambahkan widget baru
3. Pilih widget HTML/JavaScript

4. Copy kode script dibawah ini

<script type="text/javascript">
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/AVvXsEhd_u0wgM240viqvey_364YAohewIRoxrdY-VSLAKT97MwGFGJdm0W3Frn0JLi_bhdOYYkRGCRwEaKPc0-hObL7KhBtk4FcN9ILenFsSfACe6c7ZItJ7hY3cK0bCT9G7cu1M10rTr2FqAYO/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 = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
var post_summary = true;
var summary_chars = 40;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; margin-top: 10px;" href="http://www.indravedia.com/2015/04/menambahkan-widget-recent-post-blogger-mantab.html" rel="nofollow">Recent Posts Widget</a>
<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 10px 10px;border: 1px solid #69B7E2;}
.recent-posts-container {font-family:'Oswald', sans-serif;font-size:12px;}
ul.recent-posts-container li{list-style-type: none; margin-bottom: 10px;font-size:12px;float:left;width:100%}
ul.recent-posts-container {counter-reset: countposts;list-style-type:none;padding:0;}
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 1;position:absolute; left: 0px; font-size: 13px;font-weight: bold;color: #fff;background: #69B7E2;line-height:25px;height:25px;width:25px;text-align:center;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}
.recent-posts-container a{text-decoration:none;}
.recent-post-title {margin-bottom:5px;}
.recent-post-title a {font-size:12px; text-transform: uppercase; color: #2aace3;}
.recent-posts-details {margin: 5px 0px 0px 92px;font-size:11px;}
.recent-posts-details a{color: #777;}
</style>

5. Save widget baru sobat. 

6. Kalau pemasangan widget recent post berhasil, hasilnya akan seperti gambar dibawah ini

 

Catatan Cara menambahkan widget recent post:

• Ganti tuisan hijau dengan jumlah tulisan yang anda inginkan. misalkan sobat dalam membuat widget postingan terbaru ingin menampilkan 10 postingan yang dapat dilihat silahkan ganti dengan angka 10.
• Var showpoststhumbs: digunakan untuk menampilkan thumbail atau tidak, jika sobat tidak ingin menampilkan thumbail silahkan ganti tulisan “true” menjadi “false”
• Var Showcommentslink: digunakan untuk mengetahui jumlah komentar yang ada pada postingan sobat
• Var posts_date: mengetahui kapan tulisan di posting atau dibuat
• Var post_summary: berfungsi untuk menampilkan summary atau tidak Var summary_chars: mengetahui jumlah karakter awal postingan dalam summary

Demikian tulisan saya mengenai cara membuat widget postingan terbaru (recent post) dengan mudah semoga dapat bermanfaat bagi sobat dan dapat menambah motivasi dalam penulisan di blog. Silahkan meninggalkan komentar di kolom dibawah ini dan silahkan pula mengshare tulisan ini bla dianggap bermafaat bagi kita.

sumber: indravedia