Side Bar for advertising - Headline theme

Themes
1

Hi,

is there a way to include a side wide side bar which I could use to advertise e.g. books or other products using affiliate links?

Thank you

Best wishes
Jann

2

Hi again, bumping this up for help with coding to include a side bar on the right side of of the home page as well as posts.

I was tole it is already possible but my search was not successful.

3

This isn’t a small adaptation, but a bigger development/theme customisation task, if you want it done properly (What happens on mobile? How will you add new items to the side bar? What if Ghost updates the Headline theme further down the line? Just to name a few questions…)

You’d probably find somebody to help you here:

“Help with coding” in a community forum only works to a certain degree. If you’re looking for free help, I’d suggest giving it a shot yourself first – I am more than happy (and many others as well, I assume) to help you with any concrete questions and issues you run into.

A good starting point for this would be this:

3 Likes
4

If you decide to edit a theme to accomplish this, you might want to look at Source, which has a sidebar already that might be adapted to your purposes (if you want one where it is currently located), or look at repurposing one of the columns in the top gridded section.

I’ll suggest creating a page with the content and then pulling in the content of that page onto the front page as a way to populate the sidebar, but you can expect to need to do some customizing to make that work, for sure!

2 Likes
5

I kind have a janky solution to to this. I implement a right sidebar ad in Desktop mode for the source theme. You can find these in any posts at https://www.techweirdo.net/. In Mobiles the ads to below the post before the comments. I accomplished this by injecting the images with affiliate link as a div at the end of the post and added some css almost same as the table of contents css from this. Ask claude ai, it will help you. Also switch the position of the signup button in desktop mode if you put ads on the right side

Screenshot_20240425_225721_Chrome
Screenshot_20240425_225721_Chrome2000Ă—1092 423 KB

This is the source theme after those modification.
Btw hey @jannis what do you think about the magicpages banner on my site?

3 Likes
6

hi smartgoat, how did you activate the sidebar in Source theme? Thanks!

7

Hi here is something you can try, please change the html and css as per you needs

<style>
/* Right sidebar styles */
.gh-content {
    position: relative;
}

@media (min-width: 1300px) {
    .gh-right-sidebar {
        position: absolute;
        top: 0;
        bottom: 0;
        margin-top: 4vmin;
        grid-column: main-end / wide-end; 
        width: 260px; 
        margin-left: 40px; 
    }
    
    .gh-sidebar-content {
        position: sticky;
        top: 4vmin;
        padding: 20px;
        background-color: #f8f8f8; 
        border-radius: 5px; 
        border: 1px solid #e5e5e5; 
    }
}

/* For screens less than 1300px */
@media (max-width: 1299px) {
    .gh-right-sidebar {
        margin-top: 40px;
        padding: 20px;
        background-color: #f8f8f8;
        border-radius: 5px;
        border: 1px solid #e5e5e5;
    }
}
</style>

Insert this css as a code injection in each post or if you can edit your theme then at page.hbs . Inserting in site code injection may cause problems on the home page.

And in your post at the end before finishing insert this html

<div class="gh-right-sidebar">
    <div class="gh-sidebar-content">
        <h4>Sidebar Title</h4>
        <p>Add your sidebar content here. I am writing some sample lines to test the styles and some sample css to make it distinct.</p>
    </div>
</div>

Now if your device screen width is ≥ 1300px this part of text will appear at right sidebar. And on smaller screen at bottom. You can adjust this 1300px settings here @media (min-width: 1300px) { here at the beginning of the css.

Save this html as a snippet to easily add in posts or you can also edit post.hbs and add it below {{content}}. I hope it works.

This is where you can see it in action on a old version on my site The TechWeirdo | A not so weird Tech Blog

I used this for adsense and placement here.

<ins class="adsbygoogle" style="display:block;min-width:120px;max-width:250px;height:360px" data-ad-client="ca-pub-91078727xxxxxxx" data-ad-slot="71xxxxxxxxx" data-full-width-responsive="true"></ins>
1 Like
8

hello @smartgoat i would like to do the same for Tripoli theme please

9

@Lord_Rahl I don’t know if this above code snippets will work with the Tripoli theme or not. It may work as it is. I currently have no way to verify it. Give it a go.
On my own website, I now currently use the Tuuli theme. Tuuli has subscribe cta on the right sidebar, I just replaced that part with sponsor images. If the Tripoli theme support something like that then that would be a easy way to do it if the above code snippet does not work. You can also ask the theme developers :slightly_smiling_face:.