Cara Menampilkan Tulisan Terbaru (Recent Posts) di Sidebar Blog

Baca Juga

Salah satu widget atau elemen yang wajib ada adalah daftar tulisan terbaru (recent post). Widget ini untuk menampilkan daftar judul artikel atau posting blog terbaru.

Selain berguna untuk pembaca (tahu tulisan terbaru), recent post widget juga berfungsi sebagai navigasi dan internal linking yang menjadi bagian dari tips seo.

Blogger tidak menyediakan widget khusus untuk menampilkan recent posts, tapi kita bisa menggunakan widget Feed.

Namun, widget Feed kadang tidak berfungsi jika menggunakan template blog bukan bawaan Blogger. Sousinya, kita menggunakan kode untuk Menampilkan Tulisan Terbaru (Recent Posts) di Sidebar Blog.

Cara Menampilkan Tulisan Terbaru

Widget recent post ini hanya menampilkan judul, tanpa gambar, sehingga ringan, fast loading. Ini tampilannya:

Cara Pasangnya di Sidebar Blog:

1. Klik Layout (Tata Letak) > Add a Gadget

2. Pilih HTML/Javascript

3. Isi judul dengan Recent Posts atau Terbaru

4. Copas kode berikut ini di kolom Content.

<style>

#recent-posts{width:auto;padding:10px;margin:0 auto;border:1px solid #ddd}

#recent-posts ul,#recent-posts li{list-style:none}

#recent-posts a{text-decoration:none}

#recent-posts li{border-top:1px dotted #ddd;padding:6px 0}

#recent-posts li:first-child{border-top:none}

#recent-posts h2{margin:12px}

</style>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='widget HTML' data-version='1' id='HTML3'>

<h2 style='margin:15px;padding: 10px;background: #f1f1f1;'>Recent Posts</h2>

<div class='widget-content'>

<script>

//<![CDATA[

function showlatestposts(json){document.write('<ul id="recent-posts">');for(var i=0;i<5;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>

</div>

<div class='clear'/>

</div>

</div></b:if>

5. Save! Simpan

KODE LAINNYA

Kode Recent Post Lainnya dengan tampilan seperti ini:

Berikut ini kode dan cara memasangnya.
Login ke akun Blogger Anda.

1. Klik Layout (Tata Letak) > klik Add a Gadget > pilih HTML/JavsScript
2. Isi Judul Widget dengan Terbaru atau Tulisan Terbaru
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>

Catatan: Angka 6 dalam kode di atas adalah jumlah postingan terbaru yang ditampilkan. Bisa diubah, namun sebaiknya biarkan saja menampilkan lima tulisan.

4. Save!

Kode Recent Posts Alternatif

Masih ada dua kode lainnya, dengan fungsi yang sama -- menampilkan recent post berupa judul.

Kode 1

<script type="text/javascript">
function showrecentposts(json){for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}posttitle=posttitle.link(posturl);if(standardstyling)document.write('<li>');document.write(posttitle)}if(standardstyling)document.write('</li>')} </script><ul>
<script type="text/javascript">var numposts = 5;var standardstyling = true;</script><script type="text/javascript" src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts"></script></ul>

Kode 2

Kode di bawah ini lebih mudah lagi cara memasangnya, yaitu cukup klik Layout > Add a Gadget > Pilih HTML/Javascript > Isi judul widget dengan Terbaru atau Recent Post > simpan kode berikut ini di kolom Content:

<div class="terbaru">

<script> function artikelterbaru(e){document.write("<ul>");for(var t=0;t<e.feed.entry.length;t++){for(var r=0;r<e.feed.entry[t].link.length&&"alternate"!=e.feed.entry[t].link[r].rel;r++);var n="<li><a href="+("'"+e.feed.entry[t].link[r].href+"'")+'">'+e.feed.entry[t].title.$t+"</a> </li>";document.write(n)}document.write("</ul>")} </script> <script src="/feeds/posts/summary/?max-results=5&alt=json-in-script&callback=artikelterbaru"></script>

</div>

<style>

.terbaru ul li {list-style: initial;margin-left: 15px; border-bottom: 1px dashed #eee;padding: 5px 0;}

.terbaru a {color:#2b2b2b;font-weight: 700;font-size: 15px;}

.terbaru a:hover {color:#c00}

</style>

Save!

Itu dia cara Menampilkan Tulisan Terbaru (Recent Posts) di Sidebar Blog -- simple recent post for Blogger, title only and fast loads! Sumber kode dari template blog Maskolis dan lainnya. Hasil "ngintip" view source codes :)

Jika ingin menampilkan tulisan terbaru plus gambar thumbnail, kodenya sudah saya share di Cara Memasang  Recent Posts dengan Gambar.*