Cara Menciptakan Related Post / Baca Juga Di Templat Bawaan Blogspot

Related post(baca juga)

Masih perihal modifikasi templat bawaan blogspot supaya makin seo, sesudah membahas perihal cara menciptakan breadcrumbs di postingan sebelumnya, kali ini admin akan bagikan sebuah tutorial perihal 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 goresan pena baca juga dalam sebuah blog ialah link yang menuju ke postingan dalam label kategori terkait dengan postingan yang sedang di buka atau lebih jelasnya ialah postingan terkait di dalam label kategori tersebut.

Apa penting related post dalam sebuah blog? Kalau berdasarkan admin sih penting!! Kenapa? Contoh gampang seumpama kita mencari sebuah artikel yang membahas perihal breadcrumbs nah dalam post tersebut tersemat artikel perihal cara buat blog lebih seo kira2 apa yang kalian pikirkan? jika saya sih akan mengintipnya hehe, ok lanjut......

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

Pertama edit html dan cari isyarat </head> biar lebih gampang gunakan ctrl+f dan taruh isyarat 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 isyarat 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 anggun letakan css berikut di atas isyarat ]]<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 akhirnya komen di bawah untuk penampilanya ibarat punya saya.

Semoga berhasil ya jika kalian teliti niscaya sukses 😃😄😄

Bagikan Artikel ini