Memasang Related Post Thumbnail di Blog

Dengan menampilkan artikel terkait yang disertakan pratinjau gambar, pembaca akan lebih tertarik untuk mengunjunginya. Berikut cara detail untuk memasang artikel terkait atau related post di blog Anda.

Cari kode ini di HTML:

</head>

Letakkan kode ini di atasnya:

<!--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: 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/AVvXsEjv8qwMrnYk-qwZXlPQnZTMvu4cq4mSe_Ppz8vAZ87wqvsfTyYBiqPB1hV_uC-bhAMRzvDNWDN4udVs9GHllLIqaXVnIav6a68LU8v4OWviIdF6U8KFuOdOpehafmY138DovyoNU_WTtxM/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

 Sekarang temukan kode ini:

<div class='post-footer-line post-footer-line-1'>

 Jika tidak ada cari kode ini:

<p class='post-footer-line post-footer-line-1'>

Sekarang letakkan kode ini persis di bawah kode yang Anda temukan tadi:

<!-- 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-->

Anda dapat menentukan maksimum postingan yang akan ditampilkan, judul widget, dan lainnya. 

var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv8qwMrnYk-qwZXlPQnZTMvu4cq4mSe_Ppz8vAZ87wqvsfTyYBiqPB1hV_uC-bhAMRzvDNWDN4udVs9GHllLIqaXVnIav6a68LU8v4OWviIdF6U8KFuOdOpehafmY138DovyoNU_WTtxM/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";