How To Manually ADD AN IMAGE BANNER On BLOGGER Using HTML Code

Adding image banners on blogger using HTML code is a simple process that can be done in a few easy steps.

In this tutorial, I will guide you through the process of adding two image banners: a long horizontal banner ad and a square banner ad on the sidebar. Here’s how to do it:

Step 1: Prepare your images The first step is to have your images ready.

It’s recommended to convert them to the WebP format since it’s the latest recommended file format by Google.

Step 2: Go to Layout Log in to your Blogger account, go to your blog’s Dashboard, and click on “Layout” on the left-hand side menu.

Step 3: Edit the banner section Scroll down to the section where you want to add your banner.

For the long horizontal banner section, click on the “Edit” icon.

Copy The Code Below:

NOTE: Replace OUTGOING URL TO YOUR LANDING PAGE (with your destination url or landing page).

Replace IMAGE URL FROM BLOGGER (with your blogger-hosted image address/url)

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

Step 4: Delete default code Once you’re in the banner section, delete the default code by highlighting everything (Ctrl + A) and pressing the backspace key.

Step 5: Paste the HTML code above.

Step 6: Edit the code. There are two things to edit in the code: the outgoing URL and the image URL.

Replace the outgoing URL with the URL of the landing page you want your visitors to go to when they click on your banner ad.

Replace the image URL with the actual image URL of your banner as hosted on Blogger.

Step 7: Save the changes Once you’ve edited the code, make sure to put your links within the quotation marks and click on “Save”.

Then, click on the disk icon to save your changes.

Step 8: View the blog Click on “View Blog” to see your banner on the front end of your blog.

In conclusion, adding image banners on Blogger using HTML code is a simple process that can be done in a few easy steps.

With this tutorial, you can easily add image banners to your Blogger blog and make it more visually appealing to your visitors.

Watch The Video Tutorial Instead:

Importance Of Adding Image Banners On Your Blog:

Adding image banners on your blog can provide several benefits, including:

  1. Attracting Attention: Image banners can grab the attention of your readers and draw them in to explore your blog further. They can help to break up large blocks of text and make your blog more visually appealing.
  2. Promoting Products or Services: If you have products or services to promote, image banners can be an effective way to showcase them to your audience. You can use eye-catching images and persuasive copy to entice readers to click through and learn more.
  3. Increasing Click-Through Rates: Image banners can increase click-through rates (CTR) to your website or landing pages. By featuring a clear call-to-action and directing readers to a specific page, you can encourage them to take action and engage with your content.
  4. Enhancing Branding: By using image banners that feature your brand colors and logo, you can reinforce your brand identity and make your blog more recognizable to readers. This can help to build trust and loyalty with your audience over time.
  5. Generating Revenue: If you monetize your blog through advertising or affiliate marketing, image banners can help you to generate revenue by driving traffic to sponsored content or products. By featuring relevant, high-quality ads, you can create a positive user experience while also earning income for your blog.