Cara Membuat Recent Posts Simple dan Sederhana

Emenespy ~ Pagi para blogger sekalian :D mumpung kagak ada kerjaan, saya mau membagikan tutorial "Cara Membuat Recent Posts Simple dan Sederhana" untuk blogger yang disana, hehe...

Recent Posts adalah widget yang menampilkan sejumlah postingan terbaru yang telah kita update dan publish di blog. Struktur Recent Posts yaitu menampilkan postingan terbaru duduk di bagian (kolom) paling atas disususl oleh postingan sebelumnya dan sebelumnya dan sebelumnya dan sebelumnya lagi ... hehe. Kalo bingung lihat penampakannya di gambar atas:

Sebenanya banyak tampilan widget recent posts yang sangat elegan yang di bagikan oleh para blogger di luar sana, namun saya pribadi lebih suka yang simple dan sederhana seperti yang tampak dalam demo tadi. Tampilan blog ini juga sederhana dan template ini adalah template bawaan blogger menjadi seperti seperti sekarang ini.

Cukup curhatannya, langsung saja kita terapkan recent postsnya bagi yang ingin dan silahkan tutup laman ini bagi yang tidak mau. hehehe...

• Login terlebih dahulu ke akun blogger kalian masing-masing.
• Pilih "Tata Letak" kemudian klik tambahkan gadget. Ada lebih baiknya menempatkan widget ini di sidebar blog (di sisi kanan blog).

• Pilih Html/Java Script
• Pastekan kode dibawah ini dan berikan judul sesuka kalian mau recent posts/postingan terbaru/artikel terbaru atau apapun itu.

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

• Klik simpan, dan selesai, eith tunggu dulu ga, tampilannya belum sempurna.
• Selanjutnya pilih tab template dan klik edit html
• Kopikan kode dibawah ini tepat diatas kode </head>

<style type='text/css'>
#recent-posts{
    width:auto;
    padding:0 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 solid #ddd;
    padding:6px 0
}
#recent-posts li:first-child{
    border-top:none;
}
</style>

• Klik simpan template dan selesai deh...

Demikianlah "Cara Membuat Recent Posts Simple dan Sederhana". Sekarang kalian bisa lihat tampilan widget recent posts di blog kalian masing-masing. Jika error atau tidak sama dengan penampakan yang ada di demo, coba kalian cek dan teliti cara diatas apakah telah kalian terapkan dengan benar dan tepat. Jika belum juga sama silahkan comment di bawah ini keluhan yang anda rasakan :v wkwkw...

Tapi saya yakin pasti semuanya berhasil karena caranya pun sangat simple dan sederhana serta mudah.

Selamat mencoba and Happy Blogging...

Sumber: Blogooblok~