Cara Membuat Widget Recent Post Dengan Sangat Mudah

Cara Membuat Widget Recent Post. Halo sahabat blogger. Lagi-lagi Catatan Adi akan berbagi cara membuat recent post yang super sederhana. Ini cocok buat kalian yang emang ga suka tampilan yang terlalu rame.

Emang sih ada yang suka blog simpel. Namun sesimpel apapun ada elemen yang harus tetap ada ya. Salah satunya adalah recent post.

Recent post ini punya beberapa nama lain, seperti : post terbaru, artikel terbaru, newest articles, recent articles. Terserah sahabat kalo umpama mau mengganti namanya. 

Selain terlihat lebih elegan, memang blog yang sederhana juga memiliki keunggulan di bidang loading blog. 

Selain mengurangi kecepatan loading blog, penggunaan widget berlebihan juga tidak enak dipandang mata. Olehnya itu, kali ini Catatan Adi akan memberikan satu tutorial penggunaan widget recent posts yang sederhana.

Meski sederhana, namun recent posts ini cukup memukau karena bisa menyesuaikan diri dengan tema blog. Contohnya bisa dilihat pada gambar berikut ini:

Cara Membuat Widget Recent Post

Bagaimana caranya? Ternyata sangatlah mudah! Silahkan ikuti dengan seksama ya....

1. Masuk ke dashboard Blogspot Anda.
2. Buka pilihan tata letak.
3. Fokus ke bagian sidebar.
4. Pilih tambah gadget.
5. Pilih tambah java script / html.

Masukkan skrip di bawah ini. 

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

Setelah itu, masuk ke menu tema. Kemudian sobat silahkan masuk ke bagian Edit HTML Anda dan paste kode berikut ini tepat diatas </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>

Setelah selesai, klik Simpan dan lihat hasilnya diblog Anda. 

Ternyata sangat mudah dan keren bukan! Perhatikan bahwa recent post sangat penting sebagai faktor penunjang On Page Seo. Selamat mencoba. Baca terus artikel menarik lainnya dari Catatan Adi seputar dunia blogging. Semoga beruntung!