Cara Membuat Related Post Thumbnail

Sebenarnya, ini Pesanan Pengunjung yang lama, Cuma mimin lupa Share,

Gomen deh :'3

Yaudah Langsung saja Diliat Demo ya Di RELATED POST Bawah Share Button

Langsung saja, Judul Dari Tutorial Kali ini adalah

CARA MEMBUAT RELATED POST

Pertama, Masukkan CSS dibawah ini diatas </head>

 <b:if cond="data:blog.pageType == &quot;item&quot;">
</b:if>
<!--Related Posts with thumbnails Start-->
<!-- remove -->
<b:if cond="data:blog.pageType == &quot;item&quot;">
<style type="text/css">
#related-posts{float:left;width:auto;}
#related-posts a{background:none;}
#related-posts h2{
margin-top: 10px;
background: none;
font-family: &#39;Exo 2&#39;, sans-serif;
padding: 3px;
margin: 4px 1px;
color: #222;
text-transform: uppercase;
}
#related-posts .related_img {margin: 5px;
border: 2px solid #f2f2f2;
width: 145px;
height: 101px;
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-posts .related_img:hover {background:#E8e8e8;}
#related-title {color: #999;
text-align: center;
font-weight: 600;
padding: 0px 1px 0px;
font-family: &#39;Ruda&#39; sans-serif;
font-size: 12px;
width: 162px;
}
  #related-title:hover {color: #111; transition: all .50 ease-in-out;
}
#related-posts .related_img:hover{border:2px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script src="http://helplogger.googlecode.com/svn/trunk/relatedposts.js" type="text/javascript">
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Setelah itu, Masukkan HTML ya dibawah <data:post.body/>
Jika Bertemu 2, Silahkan Taruh dibawah yang ke-2

<!-- 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=4;
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-->