There are many ways.
The easy way is -
Select template with Header Image, such as Harbor. Then go to Dashboard and select Template tab and click on Edit Html. Then click on small selection box Expand Widget Templates to select it.
An editable box will open where you can edit your Blog template. Go to Page Structure section and delete Image URL of section Wrap 2 and Wrap 3. Further, change the Image URL of section Wrap 4 to your own. Save template. Your image will appear on your Blog's header.
Another easy way, but involves a few more step:
This method works in all new blogger templates. (if you have selected template with image header, then you must remove the images through above method by editing blog template, else your image will collide with default image.) This method also involves editing blog template's HTML. Go to the lowest portion of your blog template's HTML and hunt for this piece of code:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
Change this to:
<b:section class='header' id='header' maxwidgets='4' showaddelement='yes'>
And save your template.
If you do not find showaddelement='no' in some templates, then add this beside maxwidgets='1' and save the template after modification as stated above.
Finally, go to template Layout. Now you will find Add Page Element for Header. Click this and choose Add Picture. Give either picture's URL or browse for the picture in your computer, point to the picture, click save and you are done!
(Warning : Before attempting any of this, please save your template first so that you can revert back the changes any time. Further, create a test blog, attempt these settings there, and when fully satisfied with the results, then only make changes in your Blog template)
Tag blogger,header,image,change
del.icio.us
Digg this
22 comments:
Awesome post! Came in very handy on my blog.
@ the it guy,
I feel happy that you find this post useful.
Thanks a bunch for this post! Your technique works really well, and your instructions were much more straightforward than those I found on Blogger's official help pages.
Excellent. Is there a way of removing the text from the header? I only want an image present (which I now have) but it says the 'text' part is required. Any way of removing this from the HTML code?
Thanks
@ Amy,
Thanks. :)
@anonymous,
Yes, it can be done. There are two simple ways-
Blend your header text with the same color of header background color. The other method is define text size of header to 10%. it will then be invisible.
I am looking on it and will post a more practical solution.
This was SUPER helpful in tweaking my new blogger page! One issue I'm having is centering my image header, I've tried tweaking different padding, etc, but nothing seems to budge that darn image.
here is my site:
http://courtesycommon.blogspot.com
Any ideas?
Thanks!
@Ashe,
Your image is left aligned!
I presume you added images through Blogger Add page element method.
Did you tried to check resize picture to fit page? if not try this (edit this page element, and you will find the check box). You may then need to stretch your image a bit.
thanks mr. ravi, it worked great! but i have a tiny white stripe above the picture that i added. how can i get rid of that? also, what's an easy way to make the image i added be a link to my main page, as the blogger template originally had with the title of my blog?
btw, my mom's family lives in ratlam, and i enjoy visiting. :)
Really useful post on how to add a header image. If you want to remove the header text permanently just delete the following line in the template code:
"b:widget id='Header1' locked='true' title='Title (Header)' type='Header'"
Hope this helps.
Josh,
but it is always a better idea if you change 'true' to 'false' in the said line, delete header text through add-remove page element.
Wow, I tried like 7 different times to change "true" to "false" in that line of text, in order to get rid of the header; it would not work! the only time my header went away was when I deleted it, like Josh said, so thanks Josh, I needed the help!
Hi Ravi,
I tried with the solution you gave here. My blog html dint have ShowAddElement, hence dint change the max widgets and added the showadd--code. Now, I get an Add page element in my blog control page, but I tried with tiny images to big ones...nothing works out...t error just says,"error while processing yout image"..i tried to put images from the web, for testing purpose..and it uploads the image to t form, and during saving..it says "please check the errors in the form" whereas there are no errors in t form...what should i do? what is t banner image max-size? I want to put a banner to my blog, and change the setting to 3 column. what should i do?
Yunus,
you indeed have nice, mouthwatering blog! congrats!
Do you clicked the selection box Expand Widget Templates?
further, carefully read this line which also appear in this blog post:
If you do not find showaddelement='no' in some templates, then add this beside maxwidgets='1' and save the template after modification as stated above.
Hope, this will solve your problem.
Ravi,
Thanks for the compliments...
I have succeeded in putting the header image in my test blog. Thanks for t info. I need ur help once again. U know, I am not techie :)..I have a tab design by css tab designer v 2.0, and i want to put that horizontal menu below my header...also how to incorporate the posts according to the horizontal menu? is it like we shud label every post differently and put it there? pls explain in simple terms...and as usual...code too :))
Hi all,
Could anyone help me.
On my blog I put on an image header:
http://theyeatcoal.blogspot.com/
But it's coming out at an odd size.
The original was designed to pit it:
http://a789.ac-images.myspacecdn.com/images01/54/l_cdf25d7456a05306ce951e3c1c457604.gif
Anyone know where I'm going wrong?
Thanks very much.
hey how do I remove the frame that is around the header pic?
Thank you Mr Ravi clear and worked first time
Enys - change the border pixels from 1 to 0
Thanks all... good guide!
Thanks a lot!I just used it to change my header.
Omg thank you so much I was having so much trouble with it. Thank you.
My template has a header.I want to remove header and place image in place of it.Header coding is in template.
writer.mp9
Post a Comment