1. Login Akun Blogger > Back Up dulu Template kalian untuk jaga-jaga jika terjadi kesalahan.
2. Masuk ke Template > Pilih Edit HTML > centang pada Expand Template Widget
3. Cari kode ]]></b:skin> dan letakkan kode dibawah ini tepat diatas kode ]]></b:skin> (copy ke notepad dulu biar lebih mudah)
#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: #585858;font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;margin-top: 0em;padding-top: 0em;}
#related-posts a{color:#51432f; Border-left: 1px solid #eee8e1; Border-right: 1px solid #eee8e1; margin-right: 5px; margin-left: 5px;}
#related-posts a:hover{color:#000000;}
#related-posts a:hover {background-color:#d4eaf2;}
4. Kemudian cari kode <div class='post-footer-line post-footer-line-1'> atau <p class='post-footer-line post-footer-line-1'>
5. Paste kan kode dibawah ini tepat dibawah kode yang anda cari (copy ke notepad dulu biar lebih mudah)
<!-- Related Posts with Thumbnails Code Start by Supercoolzz-->
<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 != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=12"' type='text/javascript'/></b:if></b:loop>
<b>Baca Juga Artikel Terkait Lainnya: </b>
<div style='background:#faf7f5; margin: 0px auto; padding: 5px;width:98%;float:left;height:100%'>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
</div>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
</b:if>
</b:if>
<!-- Related Posts with Thumbnails Code End by Supercoolzz-->
6. Ganti tulisan yang warna merah "Baca Juga Artikel Terkait Lainnya:" sesuai selera anda, kode berwarna hijau tersebut adalah kode warna background Related Post, angka yang berwarna biru adalah jumlah related post yang ingin ditampilkan.
7. Oke Lanjut cari kode </body>, kenapa diletakkan di bagian bawah dan tidak diletakkan di bagian <head> yaitu agar blog kalian diakses tidak lambat karena mengandung Javascript yang membuat blog anda lambat diakses dan menjadikan ini Related Post Thumbnail Fast Load.
8. Setelah ketemu kode </body> letakkan kode dibawah ini tepat diatas kode </body> (copy ke notepad dulu biar lebih mudah)
<!--Related Posts with thumbnails Scripts and Styles Start by Supercoolzz-->Gimana sobat? Cukup rumit kan Cara Membuat Related Post Thumbnail yang ane berikan? Tapi lihat aja hasilnya pasti lebih Fast Load dan memuaskan. Oke sekian dari Supercoolzz jika ada pertanyaan, memberi saran, atau membenarkan silahkan berkomentar. Semoga bermanfaat!! :)
<b:if cond='data:blog.pageType == "item"'>
<script src='http://supercoolzz.googlecode.com/files/relatedpostwiththumbnails2.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End by Supercoolzz-->
