Cara Membuat Artikel Terkait / Related Post Dengan Thumbnail

Cara Membuat Artikel Terkait / Related Post Dengan Thumbnail

Postingan kemarin saya ada share Cara Membuat Artikel / Related Post tapi tidak memakai Thumbnail. Namun sekarang saya akan share Cara Membuat Artikel Terkait / Related Post Dengan Thumbnail supaya blogger sobat lebih menarik dan nyaman dilihatnya serta ini juga termasuk trik untuk menambah PagesView blog sobat.

Fungsinya masih sama yaitu menampilkan beberapa artikel atau postingan sobat yang berkaitan sesuai label / kategorinya. Oke tidak pake lama langsung saja  ikuti langkah-langkah berikut :

1. Bisa Backup dahulu template sobat (recommended)

2. Cari kode </head> (gunakan ctrl+F untuk mencarinya), lalu ganti/replace kode tersebut dengan kode ini

<!--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=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNAJ6e0UQ-zBJjZpHDbO2H9fIHK0-2oe4S2aVcZJ-uR1DdDHTj2PvriQKz_rvM2egPf59A1CGS4qAeleD8qu38W44D-ZdmRI7zCm2qMxirek3UEJ3VN_3n0GWs0b3CTqGLFB_gQWRUQKk/s400/noimage.png&quot;;
var maxresults=6;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</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-->
</head>

3. Selanjutnya sobat cari kode berikut :

<div class='post-footer-line post-footer-line-1'> 
atau
<p class='post-footer-line post-footer-line-1'>
atau
<data:post.body/>

pilih salah satu dari kode diatas

4. Lalu tepat dibawah kode yang kamu pilih diatas, pastekan kode berikut

<!-- 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 alt='Related Posts Widget For Blogger with Thumbnails' src='http://image.bloggerplugins.org/blogger-widgets.png' style='border: 0'/></a><a href='http://bloggertemplates.bloggerplugins.org/'><img alt='Blogger Templates' src='http://image.bloggerplugins.org/blogger-templates.png' style='border: 0'/></a>

</b:if></b:if>

<!-- Related Posts with Thumbnails Code End-->

5. Save dan lihat hasilnya.

Tambahan :

untuk yang warna merah bisa di edit sendiri atau tetap dibiarkan seperti itu.

Semoga Bermanfaat