Cara Menampilkan Posting Terbaru Di Sidebar Blogger

Cara Menampilkan Posting Terbaru di Sidebar Blogger

BANYAK cara menampilkan widget recent post atau goresan pena terbaru di sidebar blogger.

Banyak pula jenis atau tipe tampilannya, mulai judul doang sampai plus gambar thumbnail.

Widget Recent Posts atau Tulisan Terbaru merupakan bab internal linking sekaligus navigasi bagi pengunjung untuk membuka goresan pena terbaru atau goresan pena lain di blog kita.

Saya sendiri memasang dua jenis widget posting terbaru di blog ini. Pertama, di sidebar halaman dalam, berupa judul goresan pena doang.

Kedua, di halaman depan berupa judul dan gambar di sedebar/kolom tengah dengan label tertentu (per kategori).

Menampilkan Posting Terbaru di Sidebar Blog

Cara #1 Daftar Judul - Menggunakan Feed Widget
Jika ingin menampilkan berupa daftar judul doang, kita dapat memakai widget Feed bawaan blogger. Cara pasangnya:

1. Layout > Add a Gadget > pilih Feed
2. Masukkan URL atau alamat blog Anda > klik Continue
3. Ubah judulnya dengan Posting Terbaru atau Recent Posts
4. Save!

Namun, menampilkan daftar goresan pena terbaru dengan memakai widget Feed ini suka bermasalah dengan judul widget, suka ngilang! Maka, gunakanCara Menampilkan Posting Terbaru di Sidebar Blogger yang kedua.

Cara #2 Daftar Judul - Menggunakan Kode JavaScript

1. Layout > Add a Gadget > pilih HTML/JavaScript
2. Ubah judulnya dengan Posting Terbaru atau Recent Posts
3.  Copas instruksi berikut 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+'" sasaran ="_top" title="Cara Menampilkan Posting Terbaru di Sidebar Blogger">'+ 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>

Cara #3 Daftar Judul plus Gambar Thumbnail
Penampakannya menyerupai ini:

Cara pasang:
1. Layout > Add a Gadget > pilih HTML/JavaScript
2. Isi Judul dengan Posting Terbaru
3. Copas instruksi berikut ini ke kolom Content:

<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/AVvXsEgc498p1MXHwFIlZC6RflKvR63WF0qtlC9rUBuQQLJbWcrHe-l6zb_A_xPO9S8jcdwk8klVr_3a6K0ofp0-rWFNxcCRUR-OhKSHpaqt371v4SBB81T52pV7NdS5vT_UZB9pSyLjY6ijVw_U/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 Menampilkan Posting Terbaru di Sidebar Blogger"><img class="rct-thumb" alt="Cara Menampilkan Posting Terbaru di Sidebar Blogger Cara Menampilkan Posting Terbaru di Sidebar Blogger" src="'+l+'"/></a>');document.write('<strong><a href="'+i+'" sasaran ="_blank" title="Cara Menampilkan Posting Terbaru di Sidebar Blogger" 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:///feeds/posts/default?orderby=updated&alt=json-in-script&callback=rcentbytag\"><\/script>");
</script>

Jika ingin menampilkan posting terbaru dari label atau kategori tertentu, maka instruksi terakhir yang dipakai yang ini:

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

Catatan: 
Ubah alamat blog yang warna merah dengan alamat blog Anda dan Label yang akan ditampilkan.

4. Save!

Cara Lain
Anda dapat buka Help Logger untuk cara dan jenis Recent Posts lainnya.

Demikian Cara Menampilkan Posting Terbaru di Sidebar Blogger. Wasalam. (www.romelteamdia.com).*

Share this post