You can see that my blog’s header is not like the default BLOGGER header, however I am not so creative, but at least I can change it. You may be having problem by doing it the normal way, logging to BLOGGER account<Edit Header<Upload image and so on. And now I tell you how I did it correctly[...]
1)Firstly you need to have a header banner image for your blog. You can find some banners at Bittbox. Or you can have any header background image from your computer or from internet.
2)First login to your blogger account and then open HTML editor. Now under
<head> and </head>
section find a line similar to this line:
#header{ float: left; width: 928px;height:125px; background-image:url(http://DEFAULT-IMAGE-URL); margin:0; padding:0;}
3)Now, in this line you can see the width and height of the default header image and the URL of the image. The width and height here are 928 and 125 respectively. But in your case it may be different. So consider that height and width and not the height and width shown here.
4)Note this width and height. Now open your image editor and edit and resize your(downloaded or from your computer) image accordingly. You can also add some text or any other image on your main image.
NOTE: You can edit any of your images by a software like GIMP or Photoshop or any other.
5) Save this image as .jpg, gif, or whatever.
6) Now open “Edit Page Element” of blogger account. And open “edit Header” and then upload your image. If the image is not of correct size then you can tick the option to resize image and BLOGGER will automaticaly do that. and then save it.
7) Alternatively, if you are having problem with the step#4. Then do this:
(a) Upload your image to an image hosting website. I used Photobucket. Make sure your image is of the correct size as we noticed in step#1.
(b) Now open your HTML editor in BLOGGER account. And in the same line that we noticed in step#1 replace the URL of the image given by your image hosting site with the default image URL.
Incase you want to hide your header do this:
First download your template(incase any error happens).
Now expand your template to find a line similar to this and insert a line where indicated:
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: normal normal 200% Arial, Serif;
(Here insert: display:none; )
}
3 Comments Received
May 18th, 2008 @10:58 am
very usefull tricks. thx! will do it after 5min nap. hehe!
July 29th, 2009 @4:18 pm
Great idea, but will this work over the long run?
Pingback & Trackback
Leave A Reply