Simple Related Post Widget For Blogger Without Thumbnails

In the last post I explained 'How to add related posts widget to blogger with thumbnails' and today I am posting another script which shows simple list of labelwise related posts with links at the end of post.With this type of related post widget you can engage your visitors on your blog for more time and increase your pageveiws.If you wish to add related posts widget with thumbnails then you should visit this post:
How To Add Related Posts To Blogger With Thumbnails.

Features:

• Adjustable Text Size.
• You Can Set Maximum Numbers Of Related Posts.
• Simple But Attractive Design
• Easily Visible To Readers.

Steps To Add Related Posts To Blogger:

• Go To Blogger>>Template>>Edit HTML
• Click On Template Box To Activate It
• Now Press CTRL+F And Search Following Code:

</head>

• Now Copy The Following Code And Paste It Above/Below </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-->

Note: Replace 24px for changing text size.

          Replace #3d87d0 to change colour.

• Now Press CTRL+F And Find Following Code:

<data:post.body/>

• Above/Below This Code Paste Following Code: 

<!-- 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-->

Note: To change maximum numbers of posts change no.5 from maxresults=5

• Save the template and you are done.

That's it you have now successfully added related posts to your bloggers blog. For any questions and problems you can leave a comment below.

Content Worth A Share ?

• Facebook
• Twitter
• Google+
• Pinterest
• StumbleUpon
• Dig
• LinkedIn

Written by Unknown

Satyam Bora Is 18 Years Old Boy Addicted To Blogging And Technology.He Is A Part Time Blogger And Student Of Civil Engineering. This Guy Is Always Here To Help You :)