Related Post dengan Thumbnail yaitu dimana artikel yang berhubungan disertai dengan gambar, berbeda dari related post pada umumnya yang tidak disertai dengan gambar. Related Post dapat meningkatkan page view terhadap halaman lain pada blog kita. Related post juga akan menarik pengunjung agar betah berlama-lama di dalam blog kita.

Untuk membuat related post dengan thumbnail pertama dalam postingan kita harus ada gambarnya. Berikut adalah langkah-langkah dalam pembuatan related post dengan thumbnail:

1. login ke blogger, kemudian ke rancangan dan edit HTML dan centang expand widget templates
2. cari kode </head> agar lebih mudah ketik ctrl f
3. kemudian ganti kode </head> dengan
   
   <!--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/AVvXsEjB6P9BgxNfwG6qqVu7nWML1VDyJ7KxkCggi_XM_SUUMnpZC1C8t3wxY4m40eGZVg-QLsW2g948zwTWiBJQliQXS1Q7Gc2-ewyu7u01vqou3ht0tbcm4uHAqJQbS_az_2kBYU1YvUt-49I/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--></head>
4. sekarang cari kode
   
   <div class='post-footer-line post-footer-line-1'>
   jika kode diatas tidak ada, maka cari kode berikut
   <p class='post-footer-line post-footer-line-1'>
   kemudian setelah kode diatas taruh kode berikut ini
   <!-- 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-->
5. untuk mengganti jumlah maksimal related post yang ditampilkan, ubah kode berikut
   
   var maxresults=5;
6. untuk mengganti judul widget ubah kode berikut
   
   var relatedpoststitle="Related Posts";
7. untuk merubah gambar default ubah kode berikut
   
   var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB6P9BgxNfwG6qqVu7nWML1VDyJ7KxkCggi_XM_SUUMnpZC1C8t3wxY4m40eGZVg-QLsW2g948zwTWiBJQliQXS1Q7Gc2-ewyu7u01vqou3ht0tbcm4uHAqJQbS_az_2kBYU1YvUt-49I/s400/noimage.png";
8. untuk merubah garis pemisah ubah kode berikut
   
   var splittercolor="#d4eaf2";

Untuk menampilkan related post tidak hanya di halaman post, tetapi di setiap halaman. Hapus Kode yang dimulai dengan <!-- remove --> pada langkah 4 dan 3. Kode tersebut yaitu;
dan