Tutorial atau cara membuat Related post bergambar di bawah artikel

Tutorial/cara Membuat Related post bergambar di bawah artikel - Banyak bagi kalian yang penasaran bagaimana cara mebuat Related post bergambar apalagi setelah belajar membuat blog yang pasti nya ada banyak sekali yang mesti anda lakukan untuk membuat blog anda semakin cantik dan salah satu nya dengan related post bergambar ini.
Related post ini fungsinya untuk mempermudah pengunjung atau pembaca menulusri artikel terkait yang berhubungan dengan artikel yang di baca. Sebelum melanjut kan lebih dalam, berikut adalah contoh Related post bergambar :

Untuk tutorial pembuatannya adalah sbb :
1. Masuk Kehalaman admin blog dengan memasukan email dan password
2. Pilih Template ---> Edit HTML
3. Cari Kode </head>, untuk lebih mudah dalam pencarian bisa menekan CTRL + F
4. Jika sudah ketemu Copy dan paste kode berikut ini tepat di atas kode </head>

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #f2f2f2;}
#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:100px;height:80px;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;}
#related-title {color:#0033cc;text-align:center;padding: 0 5px;font-size:12px Arial; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;}
#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>

NB : Untuk kode berwarna hijau adalah ukuran gambar/foto yang di tampilkan , dan bisa di ubah sesuai dengan keinginan.

5. Setelah itu cari kode <div class='post-footer'> dan setelah ketemu letakkan (Copy-paste) kode di bawah ini tepat di atas <div class='post-footer'>

<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=5"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="<b>Related Posts:</b>";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>

NB : Kode berwarna hijau adalah jumlah releted post (artikel terkait) dan bisa di rubah sesuai dengan keinginan.

6. Setelah itu save Template dan anda bisa lihat hasil nya.