Membuat Artikel Terkait or related post begambar (thumbnail)

    Baiklah sebelumnya saya juga sudah mempostingkan - Cara membuat atikel terkait dalam versi lainnya disini dan kali ini saya juga mempostingkan artikel terkait yang bergambar juga, hal ini bertujuan untuk membuat sobat dapat memilih salah satunya agar tidak terlalu pusing mencarinya di google. Nah sekarang saya ngepostingin Artikel terkait atau Related post yang kayak saya ini ni, jadi sobat ng usah bingung untuk mencari tau bentuknya, kalau udah oke sekarang kita lanjutin aja ke cara bikinnya siap!!!

1. Seperti biasa buka dulu blogger sobat, lalu pilih template dan edit html, Oke!! sudahkah ketemu?

2. Selanjutnya sobat masukan kode berikut di atas kode </head>

<!--Related Posts with thumbnails 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: #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> <!--Related Posts with thumbnails End—>

Sebelum kita lanjutkan ke step berikutnya nya sobat harus membaca keterangnan berikut ini terlebih dahulu
Keterangan: Pada kode yang berwarna biru (blue), ini adalah kode dari ukuran gambar/foto yang akan ditampilkan, sobat bisa merubahnya sesuai selera, just depend on you!!
 
3. Setelah itu kita lanjutkan untuk mempastekan kode di bawah ini di atas kode <div class='post-footer'>, kalau kode tersebut ada dua maka sobat bisa mencobakannya kepada salah satunya karena kita memiliki jenis template yang berbeda-beda

<!-- 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><b:if cond='data:blog.pageType == &quot;item&quot;'>
<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:if></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'/>
</b:if> <!-- Related Posts with Thumbnails Code End-->

Keterangan: Untuk kode yang berwarna biru, ini merupakan jumlah dari related postnya, jadi, sobat bisa merubahnya sesuai dengan ukuran dan kehendak sobat, Understand!!!
 
4. Setelah selesai masukin kodenya, sobat bisa langsung nge-Save nya dan liat hasilnya deh