How can you add a Substack-like Reference List to blog pages?

I'm trying to style my blog post pages, specifically blog posts with reference lists. I want something similar to blogs I've seen on Substack where there are superscript numbers in the blog post that link to a footnote in the reference list at the bottom of the page.

You can also click on the number in the reference list at the bottom to travel back up to the corresponding reference.

Using the normal anchor link system with code blocks doesn't work for me, I would need to put code blocks above every new reference and this adds large spaces between them (would like to know if there's a way to make this not happen). Also, I'd be unable to add anchor links inside the main body of text to travel up to from the reference section.

I tried writing out the blog post in a code block using html text. That way I can add an anchor link to that specific paragraph, at least. This might work for styling the footnotes, but when I wrote out the blog post in a code block by copy and pasting the html the text lost the custom hyperlink styling that I've got set up across the site. And I also think this wouldn't let me anchor link up to individual lines or add several anchor links in the same paragraph.

Does anyone know how this can be done?

Thank you

15 hours ago, HobbesEdits said:

I'm trying to style my blog post pages, specifically blog posts with reference lists. I want something similar to blogs I've seen on Substack where there are superscript numbers in the blog post that link to a footnote in the reference list at the bottom of the page.

You can also click on the number in the reference list at the bottom to travel back up to the corresponding reference.

Using the normal anchor link system with code blocks doesn't work for me, I would need to put code blocks above every new reference and this adds large spaces between them (would like to know if there's a way to make this not happen). Also, I'd be unable to add anchor links inside the main body of text to travel up to from the reference section.

I tried writing out the blog post in a code block using html text. That way I can add an anchor link to that specific paragraph, at least. This might work for styling the footnotes, but when I wrote out the blog post in a code block by copy and pasting the html the text lost the custom hyperlink styling that I've got set up across the site. And I also think this wouldn't let me anchor link up to individual lines or add several anchor links in the same paragraph.

Does anyone know how this can be done?

Thank you

Can you share the reference link/URL which you want to achieve?

This is the formatting I'd like:

Link to the page

On 8/9/2024 at 12:08 AM, HobbesEdits said:

This is the formatting I'd like:

Link to the page

Something like this quick example?

Click number on blog post content >> scroll down to bottom

Click number on bottom >> scroll top to corresponding number on blog post content

https://tuanphan3.squarespace.com/footnotes7?noredirect

pass: abc

Yes, exactly! Thank you, that would be perfect. How could I implement that on my site?

Also, I like that effect where the paragraphs fade in as the user scrolls down. Do you know how to implement that?

19 hours ago, tuanphan said:

You can follow these steps

#1. Use this code to Custom CSS box

  [id*="scrolltop"], [id*="foot"] {
    scroll-margin: 100px;
}
  a[href*="#scrolltop"] {
    color: #000;
    font-weight: bold;
}
a[href*="#foot"] {
    color: #000;
    font-weight: bold;
    text-decoration: none;
    position: relative;
    top: -5px;
}

#2. Use this code to Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $('<div id="scrolltop1"></div>').appendTo('a[href="#foot1"]');
  $('<div id="scrolltop2"></div>').appendTo('a[href="#foot2"]');
  $('<div id="scrolltop3"></div>').appendTo('a[href="#foot3"]');
  $('<div id="scrolltop4"></div>').appendTo('a[href="#foot4"]');
  $('<div id="scrolltop5"></div>').appendTo('a[href="#foot5"]');
  $('<div id="scrolltop6"></div>').appendTo('a[href="#foot6"]');
  $('<div id="scrolltop7"></div>').appendTo('a[href="#foot7"]');
  $('<div id="scrolltop8"></div>').appendTo('a[href="#foot8"]');
   $('<div id="scroltop9"></div>').appendTo('a[href="#foot9"]');
  $('<div id="scrolltop10"></div>').appendTo('a[href="#foot10"]');
  $('<div id="scrolltop11"></div>').appendTo('a[href="#foot11"]');
  $('<div id="scrolltop12"></div>').appendTo('a[href="#foot12"]');
  $('<div id="scrolltop13"></div>').appendTo('a[href="#foot13"]');
  $('<div id="scrolltop14"></div>').appendTo('a[href="#foot14"]');
  $('<div id="scrolltop15"></div>').appendTo('a[href="#foot15"]');
  $('<div id="scrolltop16"></div>').appendTo('a[href="#foot16"]');
   $('<div id="scroltop17"></div>').appendTo('a[href="#foot17"]');
  $('<div id="scrolltop18"></div>').appendTo('a[href="#foot18"]');
  $('<div id="scrolltop19"></div>').appendTo('a[href="#foot19"]');
  $('<div id="scrolltop20"></div>').appendTo('a[href="#foot20"]');
  $('<div id="scrolltop21"></div>').appendTo('a[href="#foot21"]');
  $('<div id="scrolltop22"></div>').appendTo('a[href="#foot22"]');
  $('<div id="scrolltop23"></div>').appendTo('a[href="#foot23"]');
  $('<div id="scrolltop24"></div>').appendTo('a[href="#foot24"]');
    $('<div id="scrolltop25"></div>').appendTo('a[href="#foot25"]');
  $('<div id="scrolltop26"></div>').appendTo('a[href="#foot26"]');
  $('<div id="scrolltop27"></div>').appendTo('a[href="#foot27"]');
  $('<div id="scrolltop28"></div>').appendTo('a[href="#foot28"]');
  $('<div id="scrolltop29"></div>').appendTo('a[href="#foot29"]');
    $('<div id="scrolltop10"></div>').appendTo('a[href="#foot30"]');
  $('<div id="scrolltop31"></div>').appendTo('a[href="#foot31"]');
  $('<div id="scrolltop32"></div>').appendTo('a[href="#foot32"]');
  $('<div id="scrolltop33"></div>').appendTo('a[href="#foot33"]');
  $('<div id="scrolltop34"></div>').appendTo('a[href="#foot34"]');
});
</script>

#3. Add a number > Highlight it > Add link > enter this url format

Make sure "Open in New Tab" is disabled

#4. Add a Code Block under Text

and use this code format into Code Block

<p id="foot1"><a href="#scrolltop1">1</a>
  The term “web of life” is proposed by Jason W. Moore. See Anthropocene or Capitalocene? Nature, History, and the Crisis of Capitalism, ed. J. W. Moore (PM Press, 2016).
</p>
<p id="foot2"><a href="#scrolltop2">2</a>
 “Earth workers” is a term I developed with Radha D’Souza in Court for Intergenerational Climate Crimes (Framer Framed, 2023).</p>

<p id="foot3"><a href="#scrolltop3">3</a>
 William Allen, “Plant Blindness,” BioScience, no. 53 (2003): 926. He writes that plant blindness is “the inability to see or notice the plants in one’s own environment,” resulting in “the inability to recognize the importance of plants in the biosphere and in human affairs.”</p>
<p id="foot4"><a href="#scrolltop4">4</a>
Neil Vigdor, “Bezos Thanks Amazon Workers and Customers for his Vast Wealth, Prompting Backlash,” New York Times, July 20, 2021 →.</p>
<p id="foot5"><a href="#scrolltop5">5</a>
Colin Burgess, Animals in Space: From Research Rockets to the Space Shuttle (Springer, 2007).</p>
<p id="foot6"><a href="#scrolltop6">6</a>
 Nicky Woolf, “SpaceX Founder Elon Musk Plans to Get Humans to Mars in Six Years,” The Guardian, September 28, 2016 →</p>
<p id="foot7"><a href="#scrolltop7">7</a>
  Rob Nixon, Slow Violence and the Environmentalism of the Poor (Harvard University Press, 2011)</p>

Thank you! Works almost perfectly, the only issue with this is it makes a new paragraph automatically after the number in the blog post that I can't take out. Here's what I mean:

Is there a way to fix this?

On 8/13/2024 at 12:39 PM, HobbesEdits said:

Thank you! Works almost perfectly, the only issue with this is it makes a new paragraph automatically after the number in the blog post that I can't take out. Here's what I mean:

Is there a way to fix this?

Use this CSS code

[id*="scrolltop"] {
	position: absolute;
}

18 hours ago, tuanphan said:

Use this CSS code

[id*="scrolltop"] {
	position: absolute;
}

 

Thank you!