Related Post With Thumbnails blogger tricks

This tutorial will show you how to show your related post with images under your blog posts.i wont waste your time with writing more lets start


Method 1

Step 1 

log in to blogspot and go to Design and than edit html now click on Expand widget templates

Step 2

now find </head> 

for save time just press ctrl+F and paste </head> in that you will get the location 

Step 3 

now Paste This code Before </head>

<!-- Starting Related Posts with thumbnails by Techx1.blogspot.com

-->

<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;

}

#related-posts h2{

font-size: 1.6em;

font-weight: bold;

color: black;

font-family: Georgia, &#8220;Times New Roman&#8221;, 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://blogergadgets.googlecode.com/files/relatedthumbs19.js' type='text/javascript'/>

</b:if>

<!--Ending Related Posts with thumbnails by Techx1.blogspot.com-->

Step 4

Now find this code 

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


if you cant find this find another code


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


Now after any of line you found paste this code and save


<!-- Ending Related Posts with Thumbnails By Techx1.blogspot.com-->
<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=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://techx1.blogspot.com/2011/10/related-post-with-thumbnails-blogger.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://techx1.blogspot.com/' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;Related Posts&quot;;
removeRelatedDuplicates_thumbs(); 
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!--Ending Related Posts with Thumbnails By Techx1.blogspot.com--> 


Now check Your blog


Method 2
___________________________________________________________
(Only for those whom not getting above code working)
Follow step 1 , step 2 , and step 3
Now Find this code


<div class='post-footer'>


Now immediately after this lines place this code

<!-- Ending Related Posts with Thumbnails By Techx1.blogspot.com-->

<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=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://techx1.blogspot.com/2011/10/related-post-with-thumbnails-blogger.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://techx1.blogspot.com/' style='display:none;'>blogger widgets</a>

<script type='text/javascript'>

var currentposturl=&quot;<data:post.url/>&quot;;

var maxresults=5;

var relatedpoststitle=&quot;Related Posts&quot;;

removeRelatedDuplicates_thumbs(); 

printRelatedLabels_thumbs();

</script>

</div><div style='clear:both'/>

</b:if>

<!--Ending Related Posts with Thumbnails By Techx1.blogspot.com--> 

This method will work for you if method 1 didn't work


YOU CAN ADJUST THIS WIDGETS 
you can change maximum number of posts displays by editing this code
var maxresults=5;


you can change name also
var relatedpoststitle="Related Posts";