Jika kamu sering mengunjungi beberapa situs blog, dan kamu membaca salah satu artikel di blog tersebut. Pastinya pernah kan, melihat beberapa list daftar postingan artikel blog. Yang masih memiliki keterkaitan dengan postingan yang telah kamu baca tadi. Dan memang daftar list url postingan tersebut, biasanya hanya beberapa saja sekitar 3-5 artikel yang disarankan. Nah itulah yang disebut dengan Related Post, yang dalam dunia blogger lebih kita kenal dengan istilah Artikel terkait. Untuk lebih jelasnya, maka melalui artikel ini akan saya kupas secara lengkap mengenai related post ini.

Cara Memasang Related Post di Artikel Blog

Apa itu Artikel Terkait di Blog


Sedikit sudah saya kupas mengenai Related Post, namun apa sih artikel terkait itu sebenarnya? Jadi artikel terkait adalah sebuah daftar artikel blog yang disusun sedemikian rupa berdasarkan keterkaitan artikel blog yang dibaca, dengan artikel yang telah diterbitkan di blog. Dengan tujuan agar pembaca pada blog, tidak hanya fokus membaca 1 artikel saja. Namun dengan adanya artikel terkait ini, akan membuat pengunjung blog akan membaca lebih dari 1 artikel di blog kamu.
Dengan memasang artikel terkait ini di blog kamu, akan menambah bagus dari tampilan blog yang kamu gunakan. Namun sayangnya, tidak semua template blog memiliki related post bawaan. Kecuali jika kamu, menggunakan Template Viomagz. Untuk mengatasi hal tersebut, kamu perlu melakukan modifikasi tempalte blog yang kamu gunakan. Dengan menambahkan beberapa elemen tambahan ke css kamu.

Kelebihan Memasang Artikel Terkait di Blog

Sekarang pastinya kamu udah tahu kan tentang artikel terkait ini, namun apa saja sih keuntungan yang bakalan kamu dapatkan jika kamu memasang related post di blog kamu? Berikut ini beberapa keuntungan yang bakalan kamu dapatkan dari memasang related post ini:
1. Pengunjung blog, akan tertarik untuk membaca lebih dari satu artikel di blog kamu.
2. Menambah elegan tampilan artikel blog
3. Meningkatkan Traffick, meskipun tidak terlalu besar.
4. Membuat blog kamu, memiliki relasi antar postingan blog.

Cara Memasang Artikel Terkait di Tengah Postingan Artikel Blog

1. Silakan kamu buka Tema klik Edit with HTML, lalu cari kode berikut <data:post.body/>dan tambahkan kode berikut dibawahnya:
<b:if cond='data:view.isPost'>
<script> //<![CDATA[
// Related Posts Middle by igniel.com
var jumlah = 5;
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('b'+e(c)+'b','g'),k[c])}}return p}('c a=["edsQfC","dsfhW","BddI","Vf","fkfed","eksS","hde","refdhsrfd","ChdB","hrsIFU","BeFFh","mOel","Thkfd","meklmrKChdBPw","wKfkfedPw","wl","mDrlmDekl","mDOel"];c g=x y();c v=0;c j=x y();z R(H){u(c b=0;b<H[a[2]][a[1]][a[0]];b++){c p=H[a[2]][a[1]][b];g[v]=p[a[4]][a[3]];u(c q=0;q<p[a[5]][a[0]];q++){A(p[a[5]][q][a[6]]==a[7]){j[v]=p[a[5]][q][a[8]];v++;18}}}}z X(){c n=x y(0);c o=x y(0);u(c b=0;b<j[a[0]];b++){A(!J(n,j[b])){n[a[0]]+=1;n[n[a[0]]-1]=j[b];o[a[0]]+=1;o[o[a[0]]-1]=g[b]}};g=o;j=n}z J(G,L){u(c t=0;t<G[a[0]];t++){A(G[t]==L){M 1b}};M Y}z 19(){c i=N[a[10]]((g[a[0]]-1)*N[a[9]]());c b=0;E[a[12]](a[11]);Z(b<g[a[0]]&&b<1c){E[a[12]](a[13]+j[i]+a[14]+g[i]+a[15]+g[i]+a[16]);A(i<g[a[0]]-1){i++}1a{i=0};b++};E[a[12]](a[17])}',62,75,'||||||||||_0x22c4|_0x6c56x6|var|x65|x6C|x74|relatedTitles|x72|_0x6c56x11|relatedUrls|x69|x3E|x3C|_0x6c56xa|_0x6c56xb|_0x6c56x7|_0x6c56x8|x61|x6E|_0x6c56xf|for|relatedTitlesNum|x22|new|Array|function|if|x66|x68|x2F|document|x6F|_0x6c56xd|_0x6c56x5|x64|contains|x20|_0x6c56xe|return|Math|x75|x3D|x67|related_results_labels|x6B|x77|x6D|x24|x79|removeRelatedDuplicates|false|while|||||||||break|ignielBacaJuga|else|true|jumlah'.split('|'),0,{}));
//]]></script>
<div class='ignielRelatedMiddle'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:view.isPost'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=100&quot;'/>
</b:if>
</b:loop>
</b:if>
<span class='judul'><span>Baca Juga</span></span>
<script> //<![CDATA[
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('b'+e(c)+'b','g'),k[c])}}return p}('L b=["ipeiacKacmdahJihhca","padScasaedjvrRcmjjtmsa","xnfjdyofhruokQuxnfjdyofhrun","PDakrwacaEdfkFcc","caepdG","efhatmsa","C","iejakdvaHfka","nmkaedtfha","eaIdwiociep"];O();(N(){A q=z[b[1]](b[0])[0];B(q){A g=z[b[3]](b[2]),l=M(g[b[4]]/2);B(g[l][b[5]]==b[6]){g[l][b[8]][b[7]](q,g[l])}T{g[l][b[8]][b[7]](q,g[l][b[9]])}}})()',56,56,'||||||||||x65|_0x9301|x6C|x74|x6E|x6F|_0xa209x2|x64|x69|x73|x72|_0xa209x3|x61|x70|x62|x67|_0xa209x1|x79|x6D|x4E|x20|x42|x53|x2E|x2D|document|let|if|x50|x75|x63|x41|x68|x66|x78|x4D|x52|var|parseInt|function|ignielBacaJuga|x71|x2C|x43|x45|else'.split('|'),0,{}));
//]]> </script>
</div>
</b:if>

var jumlah = 5 disini adalah jumlah artikel terkait, sesuaikan dengan kebutuhan kamu ya.
2. Agar tampilan Artikel terkait kamu jadi bagus, kamu perlu menambahkan kode css berikut ini:
diatas </style>

atau ]]></b:skin>.

/* Related Posts Modif by Alekpedia */
.ignielRelatedMiddle {background-color:#f5f5f5; border:1px solid #e5e5e5; display:block; margin:20px 0px; padding:10px 20px;}
.ignielRelatedMiddle .judul {color:#f44336; font-size:120%; font-weight:600; text-transform:uppercase}
.ignielRelatedMiddle ul {margin:10px 0px 0px !important; padding:0px !important;}
.ignielRelatedMiddle ul li {list-style:none; padding:5px 0px !important; border-bottom:2px dotted #aaa !important; text-align:left !important; line-height:1.25em !important;}
.ignielRelatedMiddle ul li:first-child {padding-top:0px; !important;}
.ignielRelatedMiddle ul li:last-child {padding-bottom:0px !important; border:0px !important}
.ignielRelatedMiddle ul li a:before{content:''; display:inline-block; width:17px; height:17px; margin-right:3px; vertical-align:-3px; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='%23333'/%3E%3C/svg%3E") center / 20px no-repeat;}


3. Lalu simpan, selesai.