Memasang widget related post di blogger/blogspot, perlu dilakukan secara manual karena fungsi related post atau postingan berkaitan yang biasanya terdapat di blog wordpress tidak tersedia pada settingan default blogger. Widget Related post ini fungsinya untuk memudahkan pengunjung menemukan postingan dengan topik yang sama dengan postingan yang sedang dibaca. Related post berikut ini akan muncul dibawah tepat setelah postingan blog.
Related post ini akan dipasang ini, menampilkan postingan-postingan dengan label yang sama. Untuk memasangnya di blog anda, ikuti petunjuk berikut ini.
1. Log-in ke dashboard blogger dengan id anda.
2. Pada dashboard, pilih tab 'Rancangan' kemudian pilih 'edit html'
3. Centang pada 'expand widget template' dan temukan kode dibawah ini, dengan bantuan find (ctrl+f)
</head>4. Ganti kode diatas dengan kode berikut
<!--Related Posts Scripts and Styles Start-->untuk merubah judul widget lakukan perubahan pada
<!--Remove--><b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;
}
#related-posts .widget h2, #related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:blue;
}
#related-posts a:hover{
color:blue;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:bold;
font-size:15px;
text-color:#000000
}
#related-posts ul li{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqENOT7GLzu2k4PqszjydMLk_uY9tavYeP_HIku7TAroE0gpoyjPYsZcGBzEqiaJQbUimL7tzzbVNiPogaNhUgjx1ReNCwYkDmLIgRUFE-SjR-mv6UCqD7p3zQcGLRsEPGEHG4ELGXNIE/s200/greentickbullet.png) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 13px;
padding-left: 30px;
padding-top:0px;}
</style>
<script type='text/javascript'>
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-for-blogger.js' type='text/javascript'/>
<!--Remove--></b:if>
<!--Related Posts Scripts and Styles End-->
</head>
var relatedpoststitle="Related Posts";5. Selanjutnya temukan kode berikut ini
<div class='post-footer-line post-footer-line-1'>kalau tidak ada, temukan yang ini
<p class='post-footer-line post-footer-line-1'>6. Setelah anda menemukan salah satu kode diatas, masukkan kode berikut ini tepat setelahnya
<!-- Related Posts Code Start-->Untuk merubah jumlah related post yang ditampilkan di bawah halaman, edit pada bagian var maxresults=5;
<!--Remove--><b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=6"' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-for-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget for Blogger" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a>
<script type='text/javascript'>
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>");
</script>
</div>
<!--Remove--></b:if>
<!-- Related Posts Code End-->
7. Simpan template anda.
Setelah anda melakukan tahapan diatas, akan muncul related post dengan label yang sama dibawah setiap postingan. Anda juga bisa melakukan editing css untuk mempermanis tampilannya. Jika kurang puas, anda juga bisa membuat widget related post dengan thumbnail.
Semoga berhasil !
