Cara Membuat Artikel Terkait atau Related Posts Di Blog

   Tak usah panjang lebar, langsung saja kita ke inti nya :

1. Masuk ke menu Template lalu klik Edit HTML.
2. Klik sembarang tempat pada kotak menu HTML kemudian tekan CTRL + F pada keyboard.
3. Setelah muncul kolom search, masukkan kode </head>
4. CoPas kode di bawah tepat di atas kode </head>

<!--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-->  

5. Lalu cari kode  <div class='post-footer'>  di kotak menu HTML tadi.

6. Saat kalian mencari kode di atas, kaliam akan menemukan dua kode yang sama persis pilihlah kode kedua, selanjutkan paste-kan kode di bawah ini tepat di atas kode  <div class='post-footer'>

<!-- 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://hsr-tutorial.blogspot.co.id/" rel="nofollow" >Click Me</a></div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

* Angka 5 adalah jumlah artaikel terkait yang kalian masukkan di postingan blog. Jumlah ini menyesuaikan dengan ukuran templates blog kalian , jika ukuran besar jumlah ini masih bisa di tambah lagi menjadi semakin besar.

7. Jika proses sudah benar silakan Save template dan lihat hasilnya di blog kalian. Artikel terkait ini dibuat berdasarkan label postingan kalian jadi pastikan kalian sudah membuat label pada artikel blog kalian.

Contoh label :

Thanks to :

   http://kupastutorial.blogspot.co.id