Monday, August 07, 2006

Changing the banner in Blogger

Since a couple folks have asked about this recently I decided to make an entry and list out the steps. Darr set this up originally and I haven't experimented with other blog hosting sites (e.g., TypePad, WordPress, etc.) so I don't know if it is the same process to change banners for those blogs.

1. Create an appropriately sized banner. The standard for modern computers is a fixed 72 pixels-per-inch for everything except text, which is why text often appears larger when viewed on a PC than it does on a Mac. To give you an idea of size the current banner on our blog is 710 x 144 pixels.

2. Create a new entry and upload the banner like you would any other picture or photo.

3. Click the Edit Html tab.

4. Scroll through the entry until you locate the hypertext reference for the picture or photo, which will look like this: href="http://photos1.blogger.com/blogger/902/2050/1600/
Example.jpg".

5. Highlight and copy the url (i.e., the section in quotes). It will look like this: http://photos1.blogger.com/blogger/902/2050/1600/
Example.jpg.

6. Click Publish Post.

7. Click Template.

8. Scroll through the code until you find a string that looks like this: background-image:url("http://photos1.blogger.com/blogger/
902/2050/1600/OldBanner.jpg")

9. Delete the old url and paste the new one in its place. If you accidentally delete the quotes during the process, add them to the front and back of the url.

10. Click Save Template Changes.

11. Republish your blog to view the changes.

Bon chance, mes amis!

7 comments:

Noir said...

Thanks Christie! This is definitely on my todo list.

Elizabeth Prata said...

thanks a lot! That was nice of you. Where on the template did you paste the URL for the first time? toward the top? I tried it in a couple of different areas and boy, in the wrong place it sure does make the page look funny!

Mabel is a cutie. My Abby says hello.

Christie said...

Hey Elizabeth,
I checked out the page source and it appears we're both using the same template so I'm going to advise you try this --

1. go to your dashboard and access your blog

2. click Template

3. find the body section in the code (it should be right under the section that annouces what template you are using)

4. change the following:

background:#fff to background-color:#fff

5. type the following lines of code right after the background-color:#fff line:

background-image:url("http://...your url for the pic here...");
background-repeat:no-repeat;
background-position:center 30px;


Leave the rest of the code as is.

6. Click Save Template Changes

This should work but should you run into trouble, let me know and I'll do what I can to troubleshoot.

Christie said...

Here's what you need to do to get rid of the black border.

1. access your blog and click template

2. find the header section in the code

3. add the following (under the width line):

height:130px;

4. change the following:

border:6px solid black; to border:0px solid #ccc;

To change the blog title, you'll need to locate the blog title code, which is in the same section further down. Look for color:#-----; line and add the code for your color of choice. A quick Google search will provide you with a list of safe colors to use. :)

Taylor said...

Cool. Thanks.

Admin said...

Thank you very much it is really helpful tricks for everyone new blogger. keep on doing that thanks and always be successful.

Anonymous said...

i want to to travel to the abbay of saint sixtus of westvleteren http://atravel.in/hotel_owner-of-harrahs-hotel-and-casino discount travel reservation discount travel reservation
[url=http://atravel.in/tourist_tourist-attractions-in-huntsville-alabama]free travel website templates[/url] van ness travel [url=http://atravel.in/disneyland_kids-fly-free-to-disneyland]kids fly free to disneyland[/url]
advantages of travel incentives in businesses http://atravel.in/adventure_the-laser-adventure
[url=http://atravel.in/hotel_hotel-restaurant-marazion]best travel mug[/url] buy cheap travel insurance [url=http://atravel.in/maps_draw-tapo-maps]draw tapo maps[/url]
articles on travel marketing http://atravel.in/vacation-packages_vacation-packages-to-hershey-hotel volunteer travel [url=http://atravel.in/inn_hamton-inn-north-conway-nh]hamton inn north conway nh[/url]