Cara Membuat Widget Recent Post Keren di blog

Recent Post adalah widget yang diperlukan agar pengunjung dapat melihat artikel apa saja yang terbaru.  jadi ini berguna untuk kalian yang ingin mempromosikan artikel-artikel terbaru dari blog kalian agar blog kamu jadi terkenal dan pengungjung kamu pun meningkat setiap hari nya.

kali ini saya akan share cara menambahkan atau membuat widget recent post agar terlihat keren dan kece di blog kamu.

contoh recent post blog dengan thumbnail

Oke langsung saja ikuti tutorial dibawah ini.

1. Login ke akun blogger kalian

2. Pilih Menu "Layout" atau "Tata Letak"

3. Klik "Tambah Gadget" Pada bagian sidebar, lalu pilih "HTML/JavaScript" 

4. Setelah muncul jendela baru, copy semua coding dibawah ini lalu paste kan di konten lalu simpan

<style> <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/AVvXsEirLizZ18IpJwP4OcndDTkbG3yY-uOuBNlq3F017InxTFmbUmp6CZ3K76Vhg9HrVJPZdNRJdbEX6uSJ2qu5HuwamxPGZvLcyhQ6HpRVozZu93axnriTlGn_4qEzPsDT3kwYVBubgYTG1EbN/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>

KETERANGAN CODING :

var numposts 5 adalah jumlah post yang akan tampil dalam widget
var showpoststhumbs untuk mengatur apakah akan menampilkan thumbnail atau tidak, jika tidak ingin tampilkan thumbnail, ganti tulisan "true" menjadi "false"
var showcommentslink untuk menampilkan link komentar + Jumlah komentar dari postingan yang tampil.
var posts_date untuk pengaturan menunjukkan tanggal posting
var post_summary untuk pengaturan apakah ingin menampilkan summary atau tidak
var summary_chars mengatur jumlah karakter awal posting yang muncul dalam summary. Bisa dikurangi atau ditambah.

Silahkan diedit sesuai ke inginan kalian. Intinya "<b>true</b>" berarti perintah tampilkan dan "<b>false</b>" perintah sembunyikan. Paste semua code di bagian isian konten.Kemudian klik "Simpan".

Oke Sekian dari saya coba kalian lihat perubahannya pada web nya sudah bisa ? :) Jika sudah bisa ya alhamdulilah tapi jika belum bisa atau mengalami kesulitan silahkan comment dibawah dengan bahasa yang baik ya makasih....