Tuesday 5 April 2016

How to add banner to blogger

Create a New Banner Element at the Top
Step 1
Sign in to your Blogger account and click the name of your blog to access its administrative controls.

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

Related Reading: How to Edit a Banner Size in Blogger

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

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

Step 5
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'>

Step 6
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
Step 1
Click the "Layout" tab, and then click "Add a Gadget" in the new layout element at the top of the page.

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

Step 3
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">

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

Replace Header With Banner Image
Step 1
Sign in to your Blogger account and click the name of your blog.

Step 2
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.

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

Step 4
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.

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

No comments:

Post a Comment