2014年11月27日星期四

Repost - How to Add Banner to Blogger Blog

by Alan Sembera, Demand Media

As a beginner, i think this post is very useful, so i repost it here. 




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.
Create a New Banner Element at the Top
Step 2
Select the "Template" tab, and then click "Edit HTML" to access the code that controls your blog's layout.
Create a New Banner Element at the Top
Step 3
Click the "Jump to Widget" menu, and then select "Header1." Blogger jumps to the code section that controls your blog header.
Create a New Banner Element at the Top
Step 4
Scroll up a few lines until you find the following code: <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
Create a New Banner Element at the Top
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'>
Create a New Banner Element at the Top
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.
Add Banner Image to New Element
Step 2
Select "HTML/JavaScript" from the pop-up window.
Add Banner Image to New Element
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">
Add Banner Image to New Element
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.
Replace Header With Banner Image
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.
Replace Header With Banner Image
Step 3
Click the "Browse" button, and then double-click the image file you want to use as your banner.
Replace Header With Banner Image
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.
Replace Header With Banner Image
Step 5

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

没有评论:

发表评论