Cara Membuat Artikel Terbaru Recent Post di Blogger Blogspot via Widget

Oleh Markombur -
Artikel terbaru atau postingan terbaru atau dalam bahasa inggrisnya disebut Recent Post adalah artikel atau postingan yang baru saja diposting disuatu blog atau situs.

Banyak blogger menginginkan agar artikel terbaru tampil di blognya dengan alasan agar pengunjung dapat dengan mudah mengetahui artikel terbaru yang baru saja diposting oleh sipemilik blog.

Menampilkan Recent Post juga bertujuan untuk meningkatkan jumlah view yang tentunya dapat menambah pendapatan adsense.

Namun, tidak semua pengguna blogger mengetahui bagaimana cara membuat Artikel Terbaru muncul di blognya.


Oleh karena itu, saya menulis artikel ini agar anda bisa membuatnya di blog kamu.

Cara membuat artikel terbaru ini menggunakan Widget, sehingga cara membuatnya pun sangat mudah. Bisa diterapkan pada template blogger keluaran terbaru maupun yang lama.

Berikut cara membuat widget artikel terbaru atau recent post di blogspot blogger seperti dikutip dari laman jagoankode.com:

1. Masuk ke Blogger
2. Klik Tata Letak, kemudian klik Tambahkan Gadget
3. Klik HTML/JavaScript
4. Kemudian masukkan kode berikut:

A. Jika anda ingin membuat tampilan postingan atau artikel terbaru tanpa tanpa nomor, masukkan kode berikut:

<style scoped='' type="text/css">
ul#posting-terbaru{list-style:none;margin:0;padding:20px;     background: linear-gradient(70deg, #ffffff 30%, rgba(0,0,0,0) 30%), linear-gradient(30deg, #f5f5f5 60%, #fbfbfb 60%);font-weight:300}li.posting-terbaru{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-word;padding:10px 0;margin:0;}
li.posting-terbaru:last-child{border-bottom:0;}
li.posting-terbaru a{color:#444;}li.posting-terbaru a:hover{color:#444;text-decoration:underline}
</style>
<ul id="posting-terbaru"></ul>
<script>
//<![CDATA[
let urlblogkalian = "https://jagoankode-one.blogspot.com/",
jumlahpost = 5;
function PostingTerbaru(jagoankode){if(document.getElementById("posting-terbaru")){let jagoankodemantap=jagoankode.feed.entry,title,link,content="",jagoankodeasem=document.getElementById("posting-terbaru");for(let s=0;s<jumlahpost;s++){for(let g=0;g<jumlahpost;g++){if(jagoankodemantap[s].link[g].rel=="alternate"){link=jagoankodemantap[s].link[g].href;break}}let title=jagoankodemantap[s].title.$t;content+='<li class="posting-terbaru"><a href="'+link+'" title="'+title+'" target="_blank" rel="nofollow">'+title+'</a></li>'}jagoankodeasem.innerHTML=content}}let jagoankodeasu=document.createElement('script');jagoankodeasu.src=urlblogkalian+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+jumlahpost+'&callback=PostingTerbaru';document.getElementsByTagName('body')[0].appendChild(jagoankodeasu);
//]]>
</script>

B. Jika anda ingin membuat tampilan artikel terbaru dengan menggunakan nomor, masukkan kode script berikut:

<style scoped='' type="text/css">
ul#posting-terbaru{counter-reset: my-sec-counter;list-style:none;margin:0;padding:20px;background: linear-gradient(70deg, #ffffff 30%, rgba(0,0,0,0) 30%), linear-gradient(30deg, #f5f5f5 60%, #fbfbfb 60%);font-weight:300}li.posting-terbaru{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-word;padding:10px 0;margin:0;}
li.posting-terbaru::before{counter-increment: my-sec-counter;content: counter(my-sec-counter)".";font-weight: 800;font-style:italic;margin-right:5px;}
li.posting-terbaru:last-child{border-bottom:0;}
li.posting-terbaru a{color:#444;}li.posting-terbaru a:hover{color:#444;text-decoration:underline}
</style>
<ul id="posting-terbaru"></ul>
<script>
//<![CDATA[
let urlblogkalian = "https://jagoankode-one.blogspot.com/",
jumlahpost = 5;
function PostingTerbaru(jagoankode){if(document.getElementById("posting-terbaru")){let jagoankodemantap=jagoankode.feed.entry,title,link,content="",jagoankodeasem=document.getElementById("posting-terbaru");for(let s=0;s<jumlahpost;s++){for(let g=0;g<jumlahpost;g++){if(jagoankodemantap[s].link[g].rel=="alternate"){link=jagoankodemantap[s].link[g].href;break}}let title=jagoankodemantap[s].title.$t;content+='<li class="posting-terbaru"><a href="'+link+'" title="'+title+'" target="_blank" rel="nofollow">'+title+'</a></li>'}jagoankodeasem.innerHTML=content}}let jagoankodeasu=document.createElement('script');jagoankodeasu.src=urlblogkalian+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+jumlahpost+'&callback=PostingTerbaru';document.getElementsByTagName('body')[0].appendChild(jagoankodeasu);
//]]>
</script>

Catatan:

Ganti url blog kamu: https://jagoankode-one.blogspot.com/ dengan url blog kalian masing masing. Untuk menentukan berapa judul artikel terbaru yang ingin ditampilkan pada widget, silahkan ganti jumlahpost = 5; sesuai keinginan.

Sumber: https://www.jagoankode.com/responsive-widget-recent-postartikel-terbaru/

Komentar

Posting Komentar

Artikel Terbaru