Cara Membuat Related Post Tanpa Thumbnail Keren ala Bang 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.

Minggu, Mei 21, 2017 - 8 komentar

8 komentar untuk Cara Membuat Related Post Tanpa Thumbnail Keren ala Bang Jarwo.

Silakan masukkan komentar anda. Jangan habiskan waktu hanya untuk melakukan SPAM disini.


Perlihatkan Semua Komentar Tutup Semua Komentar
.
SyamSun
Selasa, 23 Mei 2017 02.05.00 WITA

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

Balas Hapus
.
Ridho Irkham
Kamis, 25 Mei 2017 15.36.00 WITA

ijin nerapin triknya gan

Balas Hapus
.
Yosua ES
Kamis, 25 Mei 2017 19.23.00 WITA

wih..kemarin gw bingung ngedit ngeditnya.

Ehh gw ganti Template deh..

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

Balas Hapus
.
Irfan Ramadhan
Kamis, 25 Mei 2017 23.02.00 WITA

mantab bang jarwo adit makin dekat wkwkwkwk peace gan :v

Balas Hapus
.
Ozik Jarwo
Minggu, 28 Mei 2017 16.56.00 WITA

:D masih jauh kok

Balas Hapus
.
Ozik Jarwo
Minggu, 28 Mei 2017 16.57.00 WITA

Lambat agan ngeliat postnya...

Balas Hapus
.
Ozik Jarwo
Minggu, 28 Mei 2017 16.58.00 WITA

Oke semoga sukses mas

Balas Hapus