This is our Blogger FAQ and Help guide on the questions and issues that are commonly raised by Bloggers as well as the readers of our Blog at Tips for New Bloggers. Here, we shall elaborate on the finer details of the customization tips for your Blog template, give further examples, and answer specific queries. For detailed write-ups and discussions on the topics, please refer to the articles in our main Blog. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change.
Blogger FAQ and Help

Header
  • Insert an image to the left of Blog Title and Description [read]
  • Add a Horizontal Navigation Bar in Header Image [read]
  • Unable to remove Header Image [read]

Blog Posts
  • Arrange, customize and shift the Blog Posts and Footer elements [read]
  • Insert a picture or image beside the Blog Post Title [read]
  • How to have standard or pre-formatted text in Blog Posts [read]
  • Add Highlighting to Text and Background Color in Text Box [read]
  • Change Blogger Post URL - SEO Tip [read]
  • Change the Post a Comment Link [read]
  • Add scrollbars to text within Blog Posts [read]

Sidebar
  • Add Background color and image to Sidebar Titles [read]
  • Have different Background colors for each widget [read]
  • Style and Position Sidebar Images [read]

Footer
  • How to align Blog Post Footer elements to the left [read]
  • Move Comments Label to below Post Title [read]

Links and Labels
  • How to add Hover, Mouseover and Rollover effects for links [read]
  • Remove automatic number count in Labels widget [read]
  • Remove link underlines in Blog Posts and/or sidebar [read]
  • Be notified by Blogger when there is a Backlink [read]
  • Change and Edit Labels in Multiple Posts [read]

General
  • How to change Background Colour of TicTac Template [read]
  • How to remove the Pencil or Screwdriver and Wrench icons [read]
  • How to add animated graphics in Blogger Post and Sidebar [read]
  • Add Text Box or HTML textarea code in Blogs [read]
  • Know the limits on our Blogger account [read]
  • How to take Screenshots or Screen captures [read]
  • How to change and transfer Blog ownership [read]
  • Change font size and font styles in template [read]
  • How to center align Page Elements [read]
  • How to insert a separator line between each comment [read]

Search Tricks for New Bloggers

banner
We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Sep 28, 2007

Digg This Story

Unable to Remove Header Image

A reader brought up an unusual problem. After uploading an image into the Header, the reader was unable to remove the Header image. We do not know the reason why the image cannot be removed. This uploading of Header image is a Blogger feature and not a blog hack. The solution as we shall explain is to remove the Header and reinstate a new Header.

Uploading Header Image

For those who have yet to put images into their Headers, read this how-to guide on Adding a Background Image into the Blogger Header. This Blogger feature allows you to have the image as a backdrop to the Title and Description, or as a replacement to both the Title and Description. If you choose the latter, only the image will be seen and the Title and Description are hidden from view.

Removing Header Image

To remove or substitute the image, all you need to do is to go back to the Header page element via Template -> Page Elements and click the “Edit” link at the bottom right corner. Remove the picture and save.

If, for whatever reason the image cannot be removed, a solution is to remove the Header altogether. As per our article Add Page Element to Blogger Header, go to Template -> Edit HTML and scroll to these lines:-

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='(Header)' type='Header'/>
</b:section>
</div>


Change them to these and save the template:-

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='(Header)' type='Header'/>
</b:section>
</div>


Go to Template -> Page Elements and you should now see the option to Add a Page Element in the Header and be able to remove the Header. Click the “Edit” link in the Header, select “Remove Page Element”. The Header together with the image will disappear.

Next, reinstate the Header by clicking “Add a Page Element” at the Header area. Near the bottom of the list is the “Page Header” element. (You are entitled to have one Page Header. The previous Header has to be removed before you can add a new one.) Enter the Title and Description and upload your new picture if you'd like. Save when done. You should see a new Header and/or Header image.

© Tricks for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

14 comments:

Jessica said...

I cannot get the header image to work in the Denim template - at all. I am not at all new to blogging or blogger, and I have image headings in several of my blogs, but it simply will not work in Denim. Has anyone mentioned this? Is there some funky code in the denim template that is preventing it from working? Any help or direction would be great. Thanks!

bizwhiz said...

Hi Jessica

Did you upload the image using the method in Background Image for Blogger Header (New)? For our article in Align Header Image, we were able to upload a header image into the Denim template and move it about. Perhaps take a look at these articles and see if the codes highlighted are found in your template.

Lori said...

I'm using Snapshot Madder, and there is no "Remove Page Element" button on the Header widget.

Is there another way to replace the default photo with one of my choosing? Preferably one that does not include major HTML code changes (I've already gone from 2 to 3 column, and it's quite messy, I'm afraid)?

Perseus said...

Hi bizwhiz,

I was wondering if you would be kind to help me? I use the blogger tictac blue template and was successful replacing the old header image by editing the #header-wrapper code and inserting my own image.

The new image is exactly the same as the old one 847X240, but it comes too wide. I want it to match the width of the body like the old tictac blue image did. What am I doing wrong? Thanks!!

http://biz-think.blogspot.com

bizwhiz said...

Hi Lori

You may follow the guide at Add Page Element to Blogger Header to have the page element function.

We haven't had a Snapshot blog. You can right click on the image to view the Image URL. Then go to Template -> Edit HTML to locate that image. Replace it with another image if you'd like. Upload the new image onto an image server and replace the image URL.

bizwhiz said...

Hi Perseus

If you look at the original image again (http://www.blogblog.com/tictac_blue/top_div_blue.gif), you would notice that there are two little lines at the top extending out of the image, as well as the gray margins on the left and right. These are part of the header image and together add up to 847px in width.

To have an image that fits the template, save this image and edit it. Retain the gray margins and replace only the blue picture with something else. Upload this edited image and replace the header image link.

Lori said...

BizWhiz -- I DID it!! Thanks for all your help and expertise!

http://weebleswobblog.blogspot.com

Perseus said...

Hi bizwhiz,

Thanks for your fast response. I am learning fast but it takes time to know all the nuances that go with xhtml. By the way you tutorials are awesome and well written.

I followed you instructions, and copied the old GIF image and modified the content leaving the dimension the same (847X240). However, the image still spills over on both sides? Any tips? Thanks!

bizwhiz said...

Hi Perseus

The original header image has a transparent background whereas yours is white. If you view both pictures in image softwares like Photoshop, you will see the difference. What you can do then is to color the white portion to the left and right of your image to the gray background color which has a color code #e0e0e0.

Perseus said...

Hi bizwhiz,

Thanks for the tips. I did it! If you are not a teacher, you certainly have the talent... I will be reading your tips from now on. Again, thanks a million!!!

~Cookie Jar. said...

Your explanations are SO simple. They are wonderful.
I just wanted to remove the header and so i folled the steps and voilá. The thing is, the posts and side bars are now where the header should be, but what i trully wanted was the header space free.
Could you give me a hand please?

Robin Link said...

Hey, thanks for all your great tips, I have really taken onto this site.

I need help with my header. I created it in photoshop and uploaded it and placed it but the boarder behind still shows. I don't know how to remove the light brown behind my new header. I have read this site and can not find an answer.

Thanks for your help.
Robin Link
the site is whatsuplinkfamily

ISEB+ISTQB Certification in India said...

I am here to seek help. on the header / tiltle of the blog page tags are overlapping and it has ruined the header title look due to overlapping. Here is my blog http://prince2itilmsp.blog.co.in , also you can email me: samir.bale@gmail.com. Lookforwad to early breakthrough / response. Take care

fon said...

you are amazing!=) i really like your site and thank you so much for helping with all these codes and stuff..God bless!!