Cara Membuat Related Posts Untuk Mempercantik Tampilan Blog

Cara Membuat Related Post-Cara Membuat Artikel Terkait - Related Post/Artikel Terkait menurut saya merupakan widget yang sangat penting ada pada blog anda. karena, selain akan membuat layout lebih menarik, widget ini akan membantu pembaca menemukan artikel yang sebenarnya dicarinya, atau artikel menarik lain dalam kategori yang sama, yang menarik untuk dibaca.

Jadi cara membuat Related Post atau Artikel terkait langkah - langkahnya sebagai berikut :

1. Pertama anda harus login ke blog anda.
2. Lalu pilih Edit HTML jangan lupa centang  "Expand Widget Templates"
3. Lalu anda cari code </head> copy kode diatas </head>

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Verdana, Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-Bxu1WDxT3rqQzjZnkVwxPO1_BPASP5xheY642AeSqKgBVTSyNCoNmYDFzc9aAgTSd6zDzGgA1F3UAmBjaEaV3Cc_Zubr9dqg3hPHwkv8JcQ76NzCg8LQUMgGwHvywlTEK8OhivTREgM/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Kemudian cari code "<div class='post-footer-line post-footer-line-1'>"
Tambahkan kode di bawah ini tepat SETELAH kode di atas


<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if> 
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/'><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png"/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

Lalu Partinjau bila tidak terjadi error berarti anda berhasil

dan jangan lupa di save

Perhatian

• Untuk mengatur berapa banyak post terkait tampil dengan cara cari kode ini : var maxresults=5; Ubah nilai 5 misal menjadi 10 atau berapa yang Anda suka.
• Untuk mengubah Judul nya cari kode ini : var relatedpoststitle="Related Posts";