How to use custom Header, sidebar and Footer

Hi, community!

This is my first post, and I would like to share these tips with you. Perhaps, creating a sidebar.html and footer.html is a good idea for your static HTML site. It will save you time and effort.

Here is the script:`

<script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script>
<script>
$(function(){
var includes = $('[data-include]');
jQuery.each(includes, function(){
var file = '/' + $(this).data('include') + '.html';
$(this).load(file);
});
});
</script>

And here’s the code to call your sidebar and footer in your HTML pages.

<div data-include="sidebar"></div>
<div data-include="footer"></div>

Upload your sidebar.html and footer.html files to your main root directory.

Using the same method, you can also have a notification bar on top of your webpage.

You can use JavaScript to change the meta-tags of your page. I have verified that Google does index these client-side changes for the code below.

<script type='text/javascript'>
document.getElementsByTagName('meta')["keywords"].content = "My new page keywords!!";
document.getElementsByTagName('meta')["description"].content = "My new page description!!";
document.title = "My new Document Title!!";
</script>
1 Like

Hi there!

Thanks for posting these snippets! I am sure someone will find them helpful.