Thumbnail Related Post With Marquee

Add ADS Widget in Your Blog.
This can display you 10 (Ten) Thumbnail Related Posts in each post of blog and it is moved by marquee.

1. Go to Dashboard, click Layout, click Edit HTML

2. Click ‘Expand Widget Templates’

3. Find code of HTML below:

</head>

you can use (Ctrl+F) to find easily

4.And immediately ABOVE/BEFORE it, paste this code:

<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://www.yourjavascript.com/5114033500/relatedthumbs21.js' type='text/javascript'/>
</b:if>

5.Next  Find code of HTML below:

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

OR

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

6.And immediately BELOW/AFTER it, paste this code:

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=12"' type='text/javascript'/></b:if></b:loop>
<h3><b>Related Posts</b></h3>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=10;
var relatedpoststitle="";
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'>
<a href='http://www.esoftload.info' style='display:none;'>Cyber World</a>
</b:if>
</b:if>

Notes:
var maxresults=10; means 10 Thumbnail Related Posts
displayed, you can change it.
Example: var maxresults=5; or, anything you like.

7. Click Save Template and Done. Now, you’ve already created Thumbnail Related Post With Marquee.


post signature


Article by

Isha has written 200 awesome articles.

If you like This post, you can follow Cyber World on Twitter. Subscribe to Cyber World feed via RSS or EMAIL to receive instant updates.

Google Profile | Facebook

Write for us a Guest Post!
Google

1 Comments

  1. Vinayak says:

    Can you make the thumbnail on left side….like the the way shown on the ‘realated post’ in wordpress style….
    Vinayak recently posted..Use Dublin Core Meta Tags in Blog To Boost Page Rank – ProBlogBoosterMy Profile

0 Trackbacks

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    *

    You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

    CommentLuv badge