Related Posts Moves With Images At Blogspot

Making a move related articles with pictures course will look more attractive and is one to beautify our blog. for example like in this blog.

If interested to make moves related articles along with images, the steps are as follows:

First Steps

1. Log in to blogger.com which is owned by ID
2. Click Layout on the dashboard menu
3. Click Edit HTML
4. Click Expand Widget Templates
5. Search code </head>
6. Put the following code before the code:

<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:#FFFFFF;

}

#related-posts a{
color:#032CFB;
}
#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>

Step Two

1. Find the following code:

<data:post.body/>

or is this just the same

<p><data:post.body/></p>

note: if you already have read more there will be two codes above, select the first.

in addition to the code above, there is also the template code to look for is:

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

because each template is not the same code, it must be tailored to your template

2. Put the following code 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=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'>
<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-->

Description: red code can be replaced in accordance with the desired : FFFFFF (background code), 10 (the number of articles that appear), Related Topics (The title of the desired.)

3. Click Save

Hopefully useful.