Cara Membuat Related Post Tanpa Thumbnail Keren ala Kode Jarwo
Cara Membuat Related Post Tanpa Thumbnail Keren ala Bang Jarwo

Related Post atau sering disebut post terkait adalah widget yang menampilkan postingan lainnya yang memiliki kesamaan label. Misal postingan A di blog anda berlabelkan SEO, dan postingan B di blog anda juga berlabelkan SEO.

Maka bila anda membuka postingan A, judul dari postingan B juga ikut muncul pada widget ini. Begitu pula sebaliknya.

Tanpa basa-basi lagi, berikut beberapa kelebihan widget related post hanya judul ini:
  1. SEO Friendly, menggunakan tag H6
  2. Tanpa CSS, Pure Javascript dan HTML
  3. Ringan
  4. Dapat menampilkan multi label
  5. Responsif
  6. Tidak menimbulkan masalah loading blog seperti Leverage Browser Caching, dan sebagainya

Sebagai tambahan, related post ini tidak menggunakan thumbnail dan snippet, hanya menampilkan judul dengan warna yang menyesuaikan link di blog anda (misal kalau blog ini biru muda).

Juga Javascript yang saya pakai bukan 100% buatan saya, tetapi saya mendapatkannya dari blog Giribig, dan saya rombak sedikit agar lebih bagus. Jadi bukan 100% ala Bang Jarwo

Langsung saja berikut cara pemasangannya.

  • Pertama, cari kode </head> atau &lt;!--<head/>--&gt; (bila tidak ada </head>) dan masukkan kode ini tepat diatasnya.

<script type='text/javascript'>//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;}}}}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];}}
relatedTitles = tmp2;
relatedUrls = tmp;}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 5) {
document.write('<li><a href="' + relatedUrls[r] + '">' +
relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;}
i++;}
document.write('</ul>');}
//]]></script>

  • Lalu, cari kode </article> dan masukkan kode ini diatasnya

<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<center><h6>Artikel Terkait <b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'> - </b:if></b:loop></b:if>
</h6></center>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>

  • Simpan template, dan lihat hasilnya

  1. Anda dapat mengganti angka  dengan jumlah postingan yang ingin anda tampilkan nantinya.
  2. Untuk pemasangan langkah kedua, anda dapat menggantinya dengan menempatkan kode diatas di Tata Letak > Tambahkan Widget > HTML/Javascript.

Bagaimana? Apakah widget dapat bekerja dengan baik di blog anda? Bila anda mengikuti langkah demi langkahnya, widget pasti terpasang dengan sempurna.
Silakan pilih sistem komentar anda ⇛   

Silakan berkomentar dengan sopan. Jangan buang-buang waktu anda hanya untuk melakukan SPAM, Fake Account, dan Flamming disini.

Unknown Kode Jarwo
Unknown
# 21 Juni 2018 11.04

punya saya ga ada kode

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 20 Maret 2018 16.21

Hapus aja semua CSS yang berkaitan dengan popularpost di template agan...

Baru jadikan popular post tanpa thumbnail lewat tata letak.

Balas
Muhammad Fahri Kode Jarwo
Muhammad Fahri
# 20 Maret 2018 13.03

Dijadiin populer post bisa om?

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 28 Mei 2017 16.58

Oke semoga sukses mas

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 28 Mei 2017 16.58

Silahkan mas

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 28 Mei 2017 16.57

Lambat agan ngeliat postnya...

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 28 Mei 2017 16.56

:D masih jauh kok

Balas
Irfan Ramadhan Kode Jarwo
Irfan Ramadhan
# 25 Mei 2017 23.02

mantab bang jarwo adit makin dekat wkwkwkwk peace gan :v

Balas
Yosua ES Kode Jarwo
Yosua ES
# 25 Mei 2017 19.23

wih..kemarin gw bingung ngedit ngeditnya.

Ehh gw ganti Template deh..

Tiba tiba ketemu sama nih post..ywdh terlanjur :/ :'v

Balas
Ridho Irkham Kode Jarwo
Ridho Irkham
# 25 Mei 2017 15.36

ijin nerapin triknya gan

Balas
SyamSun Kode Jarwo
SyamSun
# 23 Mei 2017 02.05

Terimakasih gan.
masih nggarap http://www.syamsun.com/

Balas