Carousel Related Post - Bubbled Thumbnail Widget for Blogger

If you're interested to put this widget on your site, please follow these steps:
Edit your template, Log in to your blogger dashboard - click on Design - Edit HTML and check the Expand Widget Templates. Find this code: 

</head>

then replace it with the codes below:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {float:center;height:100%;min-height:100%;padding-top:5px;padding-left:5px;}
#related-posts h2{font-size: 1.6em;font-weight: bold;color:#000;font-family:Arial, Georgia;margin-bottom:0.75em;margin-top: 0em;padding-top: 0em;}
#related-posts a{-webkit-transition: background 1s ease, color 1s ease;-moz-transition: background 1s ease, color 1s ease;-o-transition: background 1s ease, color 1s ease;}
#related-posts a:hover{background-color:#d4eaf2;-webkit-transition: background 1s ease, color 1s ease;-moz-transition:background 1s ease, color 1s ease;-o-transition:background 1s ease, color 1s ease;-webkit-border-radius: 5px;-moz-border-radius:5px;border-radius:5px;-o-border-radius:5px;}
.tooltip{width: 115px; color:#000;font:lighter 12px/1.3 Arial,sans-serif;text-decoration:none;text-align:left}
.tooltip span.top{padding:20px 5px 0;background:url(http://4.bp.blogspot.com/-VdRo2rygD58/TsEfqdv2i_I/AAAAAAAAAHk/0XgrI8IM6TU/s1600/bt.png) no-repeat top;}
.tooltip b.bottom{padding:2px 5px 6px;color:#548912;background:url(http://4.bp.blogspot.com/-VdRo2rygD58/TsEfqdv2i_I/AAAAAAAAAHk/0XgrI8IM6TU/s1600/bt.png) no-repeat bottom;}
</style>
<script type='text/javascript'>window.onload=function(){enableTooltips("calcList")};imgBT=new Image();imgBT.src='http://4.bp.blogspot.com/-WQzi5hugHT8/TsEgEpZVEbI/AAAAAAAAAHs/Vq8oZLnRTVw/s1600/noimage.jpg';</script>
<script src='http://dvslabs.googlecode.com/files/rp-bubbled-thumbnails.js' type='text/javascript'></script>
</b:if>
</head> 

Next, find this code:

<div class='post-footer-line post-footer-line-1'>

or

<p class='post-footer-line post-footer-line-1'>

Add the following codes after it, or below it.

<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=12&quot;' type='text/javascript'/></b:if></b:loop>
<h3>Related Posts</h3>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=10;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
</div><div style='clear:both'/>
</b:if>

Save your template and you're done. You may set the maximum number of related posts up to 20 posts, just make change the red colored number (10) and customize it the way you like. Hope you guys like it, and have a try!!

sumber :http://www.intert3chmedia.net/2011/11/scrolling-related-post-thumbnail-widget.html