Cara Manual Membuat Artikel Terkait (Related Post) di Tengah, di Atas atau di Bawah Postingan

Syauqisubuh- Pernah melihat suatu blog yang ada kotak “baca juga” yang berisi artikel terkait? Nah, pada kesepatan kali ini saya akan memberikan trik agar artikel / postingan blog terdapat Artikel terkait berdasarkan label di semua postingannya secara otomatis.

Contoh gambar “Baca Juga”

Sebelumnya artikel ini saya kutip dari blog mastah tentang bagaimana cara membuat kotak artikel terkait di tengah postingan blog, seperti pada website jalan tikus. dan sudah saya rangkai kata-katany agar anda dapat dengan mudah memahami isi dari artikel ini.

Setelah saya lihat-lihat blognya, Saya menemukan cara alternatif agar artikel terkait ini dapat berada di tengah postingan blog.

Cara Manual Memasukan Artikel Terkait Ke Postingan Blog adalah sebagai berikut, 

1. Masuk ke Template, Edit HTML Lalu Kalian Cari Kode

2. Setelah Ketemu kode,  Masukan Kode Berikut Di Atasnya 

<style type=”text/css”>
/*Artikel Terkait*/
.bacajuga{position:relative;display:inline-block;border:1px solid #DDD;margin:20px 0}
.bacajuga h4{background-color:#FFF;position:absolute;margin-left:30px;margin-top:-14px;padding:0 15px;border:1px solid #DDD}
.bacajuga ul{padding:11px 41px 0;list-style:none}
.bacajuga ul a:before{font-family:fontawesome;content:”f105″;padding-right:10px}
.bacajuga li{border-radius:5px;border-bottom:1px solid rgba(227,227,227,0.33);line-height:1.7em}
</style>
<script type=”text/javascript”>
//<![CDATA[
function bacajuga(e){document.write(“<ul>”);for(var t=0;t<e.feed.entry.length;t++){for(var r=0;r<e.feed.entry[t].link.length&&”alternate”!=e.feed.entry[t].link[r].rel;r++);var n=”‘”+e.feed.entry[t].link[r].href+”‘”,l=e.feed.entry[t].title.$t,a=”<li><a href=”+n+'” title=”‘+l+'” target=”_blank”>’+l+”</a> </li>”;document.write(a)}document.write(“</ul>”)}
//]]>
</script>

2. Simpan Tema, Pemasangan scriptnya sudah selesai, Nah, sekarang kita tinggal memasang script di setiap postingan yang ingin di psang artikel terkait berdaasrkan labelnya.

3. Silahkan anda masuk ke postingan yang ingin di pasang, terus pilih tab HTML, jangan console yah. Kalo sudah masuk ke tab html di postingan, kalian copy kode berikut ke dalamnya, silahkan sesuaikan letaknya mau di letakan setelah kalimat / gambar apa. ingat copy ya jangan replace kodenya.

<div class=’bacajuga’> <h4>Baca Juga</h4><script src=”/feeds/posts/summary/-/Tutorial?max-results=5&alt=json-in-script&callback=bacajuga”></script></div>

4. Silahkan ganti kata ini “Tutorial” Dengan Label Yang Ingin di tampilkan 

5. Dan Sesuaikan juga angka max-results=5 dengan artikel yang ingin di tampilkan.

6. kalo sudah, tinggal anda di publikasikan dan selesai deh 

7. Done dan selesai