Cara Menampilkan Tulisan Terbaru (Recent Posts) di Sidebar Blog

Romeltea | Follow @romel_tea

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:

Recent Posts

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:

Cara Menampilkan Tulisan Terbaru (Recent Posts) di Sidebar Blog

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

Previous
« Prev Post
Author Image

Romeltea
Romeltea adalah onair dan online name Asep Syamsul M. Romli aka Kang Romel. Praktisi Media, Blogger, Trainer Komunikasi from Bandung, Indonesia. Follow me: facebook twitter instagram linkedin youtube

Recommended Posts

Related Posts

Show comments
Hide comments

No comments on Cara Menampilkan Tulisan Terbaru (Recent Posts) di Sidebar Blog

Post a Comment

No Spam, Please!