Marquee Style - Make Related Posts with Thumbnails (blogger)

This is another way to Make Related Posts with Thumbnails on blogger posts, use marquee style. By using the marquee, we will be able to display the number of related-posts so much more, and of course will look more attractive. example like in this blog.

• To do this, first, Go to blogger dashboard - Edit HTML - Click "Expand Widget Templates" Place the code below before </head> , will look like the following :
  

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
background-color:#003399;

}

#related-posts a{
color:#FFFFCC;
}
#related-posts a:hover{
color:#000000;
}

#related-posts a:hover {
background-color:#C8E6E1;
}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>

</head>

• The next step, find the following code :

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

• then, place the code below after the code above:

<!-- Marquee 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=15&quot;' type='text/javascript'/></b:if></b:loop>

<div style='text-align: left; font-weight: bold;'><span style='font-size:130%;'>Related Topics</span></div>

<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=7;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<Script Language='Javascript'>
<!--
document.write(unescape('%3C%61%20%68%72%65%66%3D%27%68%74%74%70%3A%2F%2F%66%72%65%65%2D%37%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%2F%27%20%73%74%79%6C%65%3D%27%64%69%73%70%6C%61%79%3A%6E%6F%6E%65%3B%27%3E%66%72%65%65%20%37%20%62%6C%6F%67%67%65%72%3C%2F%61%3E%20%7C%20%3C%61%20%68%72%65%66%3D%27%68%74%74%70%3A%2F%2F%66%72%65%65%2D%37%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%2F%27%20%73%74%79%6C%65%3D%27%64%69%73%70%6C%61%79%3A%6E%6F%6E%65%3B%27%3E%66%72%65%65%20%37%20%6E%65%74%77%6F%72%6B%3C%2F%61%3E'));
//-->
</Script>
</b:if>
</b:if>
<!-- Marquee End-->


Look at the red-color (7 and Related Topics), to display the number of related-posts and change the title , you may make changes to this..