Sunday, March 13, 2011

How to add related post with thumbnail to blogger

How to add related post with thumbnail to blogger
1. Log it to your blogger and go to Design >> Edit HTML

2. First,download the present template as a backup.

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

4.Find this tag by using Ctrl+F </ head>


5. Paste below code before  </ head> tag

<!--Related Posts with thumbnails Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
height:100%;
min-height:100%;
padding-top:10px;
padding-left:15px;
padding-right:15px;
}

#related-posts h2{
font-size: 1.3em;
color: black;
font-family: Arial;
margin-bottom: 0.75em;
}

#related-posts a{
color:black;
}

#related-posts a:hover {
background-color:#eeeeee;
}
</style>
<script type='text/javascript'>
var defaultnoimage="http://lh5.ggpht.com/_15FopxVONSo/TD3yhixJLoI/AAAAAAAADaY/gk-KFA5_m7w/noimage.png";
var maxresults=5;
var splittercolor="#cccccc";
var relatedpoststitle="Related post";
</script>

</b:if>
<!--Related Posts with thumbnails End-->

6. Search this code again <p class='post-footer-line post-footer-line-1'/> Or post-footer-line

7. Paste below code after one of above code

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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'/>
<!-- remove --></b:if>
<!-- Related Posts with Thumbnails Code End-->

8.  Now Save template .you are done.

* Replace  with Related post as your like
* Replace  with 5 for changing post amount on related post

5 comments:

  1. i have solved the problem of small thumbnails with this new script ...checkout http://www.jasica.in/2011/04/bigger-thumbnails-in-related-posts-with.html

    ReplyDelete
  2. this is not working for me, i decide to use linkwithin again

    ReplyDelete
  3. Thanks a lot sir. It worked for me.

    Regards,
    Vibha from ConnectIndia

    ReplyDelete