related post lists

How To Add A Related Posts List Under Your Blog Posts

In this post i will show you how to place a related posts widget under your blog posts.Displaying related posts under your blog posts is a great way to keep visitors to your blog – on your blog.The gadget works by displaying a list of posts that have the same label/labels as the post currently being viewed, so there is a good chance the visitors will also be interested in the related posts.To add the recent posts widget we must add two pieces of code to your blog.

related posts widget (1)

Adding Related Posts To Your Blog

1. Click ‘Layout’–>’Edit html’ for your blog
(Tick the expand widget templates box)

2. Find the following piece of code in your blogs hmkl:

</head>

3. Copy and paste the code below Directly Before </head>

<!--Related Posts Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#related-posts {
float:left;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;

}
#related-posts .widget h2, #related-posts h2{
font-size: 1.3em;
font-weight: italic;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:blue;
}
#related-posts a:hover{
color:red;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:bold;
font-size:10px;
text-color:#000000
}
#related-posts ul li{
background:transparent url(http://i941.photobucket.com/albums/ad259/spiceupyourblog/rss-1.jpg) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 13px;
padding-left: 30px;
padding-top:0px;}
</style>
<script type='text/javascript'>
var relatedpoststitle=&quot;Hey ! Here's Some Related Posts You May Like&quot;;
</script>
<script src='http://blogergadgets.googlecode.com/files/related.js' type='text/javascript'/>
</b:if>
<!--Related Posts Scripts and Styles End-->

Note: The heading is currently – ‘Hey ! Here’s Some Related Posts You May Like’ – this can be changed as to anything you like.

Optional : Change Icon

Petrina asked in a comment can the image be changed and the answer is yes.

This is the small icon that is displayed beside every title :

How to add a related posts list under your blog posts

This is the URL of that image :

http://i941.photobucket.com/albums/ad259/spiceupyourblog/rss-1.jpg

Simply find that URL in the code and replace it with the URL of the image you want to use.Make sure to use a small image around 16×16 to 25×25.

4. Now find this piece of code in your blogs html :

<data:post.body/>

5. Copy and paste the following code Directly Below <data:post.body/>

<!-- Related Posts Code Start-->
<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png'/></a><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><a href='http://www.spiceupyourblog.com' style='display:none'>Related Posts Widget</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>
<!-- Related Posts Code End For Info: www.spiceupyourblog.com-->

Note: You can change the maximum amount of related posts listed its currently 6
Simply change this section above : max-results=6

Once you click save the related posts list has been added.What do you think ?

Similar Posts

How To Add A Related Posts List Under Your Blog Posts
Informative
78
Useful
68
Easy To Read
88
Fact
84
Reader Rating0 Votes
0
80