November 6, 2008
If you want to make your Blog unique, you should make your own header image. For a start. It can be anything....a photo, graphic design, drawing, picture you like...
Keep in mind:
--> while creating and editing your picture, it's important that it has the same (smaller is ok) width as your header-wrapper of Blog. For example 660 px (for some Default Blogger templates)
--> you can choose a height of your pic, but don't go over 350 px (it will push your Post section down too far)
--> if you are using a stretch template (the one that stretches all over the screen, no matter what the resolution is), then it's a little bit different...
When you have a picture (banner, image) you like, next step is to "stick" it in header of Blog.
LET'S DO IT
Ok. Your picture is ready. You have it on your computer (there's no need to upload it to a free web host). Sign in to your Blogger account, then go to:
DASHBOARD --> LAYOUT --> PAGE ELEMENTS, and click on the Edit in HEADER Page element
The following Box will open:
Browse the picture from your computer, and then you'll have two options:
--> "Instead of title and description" - if you've made a picture (banner) that already has a title (or description) on it
--> "Behind the title and description" - if you want to use the title and description from blogger across (over) your picture (this is good because you can change text often)
Save Settings, and your picture is there....
Here's the example. I've made a picture for my header (it's silly, you'll do a better one...). This is made in Minima Blogger Template. After placing the picture, I've removed some of default borders around header and fixed some alignment error (only for Minima).
Watch this video if you are interested:
69 comments:
I know this is really easy but for some reason it wont let me do this. The image doesn't show up. There must be a bug. Any advice?
It should work....But, if for some reason it doesn't, you can place your picture in the header through HTML. Go to LAYOUT -- EDIT HTML, and find your "header" in the code (it should look like this):
#header-wrapper {
width:660px;
margin:0 auto;
background: url(URL OF YOUR PICTURE) bottom right no-repeat;
height: 300px;
}
...important is that you size the pic properly. In the example above, I want my picture to be as wide as a header (so I'll make it 660px too), and height of my pic is 300px (I need to add that line in the code, like above).
Host your picture on some free web host (Photobucket, Picasa) to get the URL, and and place it instead of CAPS in brackets...
If this is too much trouble, send me your blog address, so I can explain more correctly....
Smile!
Whenever I try this, I learn that "your image is corrupt or in an unrecognized format." What format does it need to be in? I want to put an excel spreadsheet on my header, and neither the excel document nor a word document (with the spreadsheet pasted onto it) is accepted.
..you can't do it like that. You need to have a picture format like:
.gif
.jpg
.jpeg
.png
Now, there are lots of different techniques about exporting documents (like word and excel) into pictures. But here's the easiest one:
- press "PrtScr" (PrintScreen) on keyboard (this will copy entire screen)
- open "Paint" (if you're Windows user), and click EDIT > PASTE
- click "Select" tool in the upper right corner of the toolbar and to draw a rectangle around the spreadsheet
- click Edit>Cut, then File>New and Edit>Paste
- File>Save As (name the file, and choose one of the picture format from above)
There's other ways too...But you'll have to size your pic properly, so it will fit nicely in your header...if you'll need more help, e-mail me. It's not a problem...
Smile!
if the photo you want to use isn't wide enough how do you stretch it to go across the whole header?
::sophstar's mama
You'll have to do that in some Graphic editor...Just re-size it.
Blogger won't do it for you....If you need help with re-sizing, send me a pic, I'll fix it for you. It's a minute of my time...
Smile!
Dear pocket,
Great tips... Thanks... When I tried to place a picture header, it is not showing my header title and description, though I selected the option "Behind title and description" option. Please help.
Hey there...
First, try clearing your browser's cache (how to clear cache).
Is your text color same as your banner color?
Did you change anything in the HTML of the template?
:]
where i upload image.
priosathi.blogspot.com
OK, so if I *am* using a stretch template, what do I do? I figured out how to upload my header, but since it doesn't scale to fit the window, the size I loaded comes up huge on my husband's computer, and the resized ones he sent me don't fill my header frame. Thanks!
Saille...
Unfortunately, it will never be perfect. Meaning, it will look different on every computer (that uses a different resolution). This is a negative side of stretch templates...Sorry...
I would suggest to make a compromise: picture with average width (about 800px), center it, and make your header background in color that will suit your pic...Aesthetically.
:]
hye pocket..
what software usually we use to create image..i mean create custom image on our own..can you gv me a list?..
There's dozens of graphic software around. My favorites:
► Photoshop, Illustrator
► Gimp (free)
► Corel Draw
Is there a way to get rid of the border around the header banner?
Hey Ina...
Yes, there is. Go to LAYOUT ► EDIT HTML ► and find the following:
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid #cccccc;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
margin: 5px;
border: 1px solid #cccccc;
text-align: center;
color:#666666;
}
..just change the 1px into 0px in these two lines:
border:1px solid #cccccc;
border: 1px solid #cccccc;
..your Header pic is awesome!
:]
thanks ^_^
I made my own banner and if i upload in header its still on the left upper corner. I tried change px but it is still same and it has blue frame around. Please help me. Thank u <3
be-rus-ka,
..it's hard to say. Template is quite customized, and I don't know what did you do, but you elements are not where the should be...
Have you consider changing the template, and customize it again?
Open a dummy Blog to test the design, and once you're satisfied, upload it to your original template...
:|
I have a custom header but it didn't have the code you mentioned earlier. So I cannot place the header in there. When I do place the header, it repeats. Is there a way to fix it?
#header{
float: left;
width: 928px;height:125px;
background-image:url(http://i40.tinypic.com/jhtwtf.png);
margin:0;
padding:0;
}
It just repeats my image. Is there a way to fix it?
Phat,
...change you code into this:
#header{
float: left;
width: 928px;height:125px;
background-image:url(http://i40.tinypic.com/jhtwtf.png) no-repeat;
margin:0;
padding:0;
}
:]
I already tried doing that. It still didn't work. Any other tips?
Phat,
I can see the pic there right now. You still ned assistance?
:|
hey when i upload the pic like the upper left has like a white border going across the top and down from the upper left of the pic!!! whats wrong? do you know?
whew nevermind it was an error i made lol thanks tho
Hi Pocket,
You're so kind about help, I have another question. How can I increase the amount of space between the header image and the top of the main wrapper and sidebar wrapper? I think it must be margins or padding, but I'm not finding the right combination? It's in Minima, and an example is here http://tdipt-bigbrowndog.blogspot.com/ I'd like to eliminate the black behind the header, but feel it needs a bit more space between the elements.
Thanks in advance!
Jan
I just realized I've asked about this incorrectly. There is a gadget below the header, and the space I'm looking to create is between the bottom of the gadget, and the top of the main wrapper and the sidebar wrapper. Sorry for the confusion.
Jan
Jan, I'm not sure is this going to answer your question, but here it is:
I suggest to add a top margin to your sidebar-wrapper and main-wrapper. If you already have a margin line in their style, adjust it, and if you don't, add it:
margin-top:15px;
...if this is not what you want, please, explain again...
:|
That's it, Pocket! I knew it had to be a margin issue, I just couldn't quite figure out where to put it.
Thanks so much, you are such a great resource, and I do appreciate it.
Jan
How do I align the header banner? Whether it's to the left or right. I want to put a 220px width banner in a 950px header and leave the Text Heading on the left where I have it now and move the banner to the right. I know it's seems a simple question considering I moved the text to the left but I have a brain freeze going on. Thank you.
Red Leaf,
..you'll have to attach the background picture through HTML. Not like it's done in this tut.
1. In LAYOUT ► EDIT HTML ► locate this line:
#header-wrapper {
2. Upload your banner to a free web host to get the Direct link
3. Add the background UNDER the line in your code, so it will look like this:
#header-wrapper {
background:url(PICTURE URL HERE) no-repeat top right;
height:200px;
...you'll have to replace the CAPS with the Direct link of your hosted picture..
...and set the height to fit your picture's real height..(200px is just an example)
Ok? And it's much easier when I can see a real Blog. I can't "guess" what code you have in the template...
:|
Hi,
I changed my template from 'conventional' Rounders with three columns. As a result, he picture that I had in my header disappeared. I have followed this line of posts and tried again but it has not worked. What is happening is this1
1. It all goes perfectly well till the stage of the screenshot that you have shown. But after saving, the picture dies not show, only the text does. If I go again into the 'edit header' link, the picture is still there! I understood that there must be a problem with the picture size. I resized the picture several times but it still does not work.
2. I tried to look into the 'edit html part as suggested by you. The code in my case does not have any reference to width at all! Am copying it here for you.
#header-wrapper {
background:#476 url("http://img237.imageshack.us/img237/5931/rounders4topcornerxv4.jpg") no-repeat left top;
margin:22px 0 0 0;
padding:8px 0 0 0;
color:$titleTextColor;
}
#header {
background:url("http://img237.imageshack.us/img237/4055/rounders4bottomcornerxt3.jpg") no-repeat left bottom;
padding:0 15px 8px;
}
#header h1 {
margin:0;
padding:10px 30px 5px;
line-height:1.2em;
font: $pageTitleFont;
}
I use GIMP for working with my pictures and am quite conversant with the same. So please let me know whether I need to correct my picture ot the html code. I have resized the pic to 240 x 112 pixels. I was presuming that would be enough.
Looking forward to your reply,
Regards.
Pushkaraj
I'm having the same problem as Pushkaraj. When I go to the Layout tab and upload my custom banner to my header, it shows that the picture is there, but when I actually go to my blog, there's nothing. I have a three column blog and am wondering if this is the problem (www.giddensfamily.blogspot.com). I've Googled "Uploading custom headers to Blogger" and everyone seems to tell me the same basic steps, but it is NOT working for me. I've even tinkered with the html code and still, no custom header. HELP!!
Pushkaraj,
...I really don't know what's going on, but you can upload your pic manually in HTML. Change your code into this:
#header-wrapper {
background: url(URL OF THE PIC HERE) no-repeat left top;
width:975px;
height:112px;
margin:22px 0 0 0;
padding:8px 0 0 0;
color:$titleTextColor;
}
#header {
padding:0 15px 8px;
}
#header h1 {
margin:0;
padding:10px 30px 5px;
line-height:1.2em;
font: $pageTitleFont;
}
..replace URL OF THE PICTURE with your hosted picture Direct Link (from Photobucket.com, or ImageShack.com....)
..change the height to fir your real pic height...
Will and Natalie,
..seems like you've got your banner working..
:]
Sorry to bother you, but it is still not working :-(
I have been trying to upload the image from Picasa web album in the `Edit header' option, instead of uploading it from my machine. I pasted the 'link to this photo' from the Picasa album, but it gives message 'Invlaid url'. I have never used either photobucket of imageshack, assuming that Picasa would work as well. Is that the problem?
Yup. That is a problem. And it seems like you have the problem with the header gadget.
Try the method I've wrote above. Create an account with photobucket.com, or imageshack, ...
..and make sure you copy the DIRECT LINK of the pic...
You've been a great help (and the comments as well), thank you!
I have tried to get my image to go across the whole wrap width and it never does. I have resized my image three times . . . even super huge and it still doesn't span the entire header. Argh. I am going insane. :)
So you may have already answered this question but I would like my banner to be accross the WHOLE screen, like yours. I am using minima and I know the default is 660...can I make that bigger? So my banner can be longer? Anytime I upload anything bigger than that it goes to the right. I would just like to center it. You can check my blog out and maybe see what I mean...
jeffandmelissamott.blogspot.com
Thank you so much..I finally was able to add my header thanks to your sight
I want to place a banner on top of the header/description, without getting rid of it. how do i do that?
If you had a minute to look at my blog that would be hugely appreciated. I'm new to all of this and am very confused. I found a free layout but the .txt file did not have html for me to past into the html edit on blogger. For some reason it just had basically a description of the layout. So I uploaded the individual parts of the layout and managed to add the header and footer to the template Rounders 3 since I didn't know what else to do. Ideally I would like all the background color to be gone and the header and footer to go all the way across the width of the page and then the post and widget boxes take up the rest of the space with no background. I have tried adjusting the widths of the outer wrapper and the header and neither seems to give me what I'm looking for. Am I on the totally wrong track?
Thank you so much!!!! I would think this is one of the simplest things, but for some reason blogger refused to show the picture. Thanks to the code you offered, I finally got it right.
Thanks!!!!!
I need to center the image that I put in my header. I can't figure out how to do it! I have already stretched the image in Photoshop, but it still isn't long enough. What should I do? Thanks!!!
i would like to have borders and lines around everything except the header how do i get rid of that but i want boarders around my post but not the header ?
It all worked for me but how do I get rid of the text?
<3 x
hey i want to put a pic from my own computer on my header,but it is not appearing.what to do
SO HELPFUL!! Thanks for all the tips!! :)
Great tutorials and I love the helpful attitude and a reminder to smile! :) Thanks for making my blogging adventure even more fun.
Hi,
I'm trying to put a header into my blog and if I choose 'instead of title and description' then it just disappears all together but I don't want the title to be there. What can I do about this?
HI,
WHERE CAN I TO FIND VERY NICE IMAGES AS YOU HEADER IMAGEN, SOO CUTE..!!! THANKS!
I need some help!
Here is my blog: http://highpointejhm.blogspot.com
I want to get rid of the title text, "High Pointe JHM" and replace it with this logo: http://garykhale.googlepages.com/hsm_logo_2.png
I can't do it through the Blogger dashboard for some reason because it doesn't give me the option to edit the header.
So, how do I do that through HTML? What code do I need? How do I align it so it goes right where the Title is meant to be.
I hope you're still around here. I'm having trouble getting my banner centered. Here is the address http://melyssasmagicalsweetshop.blogspot.com/ I know I just need to change the html in one of the borders, I just don't know which one.
I've got rid of the border, but I can't quite get the header image to line up perfectly with the post text on the left. Can someone point me to the code to change?
How can I make my picture fit "perfectly" inside the header border? My picture is too big.
hiiii dear pls help me immediatly
my template is minima black and i put a header but i cant see the header...
pls help me ...
hiiii dear pls help me immediatly
my template is minima black and i put a header but i cant see the header...
pls help me ...
this is the code
/* Header
-----------------------------------------------
*/
#header-wrapper {
width:880px;
margin:0 auto 10px;
background:url(http://picasaweb.google.com/9947775319sree/Surya#5416090694332286594)no-repeat left top;
border:0px solid $bordercolor;
}
#header {
margin: 5px;
border: 0px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
#header a {
color:$pagetitlecolor;
text-decoration:none;
}
#header a:hover {
color:$pagetitlecolor;
}
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}
hi I place the image like u said using edit HTML and it worked, but now I how do I make the header image link to home page?
using the edit HTML template window and not the customize section.
Thanks for the video. It finally worked for me :).
I want To ask something..
how to make the image more bigger??
helpp me!!!!
:)
thanks for the advice on removing the header border. It worked great.
Reference: www.bubblesmakehimsmile.com
I made a graphic and placed it in it, and have the draft template of blogger have a background for the header that has a width longer than the rest of my 'layout'
Where is the code to shrink it to be the same width as my page tabs and rest of the blog (so it's all aligned all pretty) hehe
Thanks!
i read your tutorial.i m new in blogging.pl help.i want full size image as header.but it either shrinks or goes out of page.
it work! thankss!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
How can I add a link menu bar to my header like the one you have on your blog?
I am trying to change my layout to this one http://btemplates.com/2009/blogger-template-drawing-time/#comment-22975 and when I download it and then import the html I get the error ... Your image is corrupt or is in an unrecognized format.
How can I get it to work? Thank you for your help in advance.
I forgot to mention that my blog is http://justforkidshunts.blogspot.com/
Do you like MBT shoes online MBT chapa buy it MBT chapa shoes with MBT lami free MBT lami shoes shipping MBT kaya over MBT kaya shoes us,we MBT M.Walk sell MBT m walk shoes on line mbt men shoes for mbt women shoes and vibram five fingers sale vibram five fingers sale is our discount vibram five fingers best cheap vibram five fingers choice cheap MBT chapa shoes thank cheap MBT lami to cheap MBT lami shoes see cheap MBT kaya it cheap MBT kaya shoes you can cheap MBT M.Walk go cheap MBT m walk shoes by cheap mbt men shoes click cheap mbt women shoes
Say it...