Membuat Recent Post, Populer Post, dan Rekomendasi Post ditengah Posting

Developers.WapBlog.ID - Selamat malam dan selamat datang di blog developers tim Official WapBlog.ID
Beberapa kali saya melihat pertanyaan seperti judul pada artikel kali ini. Atau mungkin sejenis lainnya berdasarkan global child tags lainnya.

Nah pada kesempatan kali ini, mari kita bahas.
Pada Tutorial ini, saya hanya membutuhkan waktu sekitar 5 menit menulis javascript dengan library jquery dan beberapa menit untuk membuat style simple.

Berikut javascript yang kamu perlukan, untuk diingat pada contoh ini saya menggunakan Recent Post yang bisa kalian baca dokumentasinya pada dokumentasi tema WapBlog.ID bagian Global Child Tags.

Function Javascript

<script>function rcPost(){
var a = [<wb:post_mostrecent>
<max_view>3</max_view>
<if>{ID: '<wb:post_mostrecent_id>', title: '<wb:post_mostrecent_title>', link: '<wb:post_mostrecent_link>'},</if>
</wb:post_mostrecent>];
if(a.length > 0 && window.location.pathname.match(/^\/([a-z0-9\-]+).xhtml$/g)){
var b = $('.article-content p'), c = 2, d = '';
if(a.length > 0){
d += '<ul class="recent-in-post"><li class="rc-title">Kamu mungkin suka</li>';
for(var i=0; i<a.length; i++){
d += '<li class="rcp-item"><a href="<wb:blog_url>/'+a[i].link+'.xhtml">'+a[i].title+'</a></li>';
}
d += '</ul>';
}
if(b.length > 0){
var i=1;
$('.article-content p').each(function(i){
if(i == c){
$(this).after(d);
}
});
}
}
}</script>

Untuk bisa menjalankan JavaScript diatas, kamu membutuhkan pustaka Javascript dari JQuery. Jadi pastikan tema yang kamu gunakan sudah ada JQuery-nya dan jika belum kalian bisa menggunakan library dari Google Hosted Library yang saya rekomendasikan atau bisa menggunakan javascript bawaan WapBlog.ID yang juga memiliki cache 1 tahun:

JQuery v 3.5.1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Dan jangan lupa, javascript diawal kalian letakan dibawah dari library jquery tema kalian. Selanjutnya jangan lupa memanggil function bernama rcPost(); dalam state ready.

Ready State

<script>$(document).ready(function(){
rcPost();
});</script>

Jika tema kalian sudah memiliki ready state, kalian hanya perlu memanggil function rcPost(); satu kali.
Jika tutorial ini kalian ikuti dengan baik, maka kalian akan menemukan Recent Post ditengah artikel ditengah tepatnya pada paragraf ke-2 posting kalian

Untuk snippet pada blog ini mungkin akan saya perbaiki dihari-hari kosong lainnya. Nah untuk merubah dimana posisi recent post ini akan ditampilkan kamu bisa melihat function rcPost() dan mencari variable c = 2 dan ganti angka 2 menjadi angka yang kalian inginkan.

Nah tutorial ini juga berlakuk untuk Popular Post dan Rekomendasi Post. Selamat mencoba!