.
.

How I Added Related Posts Widget To Blogger Blog

Many readers of your blog will spend more time on our blog after reading a post, if they see more related posts. If you really want to increase the page views of your blog, then you must be showing related posts under each post on your blog. In this post, I am sharing with you, how I added a widget/plugin to my blog , which displays list of related posts below each post on my Blogger blog.


The related posts widget will show a new related posts section below your post. The related posts widget fetches the related posts from those posts having the same label as the current post.


To add the related posts widget you will have to follow the steps below:.


==> Log in to your blogger dashboard
==> From there go to Layout > Edit HTML and tick the expand your widget templates box (option on the right). If you are using new Blogger dashboard, go to Template > Edit HTML
==> Click inside the HTML and use CTRL+ F to find </head>



Right above </head>, paste the code below.

<!--Related Posts Scripts and Styles Start-->
<style>
#related-posts {
float : left;
width : 350px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
text-decoration : none;
}
#related-posts a:hover {
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url(&quot;http://2.bp.blogspot.com/_u4gySN2ZgqE/SnZhv_C6bTI/AAAAAAAAAl4/Rozt7UhvgOo/s200/greentickbullet.png&quot;) no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 21px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
</style>

<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
document.write('<a href="http://www.ogbongeblog.com/2012/01/how-i-added-related-posts-widget-to.html" target="_blank" rel="nofollow"><font size="1" color="black">[Get Related Posts Widget for Your Blog]</font></a>');
}
//]]>

</script> 


<!--Related Posts Scripts and Styles End-->

Click on Save template

Now use CTRL+F to find this line of code


<div class='post-footer-line post-footer-line-1'> 


OR 


<p class='post-footer-line post-footer-line-1'>


Now paste the code below immediately after any of these lines (whichever you could find): 



<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<font face='Arial' size='3'><b>Related Posts: </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><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=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

Click on Save Template.

Now, go ahead to view one of your blog posts. You should see the Related posts below it.

Note: If you did not add a label (category) to a post, you might not see the related posts below it.

You can alter the CSS rules if you want to customize the look and feel

Feel free to share your recommendations or or questions via the comment form.

You can also check out: "How to Add Related Posts With Pictures Under Each Blogger Post "

Cheers!

29 comments:

  1. wao this is really lovely bro keep it up..thumbs up
    http://www.cashdove.com

    ReplyDelete
    Replies
    1. thanks for the comment bro. A great blog you have there. keep it up man.

      Delete
  2. Thanks bro, great development for my blog.

    ReplyDelete
  3. Anonymous2/01/2012

    thank you and remain bless till we meet again.

    ReplyDelete
  4. Jaido! Jaido!
    The Midas Touch Blogger...
    I hope to become popular like you one day...
    Keep the works on bro!

    ReplyDelete
    Replies
    1. Thanks for your comment. I will keep trying my best bro..

      Delete
  5. Thanks for sharing this info, but the one I implemented on my blog was gotten from Bloggersentral.
    Your blog seems to be putting on new looks in recent times.

    ReplyDelete
  6. tanks

    nasvetkay.blogspot.com

    ReplyDelete
  7. I think i am gonna prefer this to Linkwithin on my blog. thanks bro. you are the best.
    www.dailyhealthylifestyletips.com

    ReplyDelete
  8. Wao. Jst did it @ www.mgmcash.com/blog

    ReplyDelete
  9. I have retry it and is now fully showing. Thanks so much for this guide

    ReplyDelete
  10. I have done everything according on www.stalyfblog.com but its still not working. please what can be the problem?

    ReplyDelete
    Replies
    1. 1.Search for this line in your template
      div class='post-footer'
      2.Paste the second code before this line. Most templates have 2 of this code(div class='post-footer') so if you try in the first one and it does not work try the second one. I had thesame problem but it works now on my blog www.baba2023.com
      Let me know if it works

      Delete
  11. I like this related post widget, i embedded it on my blog and makes some modification to my standard. you can check it here. thank you ogbongeblog

    ReplyDelete
  12. Hi Jide. How did you make it show on your Mobile View Too? Thanks.

    ReplyDelete
  13. hello mr jide good work, am trying to use it on my blog is not work, and i have created categories lebels, pls help me

    ReplyDelete
  14. Great information Jide. I have tried it and have seen that it worked perfectly well on the custom mobile template. However I am very keen to know how to costumize the default mobile version of my blogger blog. For example, the default mobile version of this blog(ogbongeblog) shows ads, related posts and many other valuable widgets. I have faith that you will reveal this mystery to me and those intrested.

    Sincerely, Adoga | TIPCYCLOPEDIA

    ReplyDelete
  15. Hmm... Don't know what the problem is but it didn't work for me.

    ReplyDelete
  16. i dunno what i'm doing wrong but its still not working on my blog

    ReplyDelete
  17. is not working on my blog.

    ReplyDelete
  18. i cant find my post footer any more,my template has scatered while trying to apply this method,any help

    ReplyDelete
  19. am not cin d code 4 d 2nd 1 pls help wit screen shot

    ReplyDelete
  20. Thanks Sir Jide... Nice Lesson

    ReplyDelete

We love to hear from you!

If your comment is unrelated to this post, please use our Contact page.

Want to be notified when I reply your comment? Tick the "Notify Me" box.

THANKS.