Ghost Blog Code Injection Guide

The most practical code injections to improve your Ghost blog.

Remove the "Powered by Ghost" tag at the bottom of your website

In Settings → Code Injection, add this text to the "Site header":

<style>
footer div div {
    display: none;
}
</style>

Add copyright text to bottom of website

By removing the "Powered by Ghost" tag using the code above, you will also remove the copyright notice. To re-add it, do the following.

In Settings → Code Injection, add this text to the "Site footer":

<p style="text-align: center; font-size: 14px; color: #999; background-color: #15171a; font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif, sans-serif; font-weight: 500;">
  Ian Greer © <script>
    var currentYear = new Date().getFullYear();
    document.write(currentYear);
  </script>. All rights reserved.
</p>

Replace "Ian Greer" with your name or business name. The year automatically updates.

Remove the "Powered by Ghost" tag at the bottom of the newsletter Portal

In Settings → Code Injection, add this text to the "Site footer":

<script>
window.onload = function () {
    let portal = document.getElementById("ghost-portal-root");
    const interval = setInterval(() => {
        let frame = portal.querySelector('[title="portal-popup"]');
        if (frame !== null) {
            const styleElement = document.createElement("style");
            styleElement.innerHTML = `.gh-portal-powered { display: none; }`;
            frame.contentDocument.head.appendChild(styleElement);
        } else {
            frame = null
        }
    }, 300)
}
</script>

Remove the social media icons from the home page

Removing these social icons can be done by removing the Facebook and Twitter links from Settings → General → Social accounts. If you remove the links and save, the social icons will no longer appear.

OR

In Settings → Code Injection, add this text to the "Site header":

<style>
.gh-social {
        display: none;
    }
</style>

Create a typewriter effect

Put this code where you want the typewriter effect to display in the page.

• Note: add this code as a card within a blog post or page, do not use code injection.

<h2 id="typewriter">Typewriter</h2>

Put this code at the bottom of the page using a "raw HTML card."

• Note: add this code as a card within a blog post or page, do not use code injection.

<code>
<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>

<script>
    const app = document.querySelector('h2#typewriter');

    const typewriter = new Typewriter(app, {
      loop: true,
      delay: 20,
      typingSpeed: 20,
      deleteSpeed: 20
    });

    typewriter
      .typeString("I'm a <strong>financial analyst</strong>")
      .pauseFor(750)
      .deleteChars(17)
      .typeString('<strong>quant investor</strong>')
      .pauseFor(750)
      .deleteChars(15)
      .typeString('<strong>founder</strong>')
      .pauseFor(750)
      .deleteChars(7)
      .typeString('<strong>lifelong learner</strong>')
      .pauseFor(1000)
      .deleteAll(22)
      .start();
</script>
</code>

The code block above is what I use for my "About" page. You can change the text within the quotes to make it print the text you want. (Make sure to change the .deleteChars value to the correct number of characters for your text.)

Create a code block

This isn't technically code injection but it's essential for making coding tutorials in Ghost.

To add a block of code to a post or page, type three backticks (```) followed by the name of the coding language and hit tab or enter. For example, to add a block of javascript, write: ```javascript.

Full code block guide.

Make a code block look good (Syntax highlighting)

Insert this code into the blog post code injection under "Page header":

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" integrity="sha512-vswe+cgvic/XBoF1OcM/TeJ2FW0OofqAVdCZiEYkd6dwGXthvkSFWOoGGJgS2CW70VK5dQM5Oh+7ne47s74VTg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Insert this code in the code injection under "Page footer":

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-core.min.js" integrity="sha512-9khQRAUBYEJDCDVP2yw3LRUQvjJ0Pjx0EShmaQjcHa6AXiOv6qHQu9lCAIR8O+/D8FtaCoJ2c0Tf9Xo7hYH01Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/autoloader/prism-autoloader.min.js" integrity="sha512-fTl/qcO1VgvKtOMApX2PdZzkziyr2stM65GYPLGuYMnuMm1z2JLJG6XVU7C/mR+E7xBUqCivykuhlzfqxXBXbg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Code injection full guide.

Full developer guide.