Cool Thumbnail View With Related Post For blogger

By : Follow Trends

On : 9/02/2015

In : Blogger Tips

0 comments

1. Log in to your blogger account and Go to Design >> Edit HTML

2. Make sure you put check mark to “Expand Widget Templates” 

3. Find this tag by using Ctrl+F    ]]></b:skin>

4. Paste  below code After  ]]></b:skin> tag 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
clear:both;float:left; 
height:100%;
min-height:100%;
width:100%;
margin:0px;
padding-top:5px;
}

#related-posts h2{ 
background:transparent url() repeat-x left bottom; 
font-family:verdana,Georgia,serif;
color:#000000; 
font-size:18px; 
line-height:28px; 
text-decoration:none; 
font-weight:normal; 
text-align:left; 
border:none; 
padding: 10px 0px 5px 0px; 
margin-top:15px; 
margin-bottom:15px
}

#related-posts a{
background:#d5d5d5; 
border:1px solid #000; 
text-align:center; 
margin-right:1px; 
color:#000000; 
text-decoration:none; 
padding-left:2px
}

#related-posts a:hover{
background:#4f4f4f; 
color:#eeeeee; 
text-decoration:underline
}

</style>
<script type='text/javascript'>
var defaultnoimage=&quot;&quot;;
var maxresults=5;
var splittercolor=&quot;#000&quot;;
var relatedpoststitle=&quot;Related Posts: &quot;;
</script>
<script src='http://goomelar.googlecode.com/files/related_post-thumbnail.txt' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails  End-->

5. Now Find this tag also by using Ctrl+F 
                              <div class='post-footer-line post-footer-line-1'>
                                  If cant find above tag try to find below tag

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

6. After found one of above code, paste below code after it

<!-- Related Posts  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>
<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:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
</b:if> 
<!-- Related Posts End-->

7. You are done. Cheers