Cara Membuat Artikel Terkait (Related Post) dalam Postingan Blog

Follow @romel_tea
POSISI artikel terkait (related post) biasanya ada di bagian bawah postingan. Related Posts juga bisa ditampilkan di tengah-tengah artikel atau di sela-sela postingan, sebagaimana biasa ditampilkan situs-situs berita dengan judul "Baca Juga".

Cara Membuat Artikel Terkait (Related Post) Dalam Postingan Blog

Anda ingin membuatnya di blog Anda? Fungsinya sih sebagai navigasi sekaligus internal link yang bisa menambah ke-SEO-an konten blog.

Cara Membuat Artikel Terkait (Related Post) Dalam Postingan Blog

Berikut ini Cara Membuat Artikel Terkait (Related Post) Dalam Postingan Blog sebagaimana dishare Bung Frangki. Desainnya sudah saya ubah menjadi "full width" atau lebar 100% mengikuti area postingan.

1. Tema > Edit HTML
2. Copas kode CSS Artikel Terkait (Related Post) dalam Postingan Blog berikut ini di atas kode ]]></b:skin>

.post-terkait {position:relative;background:#fff;padding:0;margin:15px 0;float:left;width:100%;}
.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;line-height:1.4em !important;text-align:left !important;border-bottom:1px dotted #eee;}
.post-terkait a {color:#1b71bc;}
.post-terkait a:hover {text-decoration:underline}

2. Copas kode JavaScript Artikel Terkait (Related Post) dalam Postingan Blog berikut ini di atas kode </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>

3. Cari (Ctrl+F) kode <data:post.body> yang kedua, lalu hapus!
4. Ganti dengan kode berikut 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 class='artbody' expr:id='&quot;post2&quot; + data:post.id' 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>

5. Save! Simpan template.

Itu dia Cara Membuat Artikel Terkait (Related Post) dalam Postingan Blog. Mudah 'kan? (blogromeltea.blogspot.com).*

Thanks for reading Cara Membuat Artikel Terkait (Related Post) dalam Postingan Blog | Tags:

Next Article
« Prev Post
Previous Article
Next Post »

Related Posts

Your Comments

No Spam, Please!