Cara Membuat Widget Recent Post Berdasarkan Label Tertentu Di Blog

Recent post merupakan widget yang berisi daftar post/artikel terbaru di blog sobat. Recent merupakan property blog yang harus ada jika anda sedang mendaftarkan blog anda ke google adsense. Seperti yang saya baca di blognya Mas Sugeng jika anda sedang mendaftarkan blog anda ke google adsense setidaknya ada widget populer post/recent post.

Recent post ini akan langsung berisi artikel terbaru yang diterbitkan (Semua artikel),namun ada juga recent post yang berisi artikel terbaru hanya berdasarkan label tertentu. Recent post ini sangatlah sederhana karena tidak thumbnail dan cuplikan artikel yang bisa anda lihat seperti gambar dibawah.

Fungsi dan Manfaat Recent Post

Recent post berfungsi untuk menampilkan postingan yang baru kita terbitkan,seperti yang saya jelaskan diatas recent post juga berfungsi untuk melengkapi property blog anda jika anda ingin mendaftar adsense untuk blog anda.

Recent post ini cocok untuk blog yang memiliki style minimalis dan simple. Namun juga cocok untuk blog material design. Jika anda tertarik untuk memasang recent post tersebut maka anda bisa ikuti langkah dibawah. Ingin buat recent post grid,baca juga Cara Membuat Grid Recent Post

Langkah Membuat Recent Post Sederhana

Langkah 1

Buka blogger,klik Tata Letak → Tambahkan Gadget → HTML/JavaScript

Langkah 2

Beri judul untuk gadget yang akan ditambahkan ,lalu salin kode dibawah ini dan letakkan pada gadget yang akan dibuat

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

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

Supaya recent post bisa muncul berdasarkan label tertentu silakan cari kode /feeds/posts/default lalu ganti dengan kode berikut /feeds/posts/default/-/SEO

Ganti SEO dengan label yang ingin dimunculkan di recent post. Lalu Simpan gadget

Selesai dan coba lihat hasilnya,anda bisa mengatur style CSS sesuka anda untuk menyesuaikan dengan tema blog sobat. Cukup sekian tutorial cara membuat widget recent post di blog,semoga bermanfaat.