Skip to main content

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

By
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.
Labels:

Comments

Post a Comment

Popular posts from this blog

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

By Jeffry Manhulad
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
Post a Comment
Read more

Reaction Paper for the movie The Count of Monte Cristo

By
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
Post a Comment
Read more

Pluggle Review: 6 Reasons Why I doubt Pluggle and Why I'm Not Joining

By
First thing first, I am not concluding that this Pluggle is a scam because as per my observation and as far as my knowledge is concerned, people including my close friends seems profiting from this scheme and got the money they invested into it in a short period of time, and with profit ( although I'm sure the return of investment they got was paid by the people they invited and not from the company itself ). I think there's no doubt as to their legitimacy because, YES they are legitimate and are registered with the Securities and Exchange Commission of the Philippines as PLUGGLE INC. Are they scam? " Scam " is defined as a " dishonest scheme or a fraud ", are they being dishonest? I think no because they intend to do what they say. Are they " fraudulent "? Fraud is defined as " wrongful or criminal deception intended  to result in financial or personal gain "? This is also vague but I think I was struck by the last pa
Post a Comment
Read more