Help - Search - Members - Calendar
Full Version: Custom Header for Blogger
OpenSourcePhoto > World Wide Web > Website Stuff
Becca Rocha
Hey everybody...long time no "see"! Hope you are all well. Happy Valentines Day wub.gif


I got a question, and this is kinda long. Please help if you know how to do this! Has anyone out there mastered the Custom Header for Blogger? I was looking at Lacourphoto.net and saw where Mark (I think it was Mark) posted how to do a custom header for blogger. Here is what the post looked like:

Wednesday, January 31, 2007
Adding a Custom Header in Blogger
With the new version of Blogger, I found that it was difficult to insert a custom header image. I searched around on the internet, but didn't find a satisfactory explanation. So I managed to figure out how to do it and thought I would share these easy steps for those of you who might be curious how to do this yourselves.

Step 1) Create a custom header image for your blog. Use Photoshop to create an image that is 650 pixels wide by 79 pixels high and upload it to your webserver. Below is the one I made for LaCour:


Step 2) Log in to Blogger.com and click the "Manage: Layout" button


Step 3) Then click on the "Edit HTML" button


Step 4) Scroll through the HTML and find the section that looks like the following (which is about 1/4 of the way down):

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

Now add in the following url, width and height tags so that it looks like this:

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
background-image: url('http://www.lacourphoto.net/images/bloghead.jpg');
width:650px;
height:79px;
}

Be sure to add the appropriate url for your banner image and make sure that your width and height numbers are correct for your image. *Note: If you want to remove the border, simply change the border to 0 in the "#header-wrapper" section just above this section.

Step 5) Scroll through the HTML and find the section that looks like the following (which is about 1/2 of the way down):

<h1 class='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</h1>

Now make it look like this:

<h1 class='title'>
<!-- <b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if> -->
</h1>

Step 6) Click the 'Save Template Button' and your blog should now have a custom header.



I did everything exactly as they said but kept being told by blogger that you can't put the "--" in the comments part of the html (that is step 5). Does anyone know what to do?
Thanks for your time biggrin.gif
Diana Simpson
Can't help right now but I will see what I can find out.... dd
boldimagery
Becca,

There is another way that is a little easier for us less techy people. I am a geek, but I only know enough about HTML toget myself in trouble, or build very basic things.

1.) Create your file in photoshop. Then upload that to your web server
2.) If you are not using Blogger Beta switch
3.) Click Layout
4.) Click template
5.) Click page elements.
6.) Click EDIT on the header
7.) In the discreption drop your url it will look like this <img src="http://www.jasonconnel.com/images/bloggerheader.jpg"/>
8.) click done it is up.

I founf that technique to be the easiest. But I am sure there is some techy problem with doing that way, but it works. Check out my blog to see it... www.boldimagery.blogspot.com

If you need anymore help let me know. Just give me a call. Take care don't be a stranger!
Becca Rocha
Thanks so much guys! I'm gonna try that in 2 seconds. Jason, yours looks awesome. i wish mine looked that good.
boldimagery
QUOTE(Becca Rocha @ February 14 2007, 10:24 AM) [snapback]77509[/snapback]
Thanks so much guys! I'm gonna try that in 2 seconds. Jason, yours looks awesome. i wish mine looked that good.


Becca,

Thank you! You are too kind. I am sure your looks as good. I will be looking forward to seeing it!
Becca Rocha
ok...it didn't work. maybe it's just me. no one else seems to have any problems huh.gif smashpc.gif .

Soooo, i might have to call you Jason. I'll wait till later when i have more time...but do you have any suggestions as to what might be wrong? I did everything exactly as you said to.

Help!

QUOTE(Becca Rocha @ February 14 2007, 10:54 AM) [snapback]77541[/snapback]
ok...it didn't work. maybe it's just me. no one else seems to have any problems huh.gif smashpc.gif .

Soooo, i might have to call you Jason. I'll wait till later when i have more time...but do you have any suggestions as to what might be wrong? I did everything exactly as you said to.

Help!



WAIT! JUST KIDDING. I'M AN IDIOT. I MISSED THAT I HAD CAPATILIZED SOMETHING IN MY URL SO I TOOK CARE OF IT. I am much closer to getting it to work! Soooo, Nevermind Jason. Thanks!!!!
boldimagery
LOL!! Hurry up! I am waiting to see it! LOL!

If your still having problems send me the link to the photo and I will generate the code for you....

boldimagery@yahoo.com
lmkelley
http://laurakelleyphotography.blogspot.com/
I am having a problems. I think it should go down some. I think it is too close to the top. Please let me know how to fix this. Your information was very very helpful.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2009 Invision Power Services, Inc.