How To Show Related Post Titles Only In Blogger

Here is a tip on how to show related post titles only in Blogger blog.

Yes, just a list of post titles and no thumbnails.

Many years ago, I used to install Linkwithin Widget.

Then I found it to be unreliable, as it did not always show relevant or related posts.

Another possible problem which I suspected was, Linkwithin slowed down my blog.

As the script is coming remotely from servers of Linkwithin.

I know there are already many tutorials out there showing you how to add fanciful related blog posts with thumbnails to your Blogger.

But the unfortunate thing is:

I find many of these designs and the coding are rather cumbersome and complicated.

The ornate designs together with the additional thumbnails, they will cluttered up your blog.

That is bad news.

It will slow down your blog from loading, just like Linkwithin widget.

Alright, here is the good news.

The tutorial I'm going to share you is a simple and clean layout.

It just display a list of related blog post titles below your blog post, as shown below:

Here is how I do it for this DiGiztal blog here.

In fact, you can see the actual list of related posts below this very blog post.

I titled it as, "More Tips Here:".

Anyway, you can change it to other title of your preference, as I will explain below.

Related Post Titles Only In Blogger

If you are interested, let's get started...

STEP ONE: Add Code In Head Section

1. Go to your Blogger dashboard.

2. Click on "Theme".

3. Under the "Live on Blog" image, click on "Edit HTML" button.

4. Now look for the this closing head tag which looks like this: </head>

5. Paste this code just BEFORE </head>.

 <!--Related Posts Without Thumbnails Starts Here-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts h4{margin-top: 10px;background:none;font:18px

Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;object-fit: cover;-webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; }
#related-title {color:#333;text-align:center;text-transform:capitalize;padding: 0px 5px 10px;font-size:12px;}
</style>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();
var relatedTitlesNum=0;
var relatedUrls=new Array();
var thumburl=new Array();

function related_results_labels_thumbs(json){

 for(var i=0;i<json.feed.entry.length-1;i++){
  var entry=json.feed.entry[i];
  relatedTitles[relatedTitlesNum]=entry.title.$t;
  try{
   thumburl[relatedTitlesNum]=entry.gform_foot.url
  }
  catch(error){
  }

  if(relatedTitles[relatedTitlesNum].length>70)
   relatedTitles[relatedTitlesNum]=relatedTitles

[relatedTitlesNum].substring(0,75)+"...";
  for(var k=0;k<entry.link.length;k++){
   if(entry.link[k].rel=='alternate'){
    relatedUrls[relatedTitlesNum]=entry.link

[k].href;relatedTitlesNum++
   }
  }
 }
}

function printRelatedLabels_thumbs(){

 for(var i=0;i<relatedUrls.length;i++)
  {
   if((relatedUrls[i]==currentposturl)||(!

(relatedTitles[i]))){
    relatedUrls.splice(i,1);
    relatedTitles.splice(i,1);
    thumburl.splice(i,1);
    i--
   }
  }

  var r=Math.floor((relatedTitles.length-1)*Math.random());
  var i=0;if(relatedTitles.length>0);
  document.write('<br><h3>Related Posts:</h3>');
  document.write('<ul>');

while(i<relatedTitles.length&&i<20&&i<maxresults){
   document.write('<a style="text-decoration:none;margin:0 4px 10px 0;float:left;');

   if(i!=0)document.write('"');

   else document.write('"');
   document.write(' href="'+relatedUrls

[r]+'"><u><li>'+relatedTitles[r]+'</li></u></a>');

   if(r<relatedTitles.length-1){
    r++
   }else
   {
    r=0
   }
   i++
  }

  document.write('</ul>');
  relatedUrls.splice(0, relatedUrls.length);
  thumburl.splice(0, thumburl.length);
  relatedTitles.splice(0, relatedTitles.length)

}
//]]>
</script>
</b:if>
<!--Related Posts without Thumbnails Ends Here-->

Important: Make sure you paste the code just BEFORE </head>.

Note: You can customize the length of post titles and also the title of this widget.

Length Of Post Titles As Displayed

If most of your post titles are rather long, then you might like to change the number 70 in the code to something like 80.

It is up to you.

You can still change the number even after you have set it up.

Widget Title as Displayed

As the code here, the title is written as "Related Posts".

Again you can change this title to your own choice.

As for this blog, I have changed it to "More Tips Here:".

Now, let's move on to Step Two.

STEP TWO: Add Code In Footer Area

This step is to position the list of related blog titles below your blog post.

1. Look for the code <div class='post-footer'>.

2. If you found more than one of <div class='post-footer'> code, stop at the SECOND one.

3. Now paste this code just BEFORE <div class='post-footer'>.

<!-- Related Posts Without Thumbnails Code Starts Here-->
<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>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=5&quot;'type='text/javascript/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>
<!-- Related Posts without Thumbnails Code Ends Here-->

Note: Again, you can customize the number of post titles.

Maximum Blog Titles Displayed

You can set the maximum number of blog post titles to be displayed.

The code above is set at 5.

To make the change, you just replace the number 5 to probably 4 or 6.

It's up to you.

Note: It will NOT always show the maximum number of post titles as you have set.

It will only display or show the related or relevant blog posts. 

4. Finally, click on "Save theme" button.

That's all you need to do.

Now, check whether the list of your related blog post titles appear below your blog post.

See whether it is working as it should.

Note: It will NOT appear or display on your Home or Main page.

The list of related blog post titles will only appear below each individual blog posts.

Just check on the single or individual blog post now.

It should work, as I have used it on this blog myself.

What if it's not working?

Then, you should recheck to make sure you have pasted the code in the correct position as instructed above.

Hopefully, it is working perfectly for you.

Note: You might have customized your Blogger theme or template.

Just like this blog (using Simple Theme), I need to past the code ABOVE <div class='post-footer-line post-footer-line-3'/>.
 
I hope this tutorial and all the other tips available at DiGiztal, are helpful to you.