Cara Membuat Artikel Terkait Di Dalam Postingan Blog

Related post/artikel terkait merupakan widget untuk menunjukan postingan yang sama dengan postingan yang pembaca baca. Biasanya artikel/post yang muncul pada related post berdasarkan labeh yang sama dengan artikel yang sedang dibaca pembaca. Artikel terkait ini akan muncul ditengah-tengah artikel,tidak seperti artikel terkait lainnya yang muncul setelah/dibawah artikel.

Bukan hanya kita bisa memang iklan adsense di tengah-tengah artikel tetapi kita juga bisa memasang artikel terkait di tengah-tengah artkel juga. Tutorial ini saya dapatkan dari blog http://www.arlinadzgn.com/2017/01/memasang-artikel-terkait-di-dalam-postingan.html. Tujuan dari memasang artikel terkait ini pastinya yaitu untuk meningkatkan page view situs kita,selain itu juga membantu pengunjung/pembaca untuk menemukan artikel lain yang bermanfaat. Selain itu juga bertujuan untuk memberikan rujukan kepada pembaca untuk membaca artikel lainnya.

Artikel terkait/related post ini akan muncul secara otomats disetiap artikel yang anda buat,jadi artikel yang lama/lawas pun akan muncul related post nya dtengah. Dengan wdiget ini anda tidak perlu lagi untuk repot-repot memasang link secara manual di postingan.

Baca juga : Cara Membuat Related Post Di Dalam Artikel

Jika anda ingin memasang artikel terkait di tengah-tengah postingan,maka simak langkah-langkahnya berikut ini.

Cara Membuat Artikel Terkait Di Dalam Postingan

1. Silakan buka dasbr blog anda,lalu buka menu Template → Edit HTML

2. Salin kode dibawah ini,lalu letakkan tepat diatas kode </head> 

 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
var relatedSimply = new Array(); var relatedSimplyNum = 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]; relatedSimply[relatedSimplyNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedSimplyNum] = entry.link[k].href; relatedSimplyNum++; 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] = relatedSimply[i];}} relatedSimply = 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((relatedSimply.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedSimply.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedSimply[r] + '</a></li>'); if (r < relatedSimply.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
//]]>
</script>
</b:if>

3. Tambahkan CSS dibawah ini tepat sebelum kode ]]></b:skin> atau </style>

/* Related Post Style 2 */
.related-simplify{position:relative;padding:20px 12px 12px 12px;margin:32px auto 24px auto;width:93%;border:4px double rgba(0,0,0,0.2)}
.related-simplify h4{background:#fff;padding:8px 10px;position:absolute;margin:0;font-size:17px;font-weight:700;color:#000;top:-21px;left:2.5%}
.related-simplify ul{margin:0;padding:0}
.related-simplify ul li{position:relative;list-style:none;padding:9px 0;margin:auto;line-height:1.4em;transition:all .3s}
.related-simplify ul li:before{content:'\f0c8';font-family:fontawesome;position:absolute;margin:0 5px 0 2px;color:rgba(0,0,0,0.5);overflow:hidden;font-size:60%;left:10px;transition:all .3s}
.related-simplify ul li:hover:before{content:'\f0c8';font-family:fontawesome;color:#0383d9;}
.related-simplify a{color:#000;font-size:14px;margin:0 0 0 30px;}
.related-simplify a:hover{color:#0383d9;}
.related-simplify ul li:nth-child(n+4) {display:none;}
@media only screen and (max-width:768px){
.related-simplify{padding:15px 0 10px 0;width:100%;border:2px solid #e74c3c;border-left:0;border-right:0}
.related-simplify h4{color:#e74c3c;padding:8px;font-size:15px;top:-18px;left:3.5%}
.related-simplify a{font-size:14px;margin:0}.related-simplify a:hover{color:#e74c3c}
.related-simplify ul li{padding:5px 0}
.related-simplify ul li:before,.related-simplify ul li:hover:before{display:none}}

4. Lalu silakan cari kode <data:post.body/> ,lalu ganti kode <data:post.body/> dengan kode dibawah ini.

Catatan!
Ditemplate blog nanti anda akan menemukan lebih dari satu kode <data:post.body/> ,jadi silakan coba satu persatu dan lihat kecocokannya

<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='related-simplify'>
<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'><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/2);
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>

Sebelumnya menyimpan template,blog anda harus terpasang Font Awesome . Jika belum silakan baca artikel berikut Cara memasang kode font awesome di Blog

5. Lalu jangan lupa simpan template dan lihat hasilnya

Itulah tutorial cara membuat related post di tengah-tengah artikel. Semoga bisa bermanfaat.