Cara Menampilkan Recent Post di Blog [WordPress & Blogger]

Berencana menampilkan recent posts di blog Anda? Ya, Anda datang ke tempat yang tepat. Artikel ini akan mengulas secara mendalam tutorial (step-by-step) cara memasang latest posts di blog WordPress dan Blogger. Penasaran? Yuk lanjutkan membaca, dan pelajari langkah gampangnya di bawah ini!

Menampilkan Recent Posts di WordPress

Jika Anda adalah pengguna WordPress, ada beberapa metode yang bisa Anda pilih untuk menambah latest posts di sidebar, post, maupun halaman. Mari kita ulas! 

1. Menggunakan Widget

Menampilkan latest post di blog WordPress tidaklah sulit. Untungnya, WordPress menawarkan widget bawaan yang akan memudahkan Anda menampilkan konten terbaru di sidebar atau area manapun yang bisa ditambahkan widget. Langkah-langkahnya adalah sebagai berikut:

1. Setelah masuk ke halaman Dashboard WordPress, akses menu Appearance > Widgets.
2. Temukan recent posts widget dalam daftar Available Widgets, kemudian seret ke kolom Sidebar. Atau Anda bisa mengklik widget tersebut > pilih Sidebar > tekan tombol Add Widget.
3. Konfigurasi beberapa pengaturan widget sesuai dengan keinginan Anda; seperti judul, jumlah tulisan yang akan ditampilkan, dan apakah akan menunjukan tanggal terbit konten atau tidak.
4. Jika sudah, pilih Save. 

Baca Juga: Cara Mudah Menampilkan Widget Instagram Feed Di WordPress         

2. Menggunakan Plugin

Sayangnya, widget bawaan WordPress hanya menawarkan fitur dan tampilan yang terbatas. Nah, jika ingin menampilkan thumbnails dan excerpt, Anda dapat memanfaatkan plugin seperti Recent Posts Widget With Thumbnails. Mari belajar cara instalasi dan pengaturannya!

1. Masuk ke halaman Dashboard WordPress Anda, lalu pilih menu Plugins > Add New. 
2. Tulis Recent Posts Widget With Thumbnails di kolom pencarian plugin yang terletak di area pojok kanan atas.
3. Klik Install Now pada Recent Posts Widget With Thumbnails, lalu pilih Activate.
4. Setelah proses instalasi selesai, akses menu Appearance > Widgets.
5. Cari Recent Posts Widget With Thumbnails di bawah Available Widgets, dan seret ke kolom Sidebar. Anda juga bisa menambahkannya dengan cara mengklik widget tersebut > Sidebar > Add Widget.
6. Kemudian, buka area pengaturan Recent Posts Widget With Thumbnails yang terletak di kolom Sidebar; dan kustomisasi pengaturannya sesuai kebutuhan Anda. 
7. Terakhir, klik Save.   

Baca juga: Cara Membuat Menu di WordPress dengan Mudah

3. Menggunakan Gutenberg Block

Jika Anda adalah pengguna Gutenberg Block dan ingin menambahkan latest posts ke tulisan atau halaman, berikut adalah langkah-langkahnya:

1. Bagi Anda yang ingin menampilkan latest posts di halaman, kunjungi Dashboard > Pages > All Pages atau Add New. Sedangkan untuk menambahkannya ke post, akses Dashboard > Posts > All Posts atau Add New. 
2. Klik tombol Add Block yang terletak di pojok kiri halaman editor, kemudian tulis Latest Posts di kolom Search.
3. Tentukan bagaimana latest posts tersebut akan ditampilkan, apakah dalam mode grid atau list view.
4. Setelah itu, buka tab Block yang terletak di samping kanan halaman editor. Di sana, Anda bisa memilih pengaturan yang diinginkan; seperti menampilkan excerpt atau tidak, tanggal terbit konten, jumlah kolom, kategori yang ditampilkan, dan sebagainya.
5. Tekan tombol Preview untuk meninjau tampilan latest posts Anda, lalu Publish jika sudah yakin dengan opsi tersebut.    

Menampilkan Latest Post di Blogger

Sekarang, mari kita bahas cara menampilkan latest posts di Blogger. 

1. Menggunakan Gadget RSS Feed

Cara termudah menambahkan latest posts ke Blogger adalah menggunakan gadget RSS feed. Untuk melakukannya, ikuti langkah-langkah berikut:

1. Buka Dashboard Blogger Anda dan pilih menu Layout/Tata Letak.
2. Selanjutnya klik Tambahkan Gadget/Add a Gadget dan pilih gadget Feed.
3. Tulis URL feed blog Anda. Caranya, tambahkan /feeds/posts/default di belakang link blog Anda, contohnya: https://namablog.blogspot.com/feeds/posts/default. Lalu, tekan tombol Lanjutkan. 
4. Kemudian, konfigurasikan feed Anda sesuai keinginan dan klik Simpan/Save.

Baca Juga: 10+ Template Blogger Gratis Terbaik yang Patut Anda Coba

2. Menggunakan Gadget HTML/JavaScript

Anda juga bisa menampilkan latest posts dengan bantuan gadget HTML/JavaScript. Adapun langkah-langkahnya adalah sebagai berikut:

• 1. Masuk ke Dashboard Blogger Anda, kemudian klik menu Layout/Tata Letak
• 2. Selanjutnya, pilih Tambahkan Gadget/Add a Gadget dan tambahkan gadget HTML/JavaScript 
• 3. Lalu copy dan paste kode berikut:

<style scoped='' type="text/css">
ul#recent-posts{list-style:none;margin:0;padding:0}li.recent-posts{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-word;padding:10px 0;margin:0;}
li.recent-posts:last-child{border-bottom:0;}
li.recent-posts a{color:#444;}li.recent-posts a:hover{color:#444;text-decoration:underline}
</style>
<ul id="recent-posts"></ul>
<script>
//<![CDATA[
var homePage = "https://namablog.blogspot.com/",
numPosts = 7;
function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="recent-posts"><a href="'+link+'" title="'+title+'" target="_blank" rel="nofollow">'+title+'</a></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp);
//]]>
</script>

Jangan lupa untuk mengubah “https://namablog.blogspot.com/” dengan nama blog Anda. Selain itu, tentukan juga jumlah post yang akan ditampilkan dengan mengubah angka pada baris numPosts = 7;.

• 4. Klik Save/Simpan. Nantinya, Anda akan mempunyai tampilan latest posts seperti dalam gambar ini.

Nah, jika Anda ingin menampilkan thumbnail di latest post Anda, gunakan kode berikut:

<style scoped='' type='text/css'>
#recent-posts{color:#999;font-size:12px}
#recent-posts img{background:#fafafa;float:left;height:60px;margin-right:8px;width:60px;border-radius:4px}
#recent-posts ul{margin:0;padding:0}
#recent-posts ul li{margin:0 0 10px 0;padding:0 0 10px 0;border-bottom:1px solid rgba(0,0,0,0.1)}
#recent-posts ul li:last-child{border-bottom:0}
#recent-posts ul li a{display:block;color:#222;font-weight:700;text-decoration:none;font-size:14px;margin:0 0 10px 0;line-height:normal}
</style>
<div id='recent-posts'>
<script type='text/javaScript'>
var rcp_numposts=3;
var rcp_snippet_length=150;
var rcp_info='yes';
var rcp_comment='Comments';
var rcp_disable='T?t Nh?n xét';
function recent_posts(json){var dw='';a=location.href;y=a.indexOf('?m=0');dw+='<ul>';for(var i=0;i<rcp_numposts;i++){var entry=json.feed.entry[i];var rcp_posttitle=entry.title.$t;if('content'in entry){var rcp_get_snippet=entry.content.$t}else{if('summary'in entry){var rcp_get_snippet=entry.summary.$t}else{var rcp_get_snippet="";}};rcp_get_snippet=rcp_get_snippet.replace(/<[^>]*>/g,"");if(rcp_get_snippet.length<rcp_snippet_length){var rcp_snippet=rcp_get_snippet}else{rcp_get_snippet=rcp_get_snippet.substring(0,rcp_snippet_length);var space=rcp_get_snippet.lastIndexOf(" ");rcp_snippet=rcp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rcp_commentsNum=entry.thr$total.$t+' '+rcp_comment}else{rcp_commentsNum=rcp_disable};if(entry.link[j].rel=='alternate'){var rcp_posturl=entry.link[j].href;if(y!=-1){rcp_posturl=rcp_posturl+'?m=0'}var rcp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rcp_thumb=entry.media$thumbnail.url}else{rcp_thumb="http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png"};}};dw+='<li>';dw+='<img alt="'+rcp_posttitle+'" src="'+rcp_thumb+'"/>';dw+='<div><a href="'+rcp_posturl+'" rel="nofollow" title="'+rcp_snippet+'">'+rcp_posttitle+'</a></div>';if(rcp_info=='yes'){dw+='<span>'+rcp_postdate.substring(8,10)+'/'+rcp_postdate.substring(5,7)+'/'+rcp_postdate.substring(0,4)+' - '+rcp_commentsNum+'</span>';};dw+='<div style="clear:both"></div></li>';};dw+='</ul>';document.getElementById('recent-posts').innerHTML=dw;};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results='+rcp_numposts+'&callback=recent_posts\"><\/script>');
</script>
</div>

Sesuaikan kode var rcp_numposts=3; dengan jumlah post yang ingin ditampilkan. Adapun contoh hasilnya bisa dilihat dalam gambar di bawah ini.

Tampilkan Latest Posts Anda Sekarang!

Latest post menawarkan banyak manfaat untuk blog Anda. Tidak hanya memberikan kemudahan kepada visitors untuk menemukan tulisan-tulisan terbaru, fitur ini juga bisa mendorong mereka untuk lebih berlama-lama menjelajahi blog Anda. Harapannya setelah membaca konten Anda, pengunjung kemudian akan tertarik untuk berlangganan newsletter atau bahkan membeli produk Anda.

Nah dalam artikel ini, kita sudah membahas beberapa metode yang bisa dicoba untuk menambahkan latest posts ke WordPress—yaitu menggunakan widget, plugin, dan menambahkan latest posts block ke Gutenberg editor. Sedangkan bagi pengguna Blogger, Anda bisa menambahkan fitur tersebut dengan menggunakan gadget RSS feed dan HTML/Javascript. Jadi bagaimana, metode mana yang ingin Anda coba?

Selanjutnya jika Anda ingin belajar bagaimana mengembangkan web Anda agar bisa bekerja lebih optimal dan mempunyai tampilan yang menawan, jangan lupa pelajari tutorial-tutorial menarik lainnya dalam blog Qwords.com. Tak hanya itu, di sana Anda juga akan menemukan pembahasan terkini terkait hosting, nama domain, bisnis online, dan banyak topik populer lainnya. 

Selamat belajar!