Skip to main content

Ghost Snippets

Place any of the following in your Code Injection settings.

Found in: Ghost Admin -> Settings -> Advanced -> Code Injection

Site Header

<style>
    /* Make Hamburger Menu (Mobile) Visible on Dark Mode */
    .gh-burger:after,
    .gh-burger:before {
        background-color: white !important;
    }

    /* Hide "Powered By Ghost" from Footer */
    .site-footer .inner div {
        display: none;
    }

    /* Hide Footer entirely */
    footer {
        display: none;
    }
    
    /* Padding the bottom of page if CTA/Read More/etc is visible because removing footer causes it to hug bottom of page */
    .footer-cta,
    .read-more-wrap,
    .post-feed{
        margin-bottom: 100px;
    }
</style>

<script>
    // External Links Open in New Tab
    var links = document.querySelectorAll('a');
    links.forEach((link) =>
    {
        var a = new RegExp('/' + window.location.host + '/');
        if (!a.test(link.href))
        {
            link.addEventListener('click', (event) =>
            {
                event.preventDefault();
                event.stopPropagation();
                window.open(link.href, '_blank');
            });
        }
    });

    // Hide "Powered By Ghost" in Portal Popup
    window.onload = function ()
    {
      try {
        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
            }
        }, 0)
}
catch{}
    }

    // Inject a "Share this article" at the end of all posts
    async function copyToClip(text)
    {
        try
        {
            const protocol = window.location.protocol;
            await navigator.clipboard.writeText(`${ protocol }//${ text }`);
            var h4 = document.querySelector(`#c-share`);
            if (!h4.querySelector(`span`))
            {
                var span = document.createElement(`span`);
                span.innerHTML = ` (copied to clipboard)`;
                h4.appendChild(span);
                setTimeout(function ()
                {
                    span.remove();
                }, 2000);
            }
        } catch { }
    }
    var article = document.querySelector(`.article.post`);
    var section = article.querySelector(`.gh-content`);
    // Hacky workaround to only show on blog posts and not on pages like "About" (Blog Posts have a CTA when signed out, a read more section, or article comments)
    if (document.querySelector(`.footer-cta`) || document.querySelector(`.read-more-wrapper`) || document.querySelector(`.read-more-wrap`) || document.querySelector(`.article-comments`))
    {
        var hr = document.createElement(`hr`);
        section.appendChild(hr);
        var h4 = document.createElement(`h4`);
        h4.id = `c-share`;
        let url = `${ window.location.host }${ window.location.pathname }`;
        url = url.replace(/\/$/, ``);
        h4.innerHTML = `Share this post: <a href="#" onclick="copyToClip(\`${ url }\`); return false;">${ url }</a>`;
        section.appendChild(h4);
    }
</script>
Back to top