Menempatkan Related Post di Blog Anda

Banyak blog atau website yang membahas tentang cara membuat Related Post di Blogspot, baik yang sederhana atau yang berupa gambar thumbnail.
Saya sendiri tidak ingin menggurui atau membahasnya, saya yakin masing-masing dari kita sudah tahu apa itu fungsi dari Related Post. Untuk itu saya hanya akan meberikan langkah-langkahnya saja sesuai dengan apa yang saya terapkan di blog ini.

Berikut ini Langkah-Langkahnya

1. Langkah Pertama sudah pasti anda harus login dulu di Blogger, lalu klik Template --> Edit HTML
2. Klik di sembarang code area dan tekan CTRL+F masukkan </head> dan klik cari
3. Tepat diatas kode </head> anda tempelkan kode berikut ini
   
   <!--Related Posts with thumbnails Scripts and Styles Start-->
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <style type='text/css'>
   #related-posts{float:left;width:auto;}
   #related-posts a{border-right: 1px dotted #eaeaea;}
   #related-posts a:hover{background: #EEEEEE;}
   #related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
   #related-posts .related_img {margin:5px;border:2px solid #f2f2f2;width:110px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;-webkit-border-radius: 5px;  -moz-border-radius: 5px; border-radius: 5px; }
   #related-title {color:#666;text-align:center;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;}
   #related-posts .related_img:hover{border:2px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
   <script type='text/javascript' src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' />
   </b:if>
   <!--Related Posts with thumbnails Scripts and Styles End-->
   
   Catatan :
   - Ubah kode warna merah untuk menyesuaikan panjang dan lebar Thumbnail/Gambar
   - Ubah kode warna biru untuk merubah ukuran judul Related Posts
   - Hapus kode warna Ungu jika anda menginginkan Related Posts muncul di Hompage dan
     Posts Page
4. Tekan CTRL+F masukkan <div class='post-footer'> lalu klik cari
   Anda akan menemukan dua buah kode tersebut, gunakan yang kedua
   
5. Tepat diatas kode <div class='post-footer'> tempelkan kode dibawah ini
   
   <!-- Related Posts with Thumbnails Code Start-->
   <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=5&quot;' type='text/javascript'/></b:loop>
   <script type='text/javascript'>
   var currentposturl=&quot;<data:post.url/>&quot;;
   var maxresults=5;
   var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
   removeRelatedDuplicates_thumbs();
   printRelatedLabels_thumbs();
   </script>
   </div><div class='clear'/><div style="font-size: 9px;float: right; margin: 5px;"><a  style="font-size: 9px; text-decoration: none;" href="http://endroliandanu.blogspot.com/2015/05/menempatkan-related-post-di-blog-anda.html" rel="nofollow" >Related Posts Widget</a></div>
   </b:if>
   <!-- Related Posts with Thumbnails Code End-->
   
   Catatan :
   - Ubah angka 5 pada Maxresults=5, sesuai dengan jumlah posting yang ingin anda tampilkan
   - Hapus kode warna Ungu jika anda menginginkan Related Posts muncul di Hompage dan
     Posts Page
6. Save Template. Silahkan lihat hasilnya

Update : Jika Related Post diatas tidak dapat tampil setelah Template anda Save, maka letakkan kode pada langkah 5 tepat diatas </b:includable> yang nampak diatas kode <div class='post-footer'>