Wednesday, August 24, 2011

Cool Thumbnail View With Related Post For blogger

Earlier  i post about recent post with thumbnail.
but this post have some different.  hope you will like it




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

14 comments:

  1. Nyceee Trick Man it's a new one Thanks for the share.... Keep It UP....

    ReplyDelete
  2. Thanks for this helpful post :)

    ReplyDelete
  3. Not working sir on my blog
    http://chemistryadda.blogspot.com/

    ReplyDelete
  4. Its working dear, im already checked it. follow steps properly.

    ReplyDelete
  5. Not showing up on my page either - code is inserted in proper places, and there is a space where the widget should be, but it does not appear. Any thoughts?

    http://optimaloptimist.blogspot.com

    ReplyDelete
  6. helpful posts, thanks in advance

    ReplyDelete
  7. Smart tutorial for blogger. I like it. Keep posting unique tips tricks and awesome tutorial.

    http://shinemark.blogspot.com
    http://adf.ly/msMG

    ReplyDelete
  8. I have problem with many codes like this. So far I am looking for widgets only. Do you happen to know recent posts with dynamic thumbnail that depends on the recent posts?

    If you have please do give me email at my contact section at http://saturdayupdate.blogspot.com/

    thanks.

    ReplyDelete
  9. whenever i tried Edit HTML with different code.I's not working.Can anyone give me suggestion for this.

    ReplyDelete