Cara Membuat Recent Post atau Artikel Terbaru di Blog

Cara Membuat Recent Post atau Artikel Terbaru di Blog.

Berikut ini saya akan bagikan tutorial cara membuat Recent Post, artikel terbaru, artikel pilihan atau yah terserah sobat saja yah menamakannya, karena tergantung selera dan setiap blog menamakannya berbeda-beda sesuai selera.

Recent Post sangat diperlukan atau penting untuk sebuah blog. Terutama untuk meningkatkan jumlah view blog oleh pengunjung selain itu ada baiknya Recent Post juga di pasang pada saat mendaftarkan ke google adsense untuk meningkatkan kemungkinan terbesarnya diterima dan tentunya meningkatkan tampilan blog menjadi lebih keren serta sebagai alat navigasi untuk memudahkan pengunjung.

Ada banyak cara untuk membuat Recent Post yang dipilih oleh blogger mulai dari tampilan seperti daftar list judul atau sampai menggunakan tumbnail gambar. Dapat juga menampilkan daftar Recent Post yang hanya menampilkan perLabel atau kategori tertentu sehingga tentunya dapat meningkatkan view blognya.

Nah, berikut ini kita akan memulai cara membuat atau memasang Widget Recent Posts pada Sidebar Blog

#1 Cara paling simpel memanfaatkan Widget Feed

Berikut ini adalah cara paling mudah membuat widget Recent Post dengan menggunakan Feed pada blog sobat. Tampilannya berupa daftar list judul blog saja. Langkah-langkahnya yaitu:

Buka blog yang akan dibuat klik Layout/Tataletak lalu pilih pilih Feed. Masukan Link/URL atau alamat blog Anda lalu klik Countinue. Kemudian ganti judulnya dengan Artikel Terbaru atau Recent Posts dan selanjutnya tinggal klik atau Save/Simpan.

Jika menggunakan cara ini, maksimal Recent Post yang dapat di tampilkan hanya 5 saja. Selanjutnya.

#2 Memakai JavaScript Khusus

Alternatif selanjutnya adalah menggunakan javascript khusus seperti berikut ini yang akan menampilkan hanya berupa daftar list judul artikel saja. Berikut ini Langkah-langkahnya:

Buka blog lalu pilih Menu Layout/Tata Letak kemudian pilih Tambah Gadget dan pilih HTML/JavaScript. Ganti judulnya sesuai keinginan sobat dan kemudian Copy Pastekan kode di bawah ini.

<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>

Untuk menampilkan berapa jumlah Recent Post yang akan di tampilkan, sobat dapat mengganti di angka 6 yang telah saya tandai.

#3 Recent Post dengan Menggunakan Thumbnail atau Gambar

Jika dirasa kurang keren atau menarik, sobat dapat menggunakan Recent Post dengan thumbnail atau gambar. Langkah-langkahnya adalah sebagai berikut ini:

Pilih Menu Layout kemudian Tambah Gadget dan pilih HTML/JavaScript. Kemudian isi judul dan Copy Paste kode dibawah ini.

<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/AVvXsEhcUDlaUKpH8l8nE1Ij2k1zci4x8XImjdObPO71SA-nL9gws8huBTy6fXqdmEjEUr_7PvOuVSh-IgbF2ppCkZkpdgEuXw4KFr8jLC3O6POz-coT2bvhasW3qSHmlSMmpBXWNpXFH2nitytd/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=\"https://karin3110.blogspot.com/feeds/posts/default?orderby=updated&alt=json-in-script&callback=rcentbytag\"><\/script>");

</script>

Perhatikan juga kode yang sudah saya tandai di atas:

var numposts = 5;  ganti angka ini sesuai dengan jumlah Recent Post yang ingin sobat tampilkan. Terserah berapa saja.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcUDlaUKpH8l8nE1Ij2k1zci4x8XImjdObPO71SA-nL9gws8huBTy6fXqdmEjEUr_7PvOuVSh-IgbF2ppCkZkpdgEuXw4KFr8jLC3O6POz-coT2bvhasW3qSHmlSMmpBXWNpXFH2nitytd/s70-c/KM+Icon.png Jika postingan sobat tidak ada gambar maka akan tampil logo seperti terlihat pada gambar di atas. Sobat juga dapat mengganti logo sesuai dengan yang sobat inginkan.

https://karin3110.blogspot.com selanjutnya kode ini tentu sobat sudah paham yah, ganti dengan URL blog sobat.

Nah, selanjutnya yaitu jika sobat ingin menampilkan Recent Post PerLabel atau Kategori. Sobat cukup mengganti kode seperti kode berikut ini.

Hapus mulai dari Script di atas sesuai dengan yang saya tandai dan ganti dengan kode berikut ini.

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

Kemudian selanjutnya ganti  Label  yang akan di tampilkan. Jika di label terdapat dua kata maka spasinya tinggal ditambahkan kode ini %20 misalnya seperti ini. Tips blogger jadinya seperti ini tips%20blogger.

Dan terkhir jangan lupa klik “Save/Simpan”

Catatan: Terkadang ada yang bertanya mana yang bagus untuk digunakan. Jawabannya itu tergantung dari selera sobat semua. Jika sobat ingin tampilan keren dan menarik maka gunakan yang menggunakan thumbnail atau gambar. Jika sobat ingin yang fast loading maka gunakan Daftar List Judul saja. Kalau mau yang lebih ringan lagi. Gak Usah Pakai Recent Post!!!...

Itulah cara atau tutorial membuat Recent Post, mudahkan untuk diterapkan. Semoga artikel ini memberikan manfaat untuk sobat semua.