Related post widget for blogger with thumbnails and summaries

     After search for related post widget every where on google to add one for me into my blogger blog , I found one perfect related post plugin that can be easily included in blogger template . This widget is perfect just because it works smoothly without slowing your blog's loading speed . It is true if you use other type of related post widgets you will suffer from slow rendering spreed which takes too much time in loading web page.
     The source for this widget is helplogger.blogspot.com , which always helps me in designing my blogs. To check how this widget works just see this widget below this post for demo.

Related :  How to Create Categories in blogger

Steps to add related post widget to blogger with animated effects and Summaries and thumbnails .

1. Log in to your blogger account and go to dashboard of your blog .
2. Click on Template and click on edit HTML button .
3. Click on textbox where your code of template exists .
   Press  CTRL + F to open blogger search box to find something in your code.
4. Copy </head> and paste it on your blogger search box and hit enter to find this tag inside your template.

• After finding this tag , just paste Below script just above

</head> tag .
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedUrls = new Array();
var relatedpSummary = new Array();
var relatedThumb = new Array();
var relatedTitlesNum = 0;
var relatedPostsNum = 4 ; // number of entries
to be shown
var relatedmaxnum = 75 ; // the number of
characters of summary
var relatednoimage =
"http://3.bp.blogspot.com/-PpjfsStySz0/
UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/
s1600/no_image.jpg "; // default picture for
entries with no image
//]]>
</script>
<script src="http://
helplogger.googlecode.com/svn/trunk/related-
posts-with-thumbs-and-summaries.js" />

Customization :

Increase or decrease number of post that are displaying by modifying 4 in relatedPostsNum = 4 .
Change relatedmaxnum = 75 ; to increase or decrease number of characters displayed in post summary .

• Now you got related post widget but to make it look beautiful you need to add below css and your related post widget will become awesome .
• Now  Paste the following code above
  the same </head> tag:

<style>
.relatedsumposts {
float: left;
padding: 0px 10px;
overflow: hidden;
text-align: center;
/* width and height of the related posts area
*/
width: 120px ;
height: 200px;
border-right: 1px solid #E5E5E5;
display: inline-block;
}
.relatedsumposts:hover {
background-color: #F7F7F7;
}
.relatedsumposts img:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
.relatedsumposts a {
/* link properties */
color: #linkcolor ;
display: inline;
font-size: 10px;
line-height: 1;
}
.relatedsumposts img {
/* thumbnail properties */
margin-top: 2px;
height: 82px ;
padding: 5px;
width: 82px ;
border: 1px solid #fff;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0,
0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0,
.4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-
transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow: hidden;
}
.relatedsumposts h6 {
/* title properties */
display: table-cell;
height: 3em;
margin: 5px 0 0;
overflow: hidden;
padding-bottom: 2px;
vertical-align: middle;
width: 130px;
}
.relatedsumposts p {
/* summary properties */
border-top: 1px solid #E5E5E5;
border-bottom: 1px solid #E5E5E5;
color: #summarycolor ;
font-size: 10px;
height: 4em;
line-height: 1;
margin: 5px 0 0;
overflow: hidden;
padding: 5px 0 15px 0;
text-align: left;
}
#relatedpostssum {
background: #F3F3F3;
height: 200px; /* related posts container */
padding: 5px;
width: 100%;
}
.relatedpoststitle {
font-size: 19px;
font-weight: bold;
border-top: 3px solid #FB8227;
color: #777;
display: inline-block;
padding: 5px 10px;
width: 190px;
float: left;
margin: 0px -200px 0px 20px;
transform: rotate(90deg);
transform-origin: left top 0;
-ms-transform: rotate(90deg);
-ms-transform-origin:left top 0;
-webkit-transform: rotate(90deg);
-webkit-transform-origin:left top 0;
font-family: Gill Sans / Gill Sans MT, sans-
serif;
}
</style>

Customization :

Use comment lines to customize the appearance of related post widget.

• Again open search box on Blogger and search the following code

<a expr:href='data:label.url'
rel='tag'><data:label.name/></a><b:if
cond='data:label.isLast !=
&quot;true&quot;'>,</b:if>

• Now add below code snippet just below above found code .

<b:if cond='data:blog.pageType ==
&quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/
default/-/&quot; + data:label.name + &quot;?
alt=json-in-
script&amp;callback=readpostlabels&amp;max-
results=50&quot;' type='text/javascript'/>
</b:if>

• The entire code after adding above code will look like below code .

<b:loop values='data:post.labels'
var='label'>
            <a expr:href='data:label.url'
rel='tag'><data:label.name/></a><b:if
cond='data:label.isLast !=
&quot;true&quot;'>,</b:if>
<b:if cond='data:blog.pageType ==
&quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/
default/-/&quot; + data:label.name + &quot;?
alt=json-in-
script&amp;callback=readpostlabels&amp;max-
results=50&quot;' type='text/javascript'/>
</b:if>
</b:loop>

• At last , find below code

</b:includable>
<b:includable id='postQuickEdit' var='post'>

• After finding the above code , just add below code above the  </b:includable> tag,

<b:if cond='data:blog.pageType ==
&quot;item&quot;'>
  <div class='post-footer-line post-footer-
line-4'>
<div class='relatedpoststitle'>RELATED
POSTS</div>
<div id='relatedpostssum'>
<script type='text/javascript'>showrelated
();</script>
</div>
<div style='clear:both;'/>
</div>
</b:if>

• Click on save template and see that all changes are saved or not . If you find difficulties just comment below and our team will help you in installing related post widget in your blog.

Note: This related post with animated effects using css will only work if you have proper labels and more than 2 posts per labels in your blog. Otherwise you will not see any related post in your articles.