Membuat artikel Terkait bergambar

Menampilkan posting terkait di setiap bagian bawah posting adalah cara yang baik untuk menjaga kenyamanan kepada pengunjung dan cukup efektif dalam meningkatkan pageviews blog. widget artikel terkait dengan thumbnail ini dilengkapi dengan gambar thumbnail dari setiap halaman post. widget ini sangat mirip dengan yang dengan widget linkwithin tetapi dengan menggunakan widget ini, kita bisa menyesuaikan bentuk tampilanya sesuai dengan tema blog yang kita miliki. 

Cara membuat artikel terkait

1. login ke Blogger Dashboard > Design > Edit HTML.
2. jangan lupa backup template.
3. Now search for below tag in your template

</head>

letakan semua kode dibawah ini tepat diatas kode </head>

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- 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;
font-size
}

#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: #6E6E6E;
color: #ffffff;
}
</style>
<script type='text/javascript'> var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ2lHXfjKDwbu9evqOqGaAwN6klch6GzNQ4qVm5Eu9HNsjshaLvW1kMmVRy8nj1mfFd0foSdlAnEe7ixkdlNp6_sm-c-gFWpT5g8VyPhyVPNA9bSiBXh22ujMejIq0TYQTFLre1fARItQ/s400/noimage.png&quot;; var maxresults=5; var splittercolor=&quot;#d4eaf2&quot;; var relatedpoststitle=&quot;&quot;; </script>
<script src='http://code.helperblogger.com/hb-related-posts.js' type='text/javascript'/>>
<!-- remove -->
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Sekarang cari kode dibawah.

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

kopi kode dibawah tepat diatas kode setelah kode tersebut

<!-- Related Posts with Thumbnails Code Start-->
<!-- 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 != &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=7&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-->

Dan simpan, lihat hasilnya