How To Manually Add An Image Banner On Blogger Using HTML Code

How To Manually Add An Image Banner On Blogger Using HTML Code

  • Adding image banners can make your Blogger blog look more professional and attractive to visitors.
  • Banners are great for promotions, advertisements, announcements etc.
  • In this post, we’ll learn how to manually add image banners on Blogger using HTML code. No plugins required!

Benefits of Using Image Banners

  • Catch visitors’ attention
  • Convey information quickly
  • Promote products, services or special offers
  • Increase click-through rates
  • Reinforce your brand identity
  • Look more professional and “official”

Image Requirements

  • Use high-quality, eye-catching images
  • JPEG, PNG or WebP formats recommended
  • Optimal banner dimensions:
  • Horizontal banner: 1600 x 500 pixels
  • Vertical sidebar banner: 300 x 600 pixels
  • Keep file size small for fast loading
  • Make banners scannable with minimal text

Accessing the HTML on Blogger

  • Log in to your Blogger account
  • Go to Layout > Edit HTML
  • Find the section where you want to add the banner code
  • Top banner goes in <header> section
  • Sidebar banners in <sidebar> or widget sections

The HTML Code Structure

  • Image tag: <img src="IMAGE URL" />
  • Link tag: <a href="LINK URL"></a>
  • Wrap image tag inside link tag
  • Full code structure:

Copy The Code Below

<a href="OUTGOING URL TO YOUR LANDING PAGE">
  <img src="IMAGE URL FROM BLOGGER" /> 
</a>

<a href="https://www.linkedin.com/pulse/cloudways-review-2024-features-pricing-pros-cons-chibuike-okoli-wq51f/"><img src="https://bit.ly/img-scr" /></a>
  • Replace LINK URL with destination page
  • Replace IMAGE URL with banner image location

How to Get the Image URL on Blogger

  • Create new draft post in Blogger
  • Click “Insert image” and upload banner image
  • Right-click image and select “Copy image address”
  • Paste this URL into the image src attribute

Adding a Horizontal Header Banner

  • Go to Layout > Edit HTML
  • Find <header> section
  • Paste full code structure, swapping in your URLs
  • Image size around 1600 x 500 pixels recommended
  • Click Save and View Blog to test

Adding a Vertical Sidebar Banner

  • Find Sidebar or widget area in HTML
  • Paste banner code into selected area
  • Image size around 300 x 600 pixels recommended
  • Save and preview to test

Tips for an Effective Banner

  • Match image style to your blog’s visual theme
  • Use minimal text – include only vital info
  • Link banner to relevant, high-quality landing page
  • Check banners on mobile devices
  • Refresh banners regularly
  • Track click-through rates

Troubleshooting Issues

Banner not showing up?

  • Check image URL is correct
  • Verify code is pasted in the right section

Banner links not working?

  • Double check link URL is valid
  • Test link in new browser tab

Image distorted or blurry?

  • Size banner image appropriately
  • Use high resolution source image

Maximizing Banner Performance

  • A/B test different banner sizes and styles
  • Animate banners or use eye-catching effects
  • Change banners based on seasons or promotions
  • Use Geo-targeting to show location-relevant banners

Conclusion

  • Adding banners takes your Blogger design up a notch
  • HTML code method gives you full customization options
  • Link banners to important pages to boost traffic
  • Refresh banners frequently to keep visitors engaged

Frequently Asked Questions

What is the best image format for banners?

JPEG, PNG and WebP are good options. WebP offers the best compression. Use high-quality source images for best results.

Where do I find the HTML code in Blogger?

Go to Layout > Edit HTML. This allows you to edit the HTML sections like header, sidebar etc.

What image size should I use?

Horizontal header banners around 1600 x 500 pixels. Vertical sidebars around 300 x 600 pixels. Size appropriately for your layout.

Can I animate or embed video in the banners?

Blogger does not support embedded animations or video in banner HTML code. You would need to add these through a third-party app or plugin.

Is there a limit on how many banners I can add?

There is no set limit, but too many banners can make your blog feel cluttered. Stick to 1-3 banner placements for the best user experience.

What’s the best way to create clickable banner images?

Use a graphic editor like Canva to add your desired link text/CTA and export as an image file. Alternatively, keep the banner design simple and add the text in the HTML.

How often should I change my banners?

Ideally every 1-2 months. Frequently updating your banners keeps the blog looking fresh and gives viewers new things to see.

Should I use banners on mobile layouts?

Yes, banners can work well on mobile, just size and place them appropriately. Test your mobile site after adding banners.

How do I track my banner performance?

Sign up for a free click tracking service like Bitly to create tracked links and monitor clicks and traffic sources.