Usama Insights

Adding custom footer in bearblog dev website

Written by: H. M. Usama Khan

Table of Contents

  1. Requirements
  2. Result
  3. Adding code in the footer
  4. Step-by-Step Guide
  5. Notes

I love to add personality to my website and its continuous process. Right now, my site is a bear bare minimum (lol). It will gradually evolve with my taste & time.

I am your average Joe on the internet. A non-tech individual, that tries to understand the things that I am currently using or need some knowledge to use it.

So, I want to change the footer of my website to add some links for visitors like normal websites.

Requirements

I am some requirements in my mind to keep my footer simple.

  1. No tracker embedded
  2. No icons (It will most of the time lead to trackers)
  3. No CSS & Java

With those requirements in mind, I start hunting for relevant posts & examples. But I find most of that code includes icons & CSS.

So, I tried to copy the code and put it in ChatGPT with the above-given requirements. I had some success with ChatGPT with results. But the results are subpar.

So, I came back to square one. I tried to think of different sites footer that I want to replicate. I loved the simple approach of the bearblog footer.

Then, the process becomes simple. I first clicked GitHub of BearBlog[^1] and then search for the footer[^2] code. After find it and copy it. I edit it several times & tested it on Codepen[^3].

Result

Here is the finished code. You can copy the code and edit it to your liking.

See the Pen Untitled by Hafiz Muhammad Usama Khan (@UsamaInsights) on CodePen.

Now, we are done with the coding part. To add the above code in the footer, you can directly click this directives and paste it into the footer section. Then, save it and view it.

Step-by-Step Guide

You first open the "BearBlog.Dev" page and click "dashboard" if you are signed in. Next, click the "directive" that is adjacent to Markdown syntax and is below the post the "post body". Then paste the code in the footer section that is below the header section and https://bearblog.dev/dashboard/directives/.

Notes

[1]: It is at the footer/bottom of the BearBlog dev homepage.

[2]: You can find the footer code in bearblog dev Github repository path :templates/snippets/dashboard_footer.html

[3]: Codepin is an online code editor.

Enjoyed the article? Could you toast (like) it by clicking the upper arrow at the left bottom?

Comments

To make a comment, please send an e-mail to hmusamakhan (at) outlook (dot) com. Your e-mail address is not used for other purposes, and will be deleted after the comment is published. If you don’t want your real name to be published, sign the e-mail with the name you want to appear.

Reply via email

I try to post at least once a month. Subscribe via email , bookmark the page or RSS feed.

Subscribe via Email


#writing