Thursday, March 15, 2012

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

No comments:

Post a Comment