Skip to main content

Adding related post without thumbnails in Blogger at the bottom of post body

Sample Output
I'm sharing here how I added a related links on my Blogger blog without thumbnails. I guess it's more practical to add related urls by labels in your blog without images because it simplifies your blog and also it doesn't make your site slow.

But it still depends on your requirements.

I had a hard time searching for codes on related links that does not contain images but the codes just doesn't work. Since I've already found a code which contains thumbnails and it's working, I decided to modify the code and make it bullet related links.

So here's how you add this code:

1. Go to your Blogger dashboard and edit the template's HTML, look for the code </head> and paste the following code above it.

NOTE: If you have post with more than 75 characters in it, the code will cut it down, if you want to add more or short it down, change the number 75 in line 28, the one in red color to a number you like.

If you want to change the "See also:" wordings, change it in line 52.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!--Related Posts without thumbnails Scripts and Styles Start-->
<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>75)
   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>See also:</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 Scripts and Styles End-->

2. Now, look for the code <div class='post-footer'>

If you found more than one, stop at the second result and copy-paste the code below also above it.

NOTE: The number of post it displays is 6, so if you want to display more than 6 related posts, change the maxresults variable in line 10 to a number you want.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<!-- Related Posts without Thumbnails Code Start-->
<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=6;
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>
<!-- Related Posts without Thumbnails Code End-->

Try saving the changes and try viewing a post that you believe has more than one related labels if it appears below the post body and don't close yet the edittor so you can revert the changes if it doesn't work.

Comments

Popular posts from this blog

Reaction Paper for the movie The Count of Monte Cristo

The Second Part of the Reaction Paper on the Count of Monte Cristo Movie. The Count of Monte Cristo is a great story that helps you to realize how far the reaches of vengeance can really go. When the Count is going around ruining people it seems like he is more of a machine than a person. It seems like he has no emotions and can’t forgive the people who hurt him. Although some people might argue that the people who wronged the Count truly had what was coming to them, some of the Count’s actions could be seen as unnecessary. In the end everyone will be punished or rewarded by God and you shouldn’t be worried about what other people do or say as much as you are worried about yourself. “God will give me justice,” this line which was engraved in the wall on the prison was retained on my mind when I watched the movie” The Count of Monte Cristo.” This movie amazed me very much because of its excellent theme. I really like the story because it has a mixed of drama, suspense and rom

PROVEN and TESTED: Step-by-step guide to Register Alumni Association with SEC Philippines

Registering and Incorporating your High School or College Alumni Association with the Securities and Exchanges Commission (SEC) is a straightforward process now especially that SEC already have an online process. Here is how we registered our Non-stock and non-profit alumni organization with the SEC in less than a month process. Prepare the personal information of your incorporators Before going to the SEC website, you will the the following information of your incorporators prepared: Complete name such as their first name, middle name, last name Birth date Address, and  TIN number Use the SEC eSPARC Online Company Registration Go to the SEC website and look for the Online Services and select SEC eSPARC and click on the Regular Processing. Alumni associations are non stock corporation so you won't be able to avail of the OneSEC Processing. Remember the following important step: Select the nearest SEC office from your area, you will need to bring the signed and printed copy later o

Guide on How to Buy Train Ticket at the Ticket Vending Machine of Philippine MRT and LRT [with photos]

Traveling via train is still one of the most convenient and efficient way of wandering around places especially in huge cities and provinces like Manila if you don't have your own private cars and thus opted to commute. Currently there are four lines of rapid transit systems continuously operating in Metro Manila such as the MRT Line 3 which runs along EDSA from Taft Avenue in Pasay City to North Avenue in Quezon City, the LRT Line 1 which runs from Baclaran Station of Paranaque City to Roosevelt Station in Quezon City, the LRT Line 2 runs from CM Recto in Santa Cruz Manila to Santolan Station in Marikina City, and the PNR Train which used to be the longest train system in the Philippines but stopped operations of most of its routes.  Map of LRT and MRT Trains in Metro Manila as of 2015. From Wikimedia Although buying tickets is still like lining up to catch a box office number one hit movie during rush-hours, you can still conveniently ride trains in the Philippin