📣🚀🐣🌼 Sonic Bloom - Spring Sale! | Exclusive offers for Cloud Shared Hosting - 70% OFF | Starting from $3.99/mo
Learn Ghost

Young blogging platform build on tope of node.js for fast loading speed and easy scalability!

• Last Updated: 05/11/2020
• ( 3 minutes reading )

How to inject code in the header and footer of your Ghost blog

Introduction

As an open-source application, Ghost provides you the utility of adding custom styles and codes to the header and footer of your blog pages or posts. This gives them the flavor and that unique look you always wanted to achieve. You are provided with one more tool to distinguish your blog from the rest of the competition. Other useful things you can do include injecting tracking codes and meta tags. In this tutorial, we are going to talk about how you can add custom styles and codes to your posts and your pages on the Ghost publishing platform. Let’s get started.

 

Getting Started

For a start, you have to log into your Ghost Admin DashboardTo do so, please open your favorite browser and enter your domain name, followed by "/ghost". For example:

  • ghost.hostarmadatutorials.com/ghost

 

Login page

 

Once logged, please navigate through the left sidebar to Settings Code injection.

 

Access Code Injection

 

Upon doing that, you will be redirected to the intended page.

 

Inserting Code into Pages

The "Code injection" page is split into two sections - “Site Header” and “Site Footer”. Under each one, you will find content boxes, where you can inject your custom codes and styles.

 

Header and Footer Code injection sections

 

To insert a code, simply click in the respective content box and enter it into it. If the snippet of code is bought or generated from a third-party site, you can just paste it inside.

 

Save Header and Footer code changes

 

Finally, when you populate the content boxes with the desired code, please press the “Save” button located on the top corner of the screen.

 

Insert Code into Selected Posts

To insert code inside a specific post, you need to access the "Post" section of your Ghost blog. To do so, please click on the “Posts” link in the left sidebar.

 

Access Posts

 

This will display all your posts in the middle of the screen. Please select one by clicking on it.

 

Select Post

 

This action will redirect you to the page overview section. Once there, please click on the cogwheel icon located on the top right corner of the screen.

 

Cogwheel button

 

Upon clicking on it you will be presented with a menu. Please select the “Code injection” option.

 

Select Code Injection option

 

This will present another dialog, containing two content boxes - the “Post header” and the “Post footer”.

 

Post Header and Footer

 

After entering or pasting your code snippet, please click the back arrow located on the top right side of the side menu.

 

Return to Post settings

 

Afterward, click the “X” icon, located on the top right corner of the side menu.

 

Edit Post settings

 

Clicking the “X” icon will unveil the cogwheel again, along with the “Update” dropdown menu, located on its left side.

 

Update post


To publish the new changes you made, please click the “Update” dropdown menu. After the menu is expanded, please select the “Update” button located in the bottom right corner.

 

Post updated notification

 

To go to your post and view your changes, please click on the “View Post” link inside the blue bubble displayed on the left side of the screen. If the code you inject is correct, you will see this reflected in your post!

 

There you have it. The methods you can follow to inject code inside your Ghost blog’s pages and post. Hopefully, following this tutorial proved insightful, and you are now fully able to use this great functionality!

 

 

...
Sebahat
Technical Support Captain

Sebahat is a young and bright woman who has become an invaluable part of our team. She started as a Customer Care Representative, mastering that role and, along the way, growing into a tech-savvy individual who is well acquainted with every support layer of the company. Driven by her aim to improve our customers’ experience constantly, she is committed to enhancing the extraordinary support we deliver.