Cara Mudah Membuat Related Post Di Dalam Postingan Artikel

Related Post atau Artikel Terkait adalah salah satu widget blogger untuk menunjukan postingan yang satu tema dengan postingan yang pembaca buka. Biasanya artikel atau post yang muncul pada widget related post berdasarkan label yang sama dengan postingan atau artikel yang sedang dibaca oleh pembaca. Artikel terkait yang akan kita buat ini akan muncul ditengah-tengah atau di dalam postingan artikel, tidak seperti widget artikel terkait biasanya yang muncul setelah atau dibawah postingan artikel.


image : arlinadzgn.com

Tidak hanya itu, kita juga dapat memasang sebuah iklan adsense di tengah-tengah postingan artikel atau tepatnya sebelum atau sesudah widget related artikel yang akan kita buat ini.
Lalu apa tujuan dari memasang post atau artikel terkait ini? Tentunya untuk meningkatkan page view pada blog kita itu sendiri, selain itu juga dapat membantu pengunjung atau pembaca untuk menemukan artikel lainnya yang bermanfaat bagi mereka. Selain itu juga bertujuan untuk memberikan referensi atau rujukan kepada pengunjung atau pembaca untuk membaca artikel menarik lainnya.
Jika anda ingin memasang artikel terkait di tengah-tengah atau di dalam postingan artikel, maka simak langkah-langkah berikut ini.

Cara Mudah Membuat Artikel Terkait Di Dalam Postingan Artikel


1. Login ke Blogger dan buka Dasboard blogger kamu, kemudian buka menu Template → Edit HTML
2. Salin kode berikut ini, dan 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. Kemudian Tambahkan CSS dibawah ini sebelum kode ]]></b:skin> atau </style>
/* Related Post Style 1 */
.related-simplify{position:relative;padding:0;margin:15px auto;width:100%;}
.related-simplify h4{background:#3498db;padding:8px 12px;margin:0;font-size:15px;font-weight:400;color:#fff;border:1px solid #2e88c5}
.related-simplify ul{margin:0;padding:0}
.related-simplify ul li{background:#f6f6f6;position:relative;list-style:none;padding:9px;margin:auto;line-height:1.4em;border:1px solid rgba(0,0,0,0.1);border-bottom:0;transition:all .3s}
.related-simplify ul li:nth-child(odd){background:#fefefe}
.related-simplify ul li:last-child{border-bottom:1px solid rgba(0,0,0,0.1)}
.related-simplify ul li:before{content:'\f138';font-family:fontawesome;position:absolute;margin:0 9px 0 4px;color:#2ecc71;overflow:hidden;transition:all .3s}
.related-simplify ul li:hover:before{content:'\f138';font-family:fontawesome;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
.related-simplify a{color:#0383d9;font-size:13px;margin:0 0 0 30px;}
.related-simplify a:hover{color:#0383d9;text-decoration:underline}
.related-simplify ul li:nth-child(n+4) {display:none;}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}

4. Lalu kemudian cari kode <data:post.body/> ,lalu ganti kode <data:post.body/> dengan kode dibawah ini.
Catatan!
Ditemplate blog nanti kamu 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 kamu harus terlebih dahulu terpasang Font Awesome .
5. Lalu simpan template dan lihat hasilnya.
Itulah tutorial Cara Mudah Membuat Related Post di dalam Artikel. Semoga bisa bermanfaat.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel