Script Untuk Membuat Related Post Simple Dan Sederhana Di Blogger

Dengan mempunyai related post atau artikel terkait maka akan menarik pengunjung untuk membaca judul artikel lain milik web kita, selain bermanfaat untuk pengunjung juga dapat menurunkan bounce rate karena pengunjung akan berlama lama membaca web kita.

Sayangnya untuk membuat related post ini blogger tidak menyediakan widgetnya maka dari itu kita harus membuatnya sendiri.

baca juga Pengertian Backlink Dofollow Nofollow Dan Perbedaannya

Cara membuat related post, seperti biasa buka html template blogger dan cari kode

<data:post.body/>

biasanya yang kedua bukan yang pertama, lalu dibawahnya kita tambahkan script dibawah ini

<!-- Related Post Widget Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='related-post' id='related-post'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {
homePage: &quot;<data:blog.homepageUrl/>&quot;,
widgetTitle: &quot;&lt;h5&gt;Artikel Terkait:&lt;/h5&gt;&quot;,
numPosts: 5,
titleLength: &quot;auto&quot;,
containerId: &quot;related-post&quot;,
newTabLink: false,
widgetStyle: 1,
callBack: function() {}
};
</script>

<script style="text/javascript" src="https://cdn.rawgit.com/mowdot/mysitemap/master/relatedpost.js"></script>
</b:if>
<!-- Related Post Widget End -->



Cukup hanya dengan itu sebenarnya related post kamu sudah jadi namun jika ingin menambakan CSS , agar tampilan lebih cantik bisa tambahkan kode dibawah ini, atau kalau anda jago CSS bisa anda kreasikan sendiri.

#related-post {
background:none;
width:100%;
margin:2px 0px;
}
.related-post h5 {
font-size:120%;
margin:0 0 5px;
padding:0;
font-weight:bold
}
.related-post li {
background:url(&quot;https://lh6.googleusercontent.com/-AbTpBEztDA0/U-cxaZ0td6I/AAAAAAAABZk/0terczMX5LI/s1600/arrow_state_grey_right.png&quot;) no-repeat 58px 3px;
color:#2c3e50;
text-indent:0;
line-height:1.6em;
margin:0;
padding:0 0 3px 75px
}
.related-post .widget {
margin:0;
padding:0
}
.related-post ul {
list-style:none;
margin:0;
padding:0;
}



Kalo saya sih suka yang simple simple aja, contoh hasilnya punya saya  begini

cara menambahkan related post di blogger