Follow us on Facebook

Show Related Posts in Blogger With Thumbnails - Beautiful Styling


Earlier i wrote i post on how to show related posts below blogger posts. That was a beautiful feature however that script displays related posts without thumbnails. Now, i am going to tell you how you can beautify you blog by showing related posts with Thumbnails. Thumbnails are tiny pictures which are extracted from the posts, it does not put load on your web pages so you should not hesitate while using this blogger hack. Here is how you can display related post with thumbnails.

Related Posts in Blogger With Thumbnails

  • Login in Your Blogger Account
  • Go to Dashboard > Design > Edit HTML
  • Check "Expand Widget Templates" box
  • Find this code
</head>
  •  Replace it with
<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:0px;
padding-left:0px;
}

#related-posts h2{
font-size: 1.1em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:red;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
var maxresults=7;
var splittercolor="#d4eaf2";
var relatedpoststitle="";
</script>
<script src='http://bplugins.googlecode.com/files/relatedpoststhumbs.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>
  • Now, search this code
<data:post.body/>
  • Copy-paste this code After searched code.
<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=8" ' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div>
<br/>
<div style='clear:both'/>
<div align='right' style='font-size:11px'><a href='http://www.folsol.com/2011/07/show-related-posts-in-blogger-with.html'>Related Posts with thumbnails</a></div>
<!-- remove --></b:if> 
<!-- Related Posts with Thumbnails Code End-->
  • Save Template
  • Done !

You can change number in blue color as per your requirement.

    No comments:

    Post a Comment

    About

    Followers

    Like Us

    Labels

    Donate us For Furture