There's a very basic way of doing this with Javascript. Don't worry, it's nothing complicated!
Make a new .js file and name it whatever you want. For this example, I'm going to call it
sidebar.js.
This is where your sidebar's HTML code will be stored & printed. To achieve that, we will create a variable which will contain your sidebar's code in a string and later a function which will print out the contents of that variable.
let sidebarHTML = `Sidebar content will go in here.`;
document.write(sidebarHTML);
Adding in your sidebar's code into the variable's string, it will look something like this:
let sidebarHTML = `
<aside id="rightSidebar">
<center><img class="blinkie" src="/gifs/be-kind.webp" alt="be kind to your computer"></center>
<center><img class="blinkie" src="/gifs/internet loser.webp" alt="internet loser"></center>
<center><a href="https://www.imood.com/users/zeejay"><img src="https://moods.imood.com/display/uname-zeejay/fg-fceaf/bg-191970/trans-1/imood.gif" alt="The current mood of zeejay at www.imood.com" border="0"></a></center>
<h3>Navigation</h3>
<ul>
<li><a href="https://zj.neocities.org/">Home</a>
</li><li><a href="https://zj.neocities.org/about">About</a></li>
<li><a href="https://hizj.123guestbook.com/">Guestbook!</a></li>
<li><a href="https://zj.neocities.org/stamps">Stamp collection</a></li>
<li><a href="https://zj.neocities.org/scrapbook">Scrapbook</a> <img src="https://zj.neocities.org/gifs/updatedts.gif" alt="updated!" width="50px"></li>
<li><a href="https://zj.neocities.org/resources">Resources</a> <img src="https://zj.neocities.org/gifs/newts.gif" alt="new!" width="25px"></li>
<li><a href="https://zj.neocities.org/neighbours">Internet neighbours</a> <img src="/gifs/newts.gif" alt="new!" width="25px"></li>
</ul>
<div id="statuscafe"><div id="statuscafe-username"></div><div id="statuscafe-content"></div></div><script src="https://status.cafe/current-status.js?name=zeejay" defer></script>
<br>
<center><a href="https://tamanotchi.world/7460c"><img src="https://tamanotchi.world/i2/7460" alt="It's tamaNOTchi! Click to feed!"></a>
<br>This is Kurt! Click to feed him :3</center>
<h3>Webrings!</h3>
<center><p><a href="https://hotlinewebring.club/zj/previous" target="_blank">←</a> <a href="https://hotlinewebring.club/" target="_blank">hotline webring</a> <a href="https://hotlinewebring.club/zj/next" target="_blank">→</a></p></center>
<center><p><a href="https://webring.dinhe.net/prev/zj.neocities.org">←</a> <a href="https://webring.dinhe.net/">retronaut ring</a> <a href="20230127205717/https://webring.dinhe.net/next/zj.neocities.org">→</a></p></center>
<center><p><script src="https://nuthead.neocities.org/ring/ring.js"></script></p></center>
<center>
<object id="melonland-surf-club" data="https://melonland.net/surf-badge.svg?fill=#fceaff" type="image/svg+xml" style="width: 100px; height: 100px;"></object>
</center>
`;
document.write(sidebarHTML);
And now, wherever you want to include your sidebar in your HTML pages, just add this little snippet:
<script src="path_to_the_file/sidebar.js"></script>
Make sure to change
path_to_the_file into, well, the path which leads to
sidebar.js's location in your site files.
And, of course, if you have given the file your own name, make sure to change that as well.
If something was made unclear, feel free to ask!
Author
Topic: Make side bar content apply on every page? (Read 3552 times)
