PDA

View Full Version : Making a Custom Header for Your Blog



Peggy
07-14-2006, 09:25 PM
I retrieved this thread from the Google cache. I apologize if it looks like a bit of a muddle.


I need some advice from the *blogger* specialists on this forum. I would like to add my own head banner to my blog. I have seen several blogs that have their own banner in the title. But with my very limited knowledge of html and such I do not know how to go about it. I also have not found any help on ploger or seen anything in the template that let me do it. Any advice? Thank you for your time to respond.


Hey Huntwriter, I'm by no means an expert, but I do have a customized head banner on my blog . The first question is whether you have image manipulation software on your computer. If you don't, you might check out this list of free graphics software for Windows. I have a Mac, so I haven't tried any of them myself, but I'm sure others at AW could make a recommendation. Once you have your image software, you can use it to crop a photo or make a drawing or other design. The important thing to remember is that the width shouldn't be any wider than your blog. You can check this by going to your template and looking for the code that looks something like this :

#header {
width:800px;
background:#666;
margin:0 auto 10px;
padding: 0;
color:#666;
}

(note that it doesn't matter if all of those parameters are on separate lines or different lines. I've made them on different lines for easier reading)

The "width" is the width of the header in pixels. If it's set to 800px, make your header image that width. Make it any height that looks good (mine is 800 pixels by 200 pixels. (I'll go on to adding the image once you think you are set on making it)

Thank you Peggy. My wife is a graphic designer and so I have access to the requirements you set out. My problem is figuring out how plant the banner into the html of *blogger*. I visited your blog and like it a lot.

continued below...

Peggy
07-14-2006, 09:29 PM
That's excellent! Well just skip to the next step.
My problem is figuring out how plant the banner into the html of *blogger*. So, first off, you need to put the banner online somewhere. Either your own web site works, or www.photobucket.com .

Then you insert the link to the image into the blog style sheet:

- insertion possibility 1 puts the header in the background and the *blogger* title of your blog on top of it. The title is clickable and takes you back to the main page of the blog. That's how I have mine. To do this you insert it into the #header style

#header {
width:800px;
background:#666 url("http://www.website.com/image.jpg") no-repeat left top;
margin:0 auto 10px;
padding: 0; }

The "http://www.website.com/image.jpg" is the web location of your header image. Depending on what template you started with, other parts of the style might have to be adjusted.

- Alternatively, you can have the whole image clickable, like on Dawno's blog To do that, you need to scroll down through all of the style information to the section that begins . The default for your template probably looks like this:

<div id="header">

<h1 id="blog-title">
<ItemPage><a href="<$BlogURL$>"></ItemPage>
<$BlogTitle$>
<ItemPage></a></ItemPage>
</h1>
<p id="description"><$BlogDescription$></p>

</div>

That code puts the Blog Title and Description on top of the header -
whether there is an image there or not.

If you want a clickable image, ala Dawno, change the code to read:

<div id="header">
<a href="http://nameofyourblog.blogspot.com"><img src="http://www.website.com/image.jpg"></a>
</div>

"http://www.website.com/image.jpg" is the web location of your
image and "http://nameofyourblog.blogspot.com" is the URL of the main
page of your blog.

Again, you might have to change the other parts of the style sheet to
pretty it up, but the basic code above will work.

sassandgroove
07-14-2006, 09:32 PM
if you want a rather quick and good lesson on html so you can play with your template, I learned from www.davesite.com His lessons are easy to follow, simple and he has lots of fun stuff, like "are you addicted to caffeine? the quiz. Answer: Yes."

Peggy
07-14-2006, 09:32 PM
the last bit . . .

Peggy, you are a God sent. I did everything as you explained and while I was at it I also changed the template.

You can view the result of your advice here
<http://outdoorswithothmarvohringer.blogspot.com/>.

Onse again many thanks to you for helping me out.
That looks great!

I got some great help when I first started, so I'm happy to share what I
know.
Thanks a lot Peggy for this sollution. I know many of the bloggers have
similar problem and thanks to your generous help they will be able to
solve it. I checked your blog and I liked the design a lot.
I would have used Peggy's option 1 if I had known it I just ended up
with my header the way it was because I didn't know any other way!!

Thank you Peggy - do you mind if I copy your post to the Techies thread??

ETA: Otto, I agree, your header is wonderful! And your site is really
looking good.
Dawno - I guess with "Otto" you mean me. If so, thank you for your kind
comment.

I know this is not the place to put this.

Due to time restrictions I had to make a decision to let one blog go. I
chose to delete "Othmar Vohringer's Writings" which had quite a few
links to other AW bloggers on it. These links will be in the coming days
transferred to the blog "Outdoors with Othmar Vohringer
<http://outdoorswithothmarvohringer.blogspot.com/>"

All blogs that have a link to my deleted blog please update your link to
Outdoors with Othmar Vohringer the url is:

http://outdoorswithothmarvohringer.blogspot.com/

Thank you very much and sorry if you had complaints or other
inconveniences with a dead link to my former blog.
Quote:
Originally Posted by *Dawno*
Thank you Peggy - do you mind if I copy your post to the Techies thread??

Copy away!

Peggy
07-14-2006, 09:37 PM
if you want a rather quick and good lesson on html so you can play with your template, I learned from www.davesite.com (http://www.davesite.com) His lessons are easy to follow, simple and he has lots of fun stuff, like "are you addicted to caffeine? the quiz. Answer: Yes."Looks like a useful resource, thanks!

sassandgroove
07-14-2006, 09:40 PM
I found it so helpful, I was able to help my friend with the template on her blog. I tease her that she should list me as tech support. As if I were an expert. Ha.