Cara Menciptakan Recent Post/Artikel Terbaru Blog

Baca Juga

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

Banyak macam cara dan versi tampilan Recent Posts yang dapat 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 aku 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 aku akan menunjukkan cara menciptakan widget Recent Posts atau Artikel Terbaru dengan bermacam Versi dan isyarat 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 dibentuk ---> klik Layout/Tataletak ---> pilih Feed
• Masukan Link/URL atau alamat blog Anda ---> kemudian 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 menciptakan Widget dengan Rancangan JavaScript dan hanya daftar Judul artikel.
Perhatikan langkahnya:

• Kembali pilih sajian Latout/Tata Letak ---> kemudian pilih Tambah Gadget ---> kemudian pilih HTML/JavaScript
• Isi atau rubah judul menjadi Artikel Terbaru atau terserah ----> kemudian
• Pasang isyarat dibawah ini caranya copy kemudian 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+'" sasaran ="_top" title="Cara Membuat Recent Post/Artikel Terbaru Blog">'+ 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 manis pakai cara berikut:

#3 Tampilan Daftar terbaru berikut gambar atau Thumbnail lengkap

Cara dan langkahnya menyerupai cara 2:

• Pilih sajian Layout ---> Add Gadget ---> pilih HTML/JavaScript
• Isi saja kolom titel dengan judul pola Recent Articels
• Jika sudah siap Copy semua isyarat pada kotak dibawah pribadi 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/AVvXsEg24R3V3Y1HJpm0pVctHF4W64JJb0KoEA7qi4k6rIW5Y79-Wo2nrNz43i3NElsiukG2MPP0AsyOKSzamKYAUhjepKjjYqoEULSO8ASlq71G5pcpOBqUUehsaRoIAI_gDpue6WBXrBRvGeM0/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+'" sasaran ="_blank" title="Cara Membuat Recent Post/Artikel Terbaru Blog"><img class="rct-thumb" alt=" Menampilkan Widget Recent Post atau Postingan Artikel Terbaru merupakan satu hal terpenti Cara Membuat Recent Post/Artikel Terbaru Blog" src="'+l+'"/></a>');document.write('<strong><a href="'+i+'" sasaran ="_blank" title="Cara Membuat Recent Post/Artikel Terbaru Blog" 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, kalau Anda ingin menmpilkan Artikelnya itu hanya perlabel/kategori caranya hanya cukup mengganti isyarat paling bawah saja

Hapus isyarat mulai <script> ganti dengan isyarat 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 cuilan Link/URL (http://www.bloganda.com) dengan Alamat blog milik Anda.
• Serta tulis nama Label yang akan ditampilkan, kalau label 2 kata menggunakan spasi tinggal tambah isyarat %20 contoh: kalau label blog Anda Tips blogging maka menulisnya Tips%20blogging.

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

Kesimpulan dalam menciptakan Widget Recent Post

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