How To Create A Custom Banner For Your Blog

i Creatas Images/Creatas/Getty Images

Adding a banner to your Blogger pages can be useful in generating advertising revenue for your blog, or for featuring your own products and services more prominently. Blogger doesn't include a layout option for inserting a separate top banner above your blog title, but you can create the option yourself with a minor edit to your blog's HTML code. If you only want to add an image banner in place of your blog title or behind the title in the header area, the process is much simpler, and requires no code editing.

Create a New Banner Element at the Top

Select the "Template" tab, and then click "Edit HTML" to access the code that controls your blog's layout.

Click the "Jump to Widget" menu, and then select "Header1." Blogger jumps to the code section that controls your blog header.

Scroll up a few lines until you find the following code: <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Change the "maxwidgets" value to "2", and change the "showaddelement" value to "yes". The line of code should now look like this: <b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>

Click the "Save Template" button to save your changes. Blogger creates a new layout element at the top of your blog that you can use to insert your banner.

Add Banner Image to New Element

Click the "Layout" tab, and then click "Add a Gadget" in the new layout element at the top of the page.

Select "HTML/JavaScript" from the pop-up window.

Paste the banner widget code supplied by the advertiser into the Description field. Alternatively, use your own banner image by entering the following code into the Description field, where "ImageURL" represents the link to your image file: <img src="ImageURL">

Click "Save" to return to the Layout screen, and then click "View Blog" to see your new banner.

Replace Header With Banner Image

Select the "Layout" tab to view your blog's layout, and then click the "Edit" link in the Header element at the top of the layout.

Click the "Browse" button, and then double-click the image file you want to use as your banner.

Select one of the Placement options to control how your banner interacts with your blog title and description. Select "Behind Title and Description" to place the banner image in the background, so that the title and description remain visible. Select "Instead of Title and Description" to replace the title and description with the banner.

Click "Save" to return to the Layout screen, and then click "View Blog" to see your new banner.

Tips

If you use your own banner image file at the top of your blog, size the image to fit the width of the screen. Generally, Blogger banners should be no more than 758 pixels wide.