How to add Related Posts widget to blog with thumbnails

转载自：http://helplogger.blogspot.com/2012/03/how-to-add-related-posts-widget-to.html

↑ 原文（a）（第一组程式码）

↑ 原文（b）（第二组程式码）

↑ 原文（c）

********************************************************

下面是我改良过的 html 程式码：

第一组：

<!--Related Posts with thumbnails Scripts and Styles Start-->

<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px  #eaeaea;}
#related-posts a:hover{background: #5d5555;}
#related-posts h2{margin-top: 80px;background:none;font:18px Oswald;padding:3px;color:#40d043; text-transform:uppercase;}
#related-posts .related_img {margin:8px;border:2px solid #f2f2f2;width:150px;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:#dfe135;text-align:center;padding: 0px 5px 10px;font-size:12px;width:150px; height: 40px;}
#related-posts .related_img:hover{border:2px solid #0f1ff7;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'/>

<!--Related Posts with thumbnails Scripts and Styles End-->

细节：



第二组：

<!-- Related Posts with Thumbnails Code Start-->

<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=9&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=9;
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 href='http://helplogger.blogspot.com/2012/03/how-to-add-related-posts-widget-to.html' rel='nofollow' style='font-size: 9px; text-decoration: none;'/></div>

<!-- Related Posts with Thumbnails Code End-->

细节：