Cara Menampilkan Related Post 'Baca Juga' di Tengah Postingan Blog

Baca Juga

Cara Menampilkan Related Post 'Baca Juga' di Tengah Postingan Blog. Desainnya seperti gambar di bawah ini. Muncul di tengah artikel.

Cara Menampilkan Related Post 'Baca Juga' di Tengah Postingan Blog.

Begini cara memasangnya di tema Blogger Anda.

1. Tema > Edit HTML

2. Copas kode CSS & JavaScript berikut ini di atas kode </head>

<b:if cond='data:view.isPost'>
<style>
.related-middlepost{background:#f1f1f1 none repeat scroll 0 0;margin:30px auto;padding:35px 15px 5px;position:relative}
.related-middlepost h4{color:#c00;font-size:16px;font-weight:700;left:23px;margin:0;position:absolute;text-transform:uppercase;top:10px}
.related-middlepost ul{margin:0;padding:0}
.related-middlepost ul li {border-bottom: 1px solid #e3e3e3;font-size: 15px;font-weight: 700;margin: auto;padding: 7px 0 7px 7px;position: relative;transition: all 0.3s ease 0s;list-style:none;}
.related-middlepost a{color:#444}
.related-middlepost a:hover{color:#48d}
.related-middlepost ul li:nth-child(n+4){display:none}
.related-middlepost ul li:nth-child(3){border-bottom:medium none}
</style>
<script type='text/javascript'>
//<![CDATA[
var relatedmiddle = new Array(); var relatedmiddleNum = 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]; relatedmiddle[relatedmiddleNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedmiddleNum] = entry.link[k].href; relatedmiddleNum++; 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] = relatedmiddle[i];}} relatedmiddle = 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((relatedmiddle.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedmiddle.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedmiddle[r] + '</a></li>'); if (r < relatedmiddle.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
//]]>
</script>
</b:if>

3. Cari (Ctrl+F) kode <data:post.body/> dan hapus <data:post.body/> yang kedua atau ketiga.

4. Ganti kode <data:post.body/> yang dihapus tadi dengan kode HTML  berikut ini

<div expr:id='&quot;post1&quot; + data:post.id'/>
<b:if cond='data:view.isPost'>
<div class='related-middlepost'>
<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>
</b:if>
<div expr:id='&quot;post2&quot; + data:post.id'><p><data:post.body/></p></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/1.5);
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. Simpan!

Demikian Cara Menampilkan Related Post 'Baca Juga' di Tengah Postingan Blog. Mudah 'kan?

Related Post 'Baca Juga' di Tengah Postingan Blog itu familiar karena dipasang juga di hampir semua situs berita.

Sumber