Cara Menampilkan Recent Post di Blog [WordPress & Blogger]

Berencana menampilkan recent posts di blog milikmu? Ya, kamu 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 kamu adalah pengguna WordPress, ada beberapa metode yang bisa kamu 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 kamu 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 kamu bisa mengklik widget tersebut > pilih Sidebar > tekan tombol Add Widget.
3. Konfigurasi beberapa pengaturan widget sesuai dengan keinginanmu; seperti judul, jumlah tulisan yang akan ditampilkan, dan apakah akan menunjukkan tanggal terbit konten atau tidak.
4. Jika sudah, pilih Save. 

2. Menggunakan Plugin

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

1. Masuk ke halaman Dashboard WordPress-mu, 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. Kamu 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 kebutuhanmu. 
7. Terakhir, klik Save.   

3. Menggunakan Gutenberg Block

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

1. Bagi kamu 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, kamu 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 kamu, 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-mu dan pilih menu Layout/Tata Letak.
2. Selanjutnya klik Tambahkan Gadget/Add a Gadget dan pilih gadget Feed.
3. Tulis URL feed blog-mu. Caranya, tambahkan /feeds/posts/default di belakang link blog-mu, contohnya: https://namablog.blogspot.com/feeds/posts/default. Lalu, tekan tombol Lanjutkan. 
4. Kemudian, konfigurasikan feed kamu sesuai keinginan dan klik Simpan/Save.

2. Menggunakan Gadget HTML/JavaScript

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

• 1. Masuk ke Dashboard Blogger milikmu, 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-mu. Selain itu, tentukan juga jumlah post yang akan ditampilkan dengan mengubah angka pada baris numPosts = 7;.

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

Nah, jika kamu ingin menampilkan thumbnail di latest post-mu, 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 Kamu Sekarang!

Latest post menawarkan banyak manfaat untuk blog kamu. Tidak hanya memberikan kemudahan kepada visitors untuk menemukan tulisan-tulisan terbaru, fitur ini juga bisa mendorong mereka untuk lebih berlama-lama menjelajahi blog-mu.

Harapannya setelah membaca konten-mu, pengunjung kemudian akan tertarik untuk berlangganan newsletter atau bahkan membeli produk milikmu.

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, kamu bisa menambahkan fitur tersebut dengan menggunakan gadget RSS feed dan HTML/Javascript. Jadi bagaimana, metode mana yang ingin kamu coba?

Selanjutnya, jika kamu ingin belajar bagaimana mengembangkan website-mu agar bisa bekerja lebih optimal dan mempunyai tampilan yang menawan, jangan lupa pelajari tutorial-tutorial menarik lainnya dalam blog Qwords.com.

Tak hanya itu, kamu juga akan menemukan pembahasan terkini terkait hosting, nama domain, bisnis online, dan banyak topik populer lainnya. Selamat belajar!