How add Related post with scrolling with image

You find so may article in this you can add related posts within any posts,here is another method in wich we can scroll posts with Thumbnails his 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.

To add this first go to you blogger account and follow this
  1. dashboard
  2. edit html
  3. expand widgets 
  4. find </head> (use ctrl+f)
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>




5.  find the following code 
<div class='post-footer-line post-footer-line-1'>
6. place below code
<!-- 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-->

You can change related topics name with your own world

Posted by Durgesh on 08:49. Filed under , , . You can follow any responses to this entry through the RSS 2.0. You can leave a response or trackback to this entry

0 comments for "How add Related post with scrolling with image"

Leave a reply