Carousel Related Post - Bubbled Thumbnail Widget for Blogger

One of the unique and attractive ways to stimulate Readers' interest is to provide related post with thumbnail. But here I'm gonna give you more than the common type, because this one is different and antique. Just like the previous post I wrote about how to create related post with icon where I replace the common type of post list style with bullets and numbers to icon or picture. You may have seen related post with thumbnail from many sites, but mine is different. Not just using thumbnail or picture, this widget can also scroll and moving infinitely side to side, and the unique is the post title appears on bubbled tooltip like baloon or callouts.
Basically this scroling related posts uses marquee to move infinitely. But I have also found that some browser doesn't support this function, so the related post with "ordinary" marquee doesn't work. I've fixed this problem and made some changes so my related post with bubbled thumbnail is working fine on Opera, Google Chrome, and Firefox. Well, if you find some bugs on it please let me know...
Below is the screenshot of the widget, or see the live demo here.

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip7HupljnomnJSbGBUAIE9c0WjbxS0uJV4do0B3Bi6YjDAZ3h2YNHHL0x1xRzB3QiRFX36h_sezUUwWiYWy7uE3Xy80vfmLj3D1awS8zrX-MtpsTsEpK1Vb772s7GpYmAqfQc0p9PYd2c/s1600/bt.png) no-repeat top;}
.tooltip b.bottom{padding:2px 5px 6px;color:#548912;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip7HupljnomnJSbGBUAIE9c0WjbxS0uJV4do0B3Bi6YjDAZ3h2YNHHL0x1xRzB3QiRFX36h_sezUUwWiYWy7uE3Xy80vfmLj3D1awS8zrX-MtpsTsEpK1Vb772s7GpYmAqfQc0p9PYd2c/s1600/bt.png) no-repeat bottom;}
</style>
<script type='text/javascript'>window.onload=function(){enableTooltips("calcList")};imgBT=new Image();imgBT.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDMlMYqjxNet_mSYm3y3prOZcnw4LfWaDpeZ7YhiU_4M5bvSUTogzOUy59wI4xHCFaA-Hpday0iIpFL6aiI00bOFGY_OV5aBtkB7YY0j9Bh6Qv6fMpOg3bIjXPEE3QOs_G1w-xLY3OkDE/s1600/noimage.jpg';</script>
<script src='https://storage.googleapis.com/google-code-archive-downloads/v2/code.google.com/dvslabs/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!!

Share