Cara Memasang Related Post Otomatis di Postingan Blog

Selamat Pagi sahabat blogger

Mas Yoga pada Minggu pagi ini, akan update sebuah tutorial "Cara Memasang Related Post Otomatis di Postingan Blog ". Pagi tadi saya dapat chat dari teman di Grub Facebook Blogger Indonesia, dia bilang "Mas updetkan Cara pasang related post di postingan blog, tapi harus secara otomatis biar tidak balik edit terus",,,

Untuk itu pagi ini Mas Yoga menjawab pertanyaannya,, Related Post, sebuah postingan yang sobat buat dari yang lama sampai yang baru. bahkan kadang buat postingan yang lama tersingkir dari postingan baru,,, untuk itu di buatkanlah Related Post supaya sobat yang membaca sebuah artikel dapat langsung melihat Postingan yang lama, sehingga Related Post ini sangat bermanfaat. bahkan blog/website terbesar-pun menggunakan Related Post ini.

Tapi kadang Related Post tidak otomatis, karena tidak di pasang di template melainkan sebagai widget. itu salah sekali, karena Related Post di buat untuk melihat semua Postingan blog sobat. Jadi harus di edit sendiri untuk menampilkan postingan blog yang lain,,, SANGAT RIBET!!!
Maka dari itu Mas Yoga hari ini akan membagikan tutorialnya, supaya Related Post yang sobat buat menjadi otomatis dan tanpa edit apapun,,, SANGAT SIMPLE!!!

Yuk kita bahas tutorial-nya ;

1. Buka Blogger > Template > Edit HTML > Copy Pastekan kode di bawah ini tepat di atas kode ]]></b:skin> atau </style>,,,

/*RelatedPost*/

.post-terkait{display:block;position:relative;background:#fff;padding:0;margin:15px auto 20px;width:100%}.post-terkait h4{background:#07ACEC;padding:7px 10px;display:inline-block;font-size:12px;text-transform:uppercase;color:#fff;border-radius:3px;line-height:normal;border:0}.post-terkait h4:before{display:none}.post-terkait ul{margin:0;padding:0}.post-terkait ul li{list-style:none;padding:1px 0;line-height:1.5em}.post-terkait a{color:#07ACEC;font-size:13px}.post-terkait a:hover{color:#000;text-decoration:underline} 

2. Langkah kedua,, cari kode <data:post.body/> (biasanya akan muncul 1-3 kode tergantung templatenya. sobat cari saja yang Kedua) atau kode <div class='artbody' itemprop='articleBody description'><data:post.body/></div>,,,

Hapus kode tersebut dan ganti dengan kode baru di bawah ini ;

<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='post-terkait'>
<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=3&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<h4>Baca Juga</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
<div expr:id='&quot;post2&quot; + data:post.id' class='artbody' itemprop='articleBody description'><data:post.body/></div>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var t=s.substr(0,s.length/3);
var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>

3. Langkah Ketiga,, Letakkan kode Java Script di bawah ini tepat di atas kode penutup </head> ;

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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 < 20) { 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>
</b:if>

**Pemasangan kode Related Post Otomatis sudah selesai,, jangan lupa untuk selalu Simpan Template jika melakukan peng-editan.

Related Post ini akan muncul Acak dan Otomatis pada tulisan-tulisan di dalam postingan, jadi perlu repot untuk mengubah letaknya di editor postingan.
Jika ada kode yang tidak berhasil, segera tanyakan di kotak komentar. atau langsung hubungi Mas Yoga,, Mohon Bantuannya!!!

Semoga tutorial ini bermanfaat buat postingan sobat,, Jangan lupa untuk selalu meninggalkan komentar di artikel Mas Yoga.
Terima Kasih juga untuk Dunia Blanter yang selalu membantu Mas Yoga.

Sampai Jumpa, Tunggu updetan Tutorial selanjutnya
Terima Kasih dan semoga berhasil