You Are Here: Home» Widget Tips » How To Create Thumbnail Related Posts With Marquee

For those of you who already use or want to use thumbnails Related Posts (related article illustrated), would be more interested in using it, karen looks quite interesting with a picture, but there is little shortage of tools on this one, which take up much space on the blog page. Therefore, most blogs that I visit minimize the amount related to the post, especially with the narrow size of the posting. Therefore to make this alternative is the marquee (running).

Well, for example Thumbnail Related posts using this Marquee can see here my friend.

In previous posts have described how to create thumbnails Related Posts +, my friend can apply in advance tutorial Thumbnail Related Posts here, but simply apply the Code CSSnya only (script code first reply)
To create thumbnails Related Posts is to be displayed with a large number of the Marquee method, there is little change to be performed on a second script code.

Well, to get started:
1. Please see how to create thumbnails related posts here (Simply apply only code CSS / code first)
2. After my friend apply the first point above, now please find this code:

<!-- Marquee Serbablog Related Posts with Thumbnails Code 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=12&quot;' 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=&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>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://serba-seru.blogspot.com/2010/02/thumbnail-related-posting-with-marquee.html' style='display:none;'>Thumbnail Related Post</a>
<a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
</b:if>
</b:if>
<!-- Marquee Serbablog Related Posts with Thumbnails Code End-->

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

Or

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



3. If you've met one of the code above, place the following code after one of the code above:

- To display the number of posts, my friend can change the code in red
- To change the title, my friend can change the code blue

4. Save and see the results.
 
Congratulations to create, I hope useful
Tags: Widget Tips