Cara Menampilkan Posting Terbaru di Sidebar Blogger

Follow @romel_tea
Cara Menampilkan Posting Terbaru di Sidebar Blogger
Cara Menampilkan Posting Terbaru di Sidebar Blogger

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

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

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

Saya sendiri memasang dua jenis widget posting terbaru di blog ini. Pertama, di sidebar halaman dalam, berupa judul tulisan 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 bisa menggunakan 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 tulisan terbaru dengan menggunakan 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 kode 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+'" 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>

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

Posting Terbaru Daftar Judul plus Gambar Thumbnail

Cara pasang:
1. Layout > Add a Gadget > pilih HTML/JavaScript
2. Isi Judul dengan Posting Terbaru
3. Copas kode 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="http://2.bp.blogspot.com/-giova1ZCh-A/Uzq6L8QTJNI/AAAAAAAAAJc/USXictTq_xs/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.romelteamedia.com/feeds/posts/default?orderby=updated&alt=json-in-script&callback=rcentbytag\"><\/script>");
</script>

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

<script>
document.write("<script src=\"http://www.romelteamedia.com/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 bisa buka The Blogger Guide dan Help Logger untuk cara dan jenis Recent Posts lainnya.

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

Thanks for reading Cara Menampilkan Posting Terbaru di Sidebar Blogger | Tags:

Next Article
« Prev Post
Previous Article
Next Post »

Related Posts

Your Comments

9 komentar

Tulis komentar
Ka Wanto
AUTHOR
October 22, 2016 delete

permisi mas saya liat di halaman beranda ada sidebar ditengah menampilkan gambar dan judul, bagaimana cara membuatnya.. terima kasih

Reply
avatar
Romel Tea
AUTHOR
October 23, 2016 delete

Pake kode Cara #2, gambarnya di-full width-kan jadi 100%

Reply
avatar
Steve Ruhak
AUTHOR
March 25, 2017 delete

Gan cara #2, untuk menghilangkan tanggalnya bagaimna caranya? trima kasih sebelumnya

Reply
avatar
Romel Tea
AUTHOR
March 28, 2017 delete

Ubah kode var showpostdate = true menjadi var showpostdate = false

Reply
avatar
Mas Rozak
AUTHOR
August 15, 2017 delete

siap terimaksih banyak sudah berhasil

Reply
avatar
Anonymous
AUTHOR
January 07, 2018 delete

Wah di blogku ga bisa gan 😩

Reply
avatar
shelanuraini
AUTHOR
February 17, 2018 delete

Terimaksih...bermanfaat :)

Reply
avatar
March 26, 2018 delete

labelnya hanya bisa 1? bisa menampilkan 2 label sekaligus gk

Reply
avatar

You comment, I'll visit back your blog. If you have one. Komentar SPAM dan LINK AKTIF tidak akan muncul.