How to Sell Ad Space on a Blogger (Blogspot) Blog

To sell ad space on a Blogger (Blogspot) blog, add each ad slot as an HTML/JavaScript gadget: in Blogger, click Layout, click Add a Gadget in the section where the ad should appear, choose HTML/JavaScript, paste the banner's HTML into the content box, and save. For an ad inside a single post, paste the same code into the post editor's HTML view. AdSense is optional, so you can sell banners directly to advertisers at your own price, with or without AdSense running elsewhere on the blog.

Key takeaways

• The HTML/JavaScript gadget is the standard way to add a banner to a Blogger sidebar, header area or footer.
• For an ad inside a post, switch the editor to HTML view before pasting code, or the code appears as text.
• Which areas accept gadgets depends on your theme, and some responsive themes hide the sidebar behind a menu icon.
• AdSense is optional. Direct-sold banners can run on their own or next to AdSense.
• Use HTTPS URLs in ad code so HTTPS blogs don't show mixed-content warnings.

Add a banner with the HTML/JavaScript gadget

Blogger's help center covers gadgets in Change the design of your blog and names this same gadget as the way to show ads from other ad services. It works the same for a banner you sell yourself.

1. Sign in to Blogger and choose your blog.
2. In the left menu, click Layout.
3. In the section where the ad should appear, such as the sidebar, click Add a Gadget.
4. In the list that opens, find HTML/JavaScript and click its add button.
5. Enter a title, or leave it blank. The title displays above the gadget, so a short label like "Sponsor" or "Advertisement" tells readers what they're looking at.
6. Paste the banner code into Content.
7. Click Save. If you drag gadgets into a new order, save the layout as well.

Here's a basic banner snippet with placeholder URLs:

<a href="https://advertiser.example.com/" target="_blank" rel="sponsored noopener">
  <img src="https://cdn.example.com/acme-300x250.webp"
       width="300" height="250"
       alt="Acme Analytics: see every campaign in one dashboard"
       style="max-width:100%;height:auto">
</a>

rel="sponsored" tells search engines the link is paid, and the width and height attributes reserve space so your posts don't jump while the image loads. Our guide to adding a banner ad with plain HTML explains each attribute.

Put an ad inside a post with HTML view

An ad between paragraphs sits inside the content itself, which suits long posts.

1. In Blogger, click Posts, then click the title of the post. Or click New Post.
2. Click the pencil icon at the far left of the editor's toolbar and choose HTML view. In HTML view, that icon shows <>.
3. Find the spot for the ad, usually after the second or third paragraph, and paste the snippet between a closing </p> and the next <p>.
4. Switch back to Compose view to check the placement, then click Update or Publish.

Code pasted into Compose view is inserted as visible text, so always paste in HTML view.

An in-post ad appears only in that post. That's fine for a few popular evergreen posts, which can each be sold as their own slot. To place a banner in every post automatically, use a gadget section next to the posts (see below) or edit the theme. If you edit the theme, back it up first: click Theme, click the down arrow next to Customize, choose Backup, then click Download.

Theme-specific gadget areas

Blogger's Layout page is a map of your theme. Each box, such as the header, the posts area, the sidebar or the footer, is a section, and the sections available depend on the theme you use. If a box has no Add a Gadget link, the theme doesn't allow gadgets there: theme code can switch off adding gadgets to a section or cap how many it holds.

Where a slot sits matters more than which theme you use:

Two theme behaviors catch publishers out:

• Hidden sidebars. Blogger's responsive themes, such as Contempo, Soho, Emporio and Notable, adapt to phones, but some move the sidebar into a menu. In Contempo, for example, the sidebar stays behind the menu (hamburger) icon unless the browser window is very wide. A banner there can go unseen, so put your main slot somewhere that's always visible.
• Gadgets missing on phones. Some blogs, usually on older themes, show phone visitors Blogger's separate mobile template. According to Blogger's layout tags reference, only the Header, Blog, Profile, PageList, AdSense and Attribution gadgets show on mobile by default, so an HTML/JavaScript gadget is left out. If your theme is responsive, click the down arrow next to Customize on the Theme page, open Mobile settings and choose Desktop. Otherwise, in Edit HTML, add mobile='yes' to that gadget's <b:widget> tag.

Before you sell a slot, preview it at desktop and phone widths and confirm it appears where buyers expect. A 728×90 won't fit a phone screen, so pair it with a 300×250 or 320×50 slot; our banner ad sizes guide covers the combinations.

AdSense, direct-sold banners, or both

Blogger doesn't require AdSense. Its help center says that to make money with Blogger, "you can show AdSense and other ads on your pages." AdSense is set up from the Earnings menu when your blog is eligible, and it has its own program policies. A direct-sold banner is just HTML in a gadget, so it doesn't depend on AdSense approval at all.

Here's how the options compare:

• AdSense only. Google brings the advertisers and runs the auction, so there's nothing to sell, but you don't set prices and have limited control over which ads appear.
• Direct-sold banners only. You set the price, choose the advertisers and approve every creative, but you have to find buyers. This works best on niche blogs where you can name companies that sell to your readers.
• Both. Keep AdSense in some positions and sell your best slot directly. If you run AdSense, read its current program policies, because they apply to pages that show its ads.

Our comparison of AdSense alternatives for small publishers goes deeper. One more note: Blogger's custom ads.txt setting (Settings → Monetization) is for third-party ad providers. ads.txt declares which companies may sell your inventory programmatically, and a banner you sell directly and embed as a plain image link isn't bought through those systems, so it needs no ads.txt entry.

Selling Blogger ad slots with Spreadiom

Hand-coded banners work for one sponsor. Once several advertisers rotate through a slot, you're swapping gadget code on start dates, chasing payments and counting clicks.

With Spreadiom, you create a slot with a size and a daily price, then paste its one-line embed into an HTML/JavaScript gadget or a post's HTML view. It's plain HTML with no JavaScript and no cookies, served over HTTPS:

<a href="https://www.spreadiom.com/ABC-12/link" target="_blank" rel="sponsored noopener"><img src="https://www.spreadiom.com/ABC-12/img" width="300" height="250" alt="Advertisement" style="max-width:100%;height:auto" loading="lazy"></a>

While nobody has booked the slot, it shows an "Advertise here" image that links to the slot's booking page and availability calendar. Advertisers book as guests, pick dates, upload a banner that's cropped to the slot size and screened automatically for prohibited content, and pay by card through your own Stripe account or with PayPal straight into your PayPal account. Spreadiom never holds the money, and the booked ad goes live on its start date without you touching the gadget again.

If you turn on approval, a card is only charged when you approve, PayPal advertisers pay within 48 hours of your approval, and requests you don't review are canceled automatically. Impressions, clicks and CTR are tracked per slot, with crawlers and other bots filtered out, and you can test the whole flow with Stripe test keys first.

Spreadiom is free to start, with a 5% fee on completed bookings that's invoiced monthly and never deducted from the advertiser's payment; Stripe and PayPal processing fees are separate. For pricing the slot, see how much to charge for banner ads, and link the booking page from an Advertise With Us page. When you're ready, create a free account.

FAQ

Can I put ads on Blogger without AdSense?

Yes. Blogger's help center explains how to show ads from other ad services with an HTML/JavaScript gadget, and a direct-sold banner is just HTML in that gadget. You set the price and deal with the advertiser directly; your blog still has to follow Blogger's content policy.

How do I add a banner ad to Blogger?

In Blogger, click Layout, then Add a Gadget in the section where the ad should go. Choose HTML/JavaScript, paste the banner's HTML into Content and click Save. Use HTTPS image URLs so the banner doesn't trigger mixed-content warnings.

How do I add an ad inside a Blogger post?

Open the post, click the pencil icon at the far left of the toolbar and choose HTML view. Paste the banner code between two paragraphs, switch back to Compose view to check it, then click Update or Publish.

Why doesn't my HTML/JavaScript gadget show on mobile?

Either your theme hides that section on small screens, as Contempo does with its sidebar, or your blog uses Blogger's separate mobile template, which shows only a few gadget types by default. Choose Desktop under Mobile settings if your theme is responsive, or add mobile='yes' to the gadget's widget tag in Edit HTML.

Can I run AdSense and direct-sold ads on the same Blogger blog?

Yes. Many bloggers keep AdSense in some positions and sell one or two prime slots directly. Read AdSense's current program policies, which apply to pages showing its ads, and keep the total number of ads low enough that your posts stay easy to read.