Cara membuat related post / baca juga di templat bawaan blogspot

Related post(baca juga)

Masih tentang modifikasi templat bawaan blogspot supaya makin seo, setelah membahas tentang cara membuat breadcrumbs di postingan sebelumnya, kali ini admin akan bagikan sebuah tutorial tentang cara menambahkan related post di templat bawaan blog.

Sudah pada tahu kan apa itu related post? Yang belum tahu nih admin jelaskan!
Related post atau tulisan baca juga dalam sebuah blog adalah link yang menuju ke postingan dalam label kategori terkait dengan postingan yang sedang di buka atau lebih jelasnya adalah postingan terkait di dalam label kategori tersebut.

Apa penting related post dalam sebuah blog? Kalau menurut admin sih penting!! Kenapa? Contoh mudah seumpama kita mencari sebuah artikel yang membahas tentang breadcrumbs nah dalam post tersebut tersemat artikel tentang cara buat blog lebih seo kira2 apa yang kalian pikirkan? kalau aku sih akan mengintipnya hehe, ok lanjut......

Untuk membuat related post dalam templat bawaan blogspot cukup mudah dengan kalian memahami id tata letak widget post untuk lebih jelasnya ikuti tutorial di bawah

Pertama edit html dan cari kode </head> biar lebih mudah gunakan ctrl+f dan taruh kode berikut di atasnya

<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>

Kedua ganti kode <data:post.body/> ke dua atau ketiga dan ganti dengan kode berikut

   <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>

Dan supaya tampilan nya cantik letakan css berikut di atas kode ]]<b:skin> atau </style>

 .post-terkait {position:relative;background:#fff;padding:0;margin:10px 15px 0 0;float:left;width:165px;border:1px solid #1b71bc} 
 .post-terkait h4{background:#1b71bc !important;padding:5px 0 !important;margin:0;text-align:center !important;font-size:15px !important;font-weight:400;text-transform:uppercase;color:#fff !important}
 .post-terkait ul {margin:0;padding:0} .post-terkait ul li {list-style:none !important;padding:7px 0;margin:0 7px;border-bottom:2px dotted #ddd;line-height:1.4em !important;text-align:left !important}
 .post-terkait ul li:last-child{border:none !important}
 .post-terkait a {color:#1b71bc;font-size:13px !important}
 .post-terkait a:hover {text-decoration:underline}

Di coba ya hasilnya komen di bawah untuk penampilanya seperti punya saya.

Semoga berhasil ya kalau kalian teliti pasti sukses 😃😄😄

Share this post