Cara Membuat Recent Post/Artikel Terbaru Blog

Menampilkan Widget Recent Post atau Postingan Artikel Terbaru merupakan satu hal terpenting dalam menata sebuah blog, karena widget ini mudah digunakan (User friendly) oleh pengunjung untuk melihat atau mencari postingan terbaru (Recent articles) di blog tersebut.

Banyak macam cara dan versi tampilan Recent Posts yang bisa dipilih oleh blogger perlabel atau keseluruhan kategori, begitupun dengan tampilannya lengkap dengan box bergambar (Thumbnail) ada pula yang simpel cukup daftar judulnya saja semua tergantung selera pemilik blog yang atur.

Cara Memasang Widget Recent Post/Artikel Terbaru Blog

Selain untuk menampilkan urutan Artikel teranyar dan seterusnya Widget Recent articles juga sebagai alat navigasi untuk memudahkan pengunjung yang dipasang pada Sidebar semua platform blog.

Menurut saya sendiri memasang widget bawaan blogspot banyak pilihan juga problem, kalau tidak benar akan Artikel tidak tampil disemua hanya di Home atau hanya satu Artikel saja.

Untuk itu saya akan memberikan cara membuat widget Recent Posts atau Artikel Terbaru dengan bermacam Versi dan kode khusus.

Cara Membuat atau memasang Widget Recent Posts pada Sidebar Blog

#1 Cara paling simpel memanfaatkan Widget Feed

Menu ini tersedia di blogspot (cuman cara ini hanya menampilkan daftar judul saja simpel) tapi sangat ringan efektif membuatnya.
Langkahnya:

• Buka blog yang akan dibuat ---> klik Layout/Tataletak ---> pilih Feed
• Masukan Link/URL atau alamat blog Anda ---> lalu klik Countinue
• Rubah judulnya dengan Artikel Terbaru atau Recent Posts
• Tinggal klik Save/Simpan

Untuk tutorial selengkapnya silahkan baca: Cara Memasang Postingan Terbaru dengan Feed RSS

#2 Memakai JavaScript Khusus

Cara ini merupakan cara simpel Anda cukup membuat Widget dengan Rancangan JavaScript dan hanya daftar Judul artikel.
Perhatikan langkahnya:

• Kembali pilih menu Latout/Tata Letak ---> kemudian pilih Tambah Gadget ---> lalu pilih HTML/JavaScript
• Isi atau rubah judul menjadi Artikel Terbaru atau terserah ----> kemudian
• Pasang kode dibawah ini caranya copy lalu pastekan

<script>
//<![CDATA[
function showlatestposts(json){document.write('<ul id="recent-posts">');for(var i=0;i<6;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var postsurl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){postsurl=entry.link[k].href;break;}}
document.write('<li class="recent-posts">');document.write('<a href="'+ postsurl+'" target ="_top" title="'+ posttitle+'">'+ posttitle+'</a>');document.write('</li>');}
document.write('</ul>');};
document.write("<scr" + "ipt type=\"text/javascript\" src=\"/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts\"></scr" + "ipt>");
//]]>
</script>

Kode diatas widget hanya tampil daftar judul saja, kalau dirsa kurang bagus pakai cara berikut:

#3 Tampilan Daftar terbaru berikut gambar atau Thumbnail lengkap

Cara dan langkahnya seperti cara 2:

• Pilih menu Layout ---> Add Gadget ---> pilih HTML/JavaScript
• Isi saja kolom titel dengan judul contoh Recent Articels
• Jika sudah siap Copy semua kode pada kotak dibawah langsung Paste pada kolom konten

<style>
img.rct-thumb{float:left;margin-right:10px;height:72px;width:72px;}
.recent-by-tag{width:100%;margin:0;padding:0}
ul.recent-by-tag li{padding:10px 0;margin-bottom:0;border-bottom:1px solid #ddd}
.recent-by-tag li{font-size:13px;list-style:none;padding-left:0;margin:0;padding:0;overflow:hidden}
.recent-by-tag a{font-family:'Oswald',sans-serif;font-size:16px;font-weight:normal;margin:0;}
.recent-by-tag strong{padding-left:0}
span.showdates{font-size:12px;margin:10px 0 0}
</style>
<script type='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var showpostdate = true;</script>
<script type='text/javascript'>
//<![CDATA[
function rcentbytag(e){document.write('<ul class="recent-by-tag">');for(var t=0;t<numposts;t++){var n=e.feed.entry[t];var r=n.title.$t;var i;if(t==e.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if(n.link[o].rel=="replies"&&n.link[o].type=="text/html"){var u=n.link[o].title;var f=n.link[o].href}if(n.link[o].rel=="alternate"){i=n.link[o].href;break}}var l;try{l=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);if(a!=-1&&b!=-1&&c!=-1&&d!=""){l=d}else l="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPHmQHQpSLQ9AHy5Bbi9uV-sRfy775HoWGu93CJP3BtEUVSq8xQzAFQLmzKpbUYhEH6tVzEbodn-6Fl50IWFPOdur6oZQUnF6pIWI_BIKIc8fELIvnWjgF8V5HfdRJcZv4W8wpto3Dy7HA/s70-c/KM+Icon.png"}var p=n.published.$t;var v=p.substring(0,4);var m=p.substring(5,7);var g=p.substring(8,10);var y=new Array;y[1]="Januari";y[2]="Februari";y[3]="Maret";y[4]="April";y[5]="Mei";y[6]="Juni";y[7]="Juli";y[8]="Agustus";y[9]="September";y[10]="Oktober";y[11]="November";y[12]="Desember";document.write('<li class="clear">');if(showpostthumbnails==true)document.write('<a href="'+i+'" target ="_blank" title="'+r+'"><img class="rct-thumb" alt="'+r+'" src="'+l+'"/></a>');document.write('<strong><a href="'+i+'" target ="_blank" title="'+r+'" rel="nofollow">'+r+'</a></strong>');document.write('<br>');var x="";var T=0;if(showpostdate==true){x='<span class="showdates">'+x+g+" "+y[parseInt(m,10)]+" "+v+"</span>";T=1}document.write(x);document.write("</li>");if(t!=numposts-1)document.write("")}document.write("</ul>")}
//]]>
</script>
<script>
document.write("<script src=\"http://www.bloganda.com/feeds/posts/default?orderby=updated&alt=json-in-script&callback=rcentbytag\"><\/script>");
</script>

Kode diatas akan menampilkan semua Artikel terbaru, jika Anda ingin menmpilkan Artikelnya itu hanya perlabel/kategori caranya hanya cukup mengganti kode paling bawah saja

Hapus kode mulai <script> ganti dengan kode ini:

<script>
document.write("<script src=\http://www.bloganda.com"/feeds/posts/default/-/Label?orderby=updated&alt=json-in-script&callback=rcentbytag\"><\/script>");
</script>

Perhatian!

• Ubah atau ganti bagian Link/URL (http://www.bloganda.com) dengan Alamat blog milik Anda.
• Serta tulis nama Label yang akan ditampilkan, jika label 2 kata memakai spasi tinggal tambah kode %20 contoh: kalau label blog Anda Tips blogging maka menulisnya Tips%20blogging.

4. Jika sudah semua Jangan lupa klik "Save/Simpan"

Kesimpulan dalam membuat Widget Recent Post

Diatas merupakan tampilan widget dengan Gadget sederhana blogger, mungkin Anda ingin memasang tampilan Recent Posts lebih keren lagi itu bisa saja memanfaatkan situs Helplogger
Untuk menemukan kode untuk membuat Recent Posts bermacam versi dan variasi.