Related Posts Widget For Blogger

Related Posts Widget in Blog
There are two type of Related Post Widget. One is Related Posts with thumbnails (text associated with the images) and second is Related Posts without thumbnails (related posts without images) just at the end of your Blog articles. Blogger default template does not have a related posts widget. So we need to add it manually by editing the HTML code in template. So let's begin adding it!


How to add Related Posts Widget in Blog.


Click on "Design" > "Edit HTML" > Back up your template
Use crtl F to find the code below

</head>

Copy below CSS code and Paste just above/before </head>
<!--Related Posts Start-->
<!--Remove--><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
margin-top: 20px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;
}
#related-posts .widget h2, #related-posts h2{
font-size: 24px;
font-weight: bold;
color: #3d87d0;
margin-bottom: 0.75em;
padding-top: 0em;
}
#related-posts a{
font-size:16px;
color: #555555;
font-variant:small-caps;
}
#related-posts a:hover{
text-decoration: none;
color: #ffffff;
font-weight: bold;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:none;
text-color:#000000
}
#related-posts ul li{
list-style-type: none;
border-left: 2px solid #1399CF;
border-bottom: 1px dotted #1399CF;
margin-bottom: 3px;
padding-left: 30px;
padding-top:0px;
}
#related-posts ul li:hover{
background-color: #1399CF;
border-left: 2px solid #B3CA3D;
border-bottom: 1px dotted #B3CA3D;
}
</style>
<script type='text/javascript'>
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://related-pos-below-blog.googlecode.com/files/releted%20post_www.techkgp.com.js' type='text/javascript'/>
<!--Remove--></b:if>
<!--Related Posts End-->

Settings
If you want to change the size and color of 'Related Posts' title, change the values (24 for the font size and #3d87d0 for the color)
Now Use Ctrl F to find the code below
 
<data:post.body/>

Copy below code and Paste just after/below <data:post.body/>

 <!-- Related Posts 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> <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=related_results_labels&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script> </div> <!--Remove--></b:if> <!-- Related Posts Code End-->

Settings
To change the number of maximum related posts change the value of maxresults=5

Save your template and you are done.
That’s all
Enjoy………..

1 comment:

  1. This comment has been removed by a blog administrator.

    ReplyDelete