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(https://2.bp.blogspot.com/_u4gySN2ZgqE/SnZhv_C6bTI/AAAAAAAAAl4/Rozt7UhvgOo/s200/greentickbullet.png) 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=”https://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

How To Add Related Posts Widget To Blogger Mobile View

Cheers!

Please Share :

Like What You Read?

Sign Up to get similar articles delivered to your email inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

76 responses to “How I Added Related Posts Widget To Blogger Blog”

  1. globalwalyy Avatar

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

    1. Jide Oguns Avatar

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

  2. Abdul Avatar

    Thanks bro, great development for my blog.

    1. Jide Oguns Avatar

      Thanks for your comment bro

  3. Anonymous Avatar
    Anonymous

    thank you and remain bless till we meet again.

    1. Jide Oguns Avatar

      Stay blessed too

  4. Lawrence Abiodun Avatar

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

    1. Jide Oguns Avatar

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

  5. Internet Investment Ideas Avatar

    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.

    1. Jide Oguns Avatar

      yes, trying to optimize it

  6. Ajayi Kayode Avatar

    tanks

    nasvetkay.blogspot.com

  7. Gabriel Avatar

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

  8. cor techclub Avatar

    Thank u.

  9. Innocent Avatar

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

  10. oke umurhohwo Avatar

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

    1. Nicholas Hon Avatar

      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 http://www.baba2023.com
      Let me know if it works

    2. Riwo Adhuze Avatar

      Thanks Nicholas Hon, your suggestion worked for me after battling for some days with the same issue Oke Uumurhohwo posted.

  11. blessing Avatar

    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

  12. Antonio Omeihe Avatar

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

  13. afripoint Avatar

    thanks

  14. omas kay Avatar

    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

  15. Adoga Godwin Avatar

    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

  16. Emmanuel Ozigi Avatar

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

  17. Monsur Bakare Avatar

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

  18. Chima Godson Avatar

    is not working on my blog.

  19. akpa chigozie Avatar

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

  20. Aniekeme Adolf Umoh Avatar

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

  21. Kaysy Amadi Avatar

    Thanks Sir Jide… Nice Lesson

  22. Pretty Happiness Avatar

    i did exactly what u said but it doesn't work on my blog

    1. Jide Oguns Avatar

      Guess you missed some steps or placed the code in the wrong location

  23. Ibrahim Morowa Avatar

    Hi…nice tutorial, i have implemented this on my blog bt i have discovered that the widget is not responsive to the mobile custom template.

    Can u enlighten us on how to make it responsive on every device coz i've been trying some tricks bt still havent come with solution.
    my blog http://bkuhabari.blogspot.com?m=1

    1. Jide Oguns Avatar

      change the size of the width in the code above to something smaller.

  24. Akuneme Christopher Avatar

    Thanks a lot bro, it finally worked

  25. Funmy Kemmy Avatar

    It is not working on mine Oga Jide. What else can I do? I don't mind if you can assist me to put it at your free period. Thanks.

  26. NaijaGroove Avatar

    So So Kul..thanx 4 dis bro

  27. Beauty Geek Avatar

    Hello, This is not working for me and I think its because I have another related post widget with pictures. What do I do?

  28. Farouk Ahmad Avatar

    Great thanks alot i follow d step, is now showing related post @ ufarblog.com

    1. Jide Oguns Avatar

      Glad it worked for you

  29. Egbo Ekene Avatar

    please I added it but it only works on mobile view of the blog, I am using a custom template though

  30. Omoniyi Kabir Avatar

    i cant find the second code in my template pls wat should i do

    1. Jide Oguns Avatar

      Reason I recommend Blogger default templates…

  31. Rexzzy barry Avatar

    sir pls i placed the code on my awesome blogger template, it showed on mobile view but didnt show up on pc view…. thanks as i ernestly await your reply.

    1. Jide Oguns Avatar

      Read the post all over again bro.

  32. Osundare Toheeb Avatar

    is not working ooo. unischolars.blogspot.com

    1. Jide Oguns Avatar

      Probably you didn't get something right. Working perfectly bro.

    2. Osundare Toheeb Avatar

      oh!!! i've discovered the fault, i searched what you pasted but it doesnt work, so i scrolled down and found something like that. so i saw something related, the <span….. which is below the first one is together with the code you pasted. So I did what you pasted again and it works. maybe that happen because im using the new blogger interface. im so glad! thanks!! and more grease to your elbow. i hope this will rectify those that didnt get it done.

  33. Chimezie Peters Ozofor Avatar

    Done everything it's only showing on my mobile view but not showing on my PC view, please solution to this, I took my time to read it over and over still can't find how to make it show on my PC view

    1. Gift Amadi Avatar

      It didn't appear on desktop view because you placed the code on mobile view post footer thats why. So just look for the desktop view post footer apply the thumbnail code. It should be below the first post footer 1.

  34. Paul Damy Avatar

    wow this is a great post thanks for this info.. also check DAMYTECHS blog

  35. Aborisade Glory Avatar

    this is so great bro. it works out for my blog. http://www.globalsquad.blogspot.com

  36. MN Islam Avatar

    Great work bro

  37. Imo Chinweizu Avatar

    nice…
    imocheezy.com

  38. PRINCE JONZY Avatar

    Thanks bro

  39. Admin Avatar

    Keep it up bro jide, visit my blog http://www.nwa9ja.blogspot.com

  40. Anonymous Avatar
    Anonymous

    I swear to God Mr Hide you are good…….. Your blog have helped my blogging life…..gisttrends.com

  41. ABODE Avatar

    thanks, its working perfectly.

  42. Yahaya Bagudu Avatar

    Thanks Oga Jide works perfectly…http://WWW.POP9JA.COM

  43. Imo Chinweizu Avatar

    Wow, worked for me

    Commenting from vibertechs.com

  44. swello gella Avatar

    wow thanks bro..i got it done.. rufgist.com

  45. Chidiebere Scofield Avatar

    This is nice

    me too I have a problem

    Google isn't' crawling my WordPress blog : http://generalbaze.com.ng

    what will I do about it

  46. Mtalula Mohamed Avatar

    Hello sir thanks very much for this tip. Sorry i use weebly, how can i benefit from this widget? Please help me, any one there.
    This is my blog: mogriculture.weebly.com

  47. Godson Obiazi Avatar

    my related post max result is displaying more than 5, how can I fix this?

  48. Uzoije Reward Avatar

    my is only showing double on mobile view, its not showing on desktop view ,please why?

  49. Johnpaul Onwueme Avatar

    This is cool

  50. BusinessFirstFamily.com Avatar

    You guys have a great tech blog. I was working on trying to implement related posts to get more traffic. This tutorial is very helpful to get the widget working. Thank you for the help.

  51. idunuola Avatar

    good evening sir…my bloggr new template is not saving HTML,,,anytime i change something …its not saving…

  52. Yusuf Bitrus Avatar

    I will just give it a try and see how it's going to be…but it's a great tutorial there.. commenting from zethag.com

  53. Ola Geek Avatar

    Wow, Thank you for sharing this… commenting from ZumaTech

  54. FreedyGist Avatar
    FreedyGist

    great work.. man…can i be ur friend??

  55. kasedope Avatar
    kasedope

    thanks man, working for http://www.kokowap24.com.ng

  56. Deji Avatar
    Deji

    First of all, great work you’re doing, Jide. However, I’ve tried to implement your codes and other codes especially concerning RELATED POST WIDGET, MAKING POST APPEARED SIDE BY SIDE ON MY BLOG DESKTOP AND CUSTOMIZED SHARE SOCIAL BUTTONS but to date none seems to work which could be because I’m not that coding savvy. Nevertheless I’m not giving up untill I get those three things implemented on my blog: My question is how can you be of help to get those things done personally or by referrals and at what cost? Thanks!

  57. BloggingGuru Avatar
    BloggingGuru

    Thanks bro, it works very well in my blog.
    https://blogtip360.blogspot.com

  58. Rhoda Amapakabo Avatar
    Rhoda Amapakabo

    Hello,
    I tried you process but it did not come out fine instead those words are appearing on my header when someone views my blog. How do I delete it please?

    Secondly,

    Couldn’t find the second code on my html page

  59. Iee Avatar
    Iee

    Hello,
    I succeeded in putting the first part into the script, but the second part failed.

Search

Copyright © 2025 | About | Advertise | Privacy Policy | Proudly powered by WordPress