Cara Membuat Related Post di Tengah Postingan

Cara membuat Related Post Di Tengah Artikel - Cara Membuat Related Post di Tengah Postingan cukup menarik untuk di lakukan, hampir disemua template blog menggunakan cara ini, Salah satu nya ada Viomagz punya mas sugeng. Fungsi Related Post di Tengah Postingan sendiri adalah guna mempermudah pengunjung untuk melihat artikel apa saja yang terkait dengan postingan yang sedang di baca pengunjung, Biasanya akan saling berhubungan.

Cara membuat artikel terkait atau related post di tengah-tengah artikel ini tidak jauh beda dengan cara memasang iklan adsense di tengah postingan yang banyak beredar di luaran sana. Disini kita hanya perlu menambahkan sedikit bumbu kode JavaScript dan kode CSS agar dapat menampilkan widget related post tersebut.

Lalu gimana cara memasang atau membuat Artikel Terkait, Related Post, atau Baca Juga di tengah postingan blog tersebut? Jadi, pada  kesempatan kali ini saya akan mencoba untuk menjelaskan kepada sobat bagaiman cara membuat artikel terkait ditengah postingan blog. mari disimak

Cara Membuat Related Post di Tengah Postingan

1. Masuk ke Dashboard blog
2. Pilih Tema dan Edit HTML
3. Di Edit HTML, Cari kode </head>, (Agar mempermudah gunakan fungsi CTRL+F)
4. Copy script di bawah ini dan letak kan tepat diatas kode </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style type='text/css'>

/* related and ads on middle postpage */

#inline_wrapper{display:block;padding:0;margin:0 auto}
.related_inline_wrapper{width:100%;display:block;overflow:hidden}
.related-post-by-title{width:80%;margin:15px auto;display:block;float:left;position:relative}
.related-post-by-title ul{padding:18px 17px 17px 30px;border:1px solid #ddd;margin:0}
.related-post-by-title h4{border:1px solid #ddd;display:inline-block;background:#fff;padding:0 15px;margin:0;position:absolute;top:-12px;left:40px;font-size:15px;font-weight:500}
.related-post-by-title li a{font-size:14px;font-weight:500!important;margin-top:10px!important}
.ads_middle{margin:15px auto 0;padding:0;text-align:center;display:block;position:relative;}
.ads_middle span{background:#ddd;color:#999;display:none!important;margin:15px 0 0;padding:0 9px!important;float:left;font-size:12px;}
@media screen and (max-width:600px){.related-post-by-title{width:100%;}}
</style>
<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>

5. Cari kode <data:post.body/> , kode tersebut ada beberapa di temakita, jadi cobalah satu persatu
6. Lalu hapus kode <data:post.body/> tadi dan ganti dengan script di bawah ini

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='widget-middle' id='widget-middle' itemprop='articleBody'><data:post.body/></div>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='inline_wrapper' id='inline_wrapper'>
<div class='related_inline_wrapper' id='related_inline_wrapper'>
<!-- Related posts inline -->
<div class='related-post-by-title' id='related-post-by-title'>
<h4>Baca juga:</h4>
<b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'/> <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> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>
</div>

<!-- Related posts inline -->

</div>
</div>
<script type='text/javascript'>
function insertAfter(addition,target) {var parent = target.parentNode;if (parent.lastChild == target) {parent.appendChild(addition); } else {parent.insertBefore(addition,target.nextSibling);}}
var middleads = document.getElementById(&quot;inline_wrapper&quot;);var target = document.getElementById(&quot;widget-middle&quot;);
var opsi1 = target.getElementsByTagName(&quot;br&quot;);if (opsi1.length &gt; 0){insertAfter(middleads,opsi1[3]);}
var opsi2 = target.getElementsByTagName(&quot;blockquote&quot;);if (opsi2.length &gt; 0){insertAfter(middleads,opsi2[0]);}
var opsi3 = target.getElementsByTagName(&quot;h2&quot;);if (opsi3.length &gt; 0){insertAfter(middleads,opsi3[0]);}
</script>
</b:if>

7. Save Template

Catatan:
1. Perhatikan pada script diatas (nomor 6) disana ada tertulis max-results=3 angka 3 ini adalah jumlah artikel terkait yang akan ditampilkan. kamu dapat menggantinya sesuai selera
2. Perhatikan pada kode di atas (nomor 6) disana ada tertulis [3], [0], dan [0] fungsi nya adalah untuk meletakan posisi widget artikel terkait tersebut di dalam postingan, semakin tinggi nilainya maka akan semakin kebawah. silahkan kamu kreasikan

Itulah tutorial singkat mengenai bagaimana cara membuat related post di tengah postingan atau artikel, menggunakan artikel terkait di tengah postingan ini memiliki banyak manfaat diantaranya yaitu agar meningkatkan pageview blog dan juga bisa memperkecil bounce rate blog kalian. jika pengunjung tertarik.

Semoga bermanfaat untuk sobat semua, Terimakasih

Dadang Kurnia

Hanya seorang Nubie, Memulai blog Sebagai Hobby.

Share this post