Cara Meletakkan Related Post Dalam Entri Artikel

Kali ini akan kita bahas mengenai menempatkan related post tepat pada entri post, mungkin kedenganrannya agak sedikit aneh karena tidak seperti biasanya. Hal ini kita lakukan karena mungkin ada sebagian teman blogger sudah agak sedikit jenuh dengan tampilan related post yang selalu berada dibawah posting.

Mungkin dengan hal yang berbeda ini akan membuat peningkatan visitor pada entri posting kita. Langkah yang perlu kita lakukan untuk meletakkan related post pada entri posting bisa disimak bibawah ini.

Masuk ke akun blogger.
Masuk ke menu tab Template > Edit HTML.
Letakkan kode dibawah ini tepat diatas 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>

Selanjutnya ganti kode  <data:post.body/>  yang kedua dengan kode dibawah 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>

Letakkan style dibawah ini diatas kode </style> atau ]]></b:skin>.

/* Related Post dalam posting - skin design */

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

Setelah semua selesai dan sesuai dengan tutorial diatas, langkah terakhir SAVE template dan bisa dilihat hasilnya.
Demikian tutorial yang bisa kami sampaikan, jika kurang dipahami silahkan tinggalkan pesan.