HOW CAN I DO THAT?

Followers

Tuesday, January 20, 2009

Adding a New Header Image

by Bonnie Calhoun

Man, oh man! I'm just full of posts lately! *snort-giggle* I've been helping a lot of friends get their blogs redesigned.

Well here is a problem I've noticed on several of my friends blogs. When they re-install their templates, they can no longer get their header images to show. Well I've come up with a work-around....LOL...and yes...you have to go play with your HTML!

I'll turn ya'll into template gurus yet!

This problem is especially prevalent on the Scribe template. When you switch templates the Header gadget should stay, but in the Scribe it doesn't...so go figure!

Here's how we're gonna fix it. We're going to delete the present Header element from the template and add a new one. LOL...I think the old one has a bad case of the ick! But first we have to allow the Header section to allow another gadget (You will notice that there is no "Add a Gadget" section on the Scribe Header.

Here's where we go play with HTML. Start at your Dashboard....go to the Layout tab...then click the Edit HTML link. We are going to scroll down to the highlighted section of code in the below image. If you can't read what it says, click on the image and it will open in a larger window.



What you are going to do is change the line where it says...showaddelement "no"...to "yes" This will allow the "add a Gadget to show up in the header section of your template. And you are going to remove the <b section that has your bad Header, so that that section looks like this when you are done.



Now you will click "Save Template". It will tell you that you are deleting a Widget, like in the below image. That's okay...click yes!



Now go to your Page Elements page...see the "Add a Gadget" in the Header section. Click it! Scroll all the way to the bottom of the list and pick Page Header.

When it opens, click for the image to show "instead of the title and description" Then either find your image on the internet at your storage site, or use the top link and upload it from your computer. Then click save! Viola! You have your header back!

Sig


49 Comments:

  1. KelsyC said...
    Thanks for this tutorial! It helped me out so much! I was going insane trying to add a header last night and it just WAS NOT working!
    THANKS!
    silver sol in Ghana said...
    Its looking great article with professionals information. Thanks.
    certifications said...
    Just few days ago I add a new headed image but this is not show properly. So I a was searching about this problem. Suddenly, I saw you site its tutorial is so interesting great and easy. Now solved my problem. Thank You So Much
    B. said...
    I'm totally new to this and trying to put a header on my new blog and it won't show up. Even your tutorial doesn't help me. :( Would you know what's going on?
    Bonnie S. Calhoun said...
    Tell me about the problem. Start from the beginning.

    How big is the image you are trying to use?

    What is the URL of your blog?
    B. said...
    Okay I'm literally just starting this blog. I'd like the header to go the whole way across the top of the page. It just seems to get stuck in the side bar.

    The url for the blog is: www.balicreations.blogspot.com

    And the url for the header is:

    http://img.photobucket.com/albums/v386/baligirl/banner-large.jpg

    Do you know why that is? Or do you want to get into my account and have a look?

    Thanks so much for helping! :)
    Bonnie S. Calhoun said...
    Hang on...let me go look!
    Bonnie S. Calhoun said...
    Your problem is that template does not allow a header image.

    You will need to pick a template that has a header box at the top like the Minima template.

    Have you been to The Cutest Little Blog On the Block for a blog skin?

    If you choose a Minima, where you can add your header, you could alsoget an awesome background over at Cutest, so that you didn't have a plain white blog.

    Go look at their free backgrounds. Their totally easy to install!
    B. said...
    Aww I can't have the cute dots? Okay then. I'll go have a look at your suggestions. Thanks so much for this. I'm used to Livejournal, so just getting used to Blogspot.
    Bonnie S. Calhoun said...
    LOL...after you see all they have over there you will think the dots are boring :-)
    B. said...
    Okay now I still can't get thelayout to look the same as it does on that cute site. All I can see is the brown border and none of the green.

    http://www.thecutestblogontheblock.com/free-backgrounds/item/476/asInline.html
    Bonnie S. Calhoun said...
    let me go look
    Bonnie S. Calhoun said...
    That is for a three column template...see the 3 column words at the top...see if they have that same one for a regular template.
    Bonnie S. Calhoun said...
    use this one:

    http://www.thecutestblogontheblock.com/free-backgrounds/item/203/asInline.html
    Bonnie S. Calhoun said...
    Did you see this one too:

    http://www.thecutestblogontheblock.com/free-backgrounds/item/364/asInline.html
    B. said...
    Woohoo it works! Yep I saw the other one but I thought it might be a little over the top if I'm going to be putting lots of photos of crafts I make on there.

    Now I'm still trying to get this banner thing worked out.

    Man, what would I do without you?! :)
    Bonnie S. Calhoun said...
    The banner should go right in now. You may need to shorten the height of the box or add the same background color as the banner to fill the box...or take off the border lines so that yo don't see them.
    B. said...
    The banner goes in but you're right it's a little short. I'm in the layout tab but there's nothing there about changing the color of the background header space or taking off the border lines.
    Bonnie S. Calhoun said...
    hang on let me look
    Bonnie S. Calhoun said...
    Okay...you've got two choices. We could add the green background...but on the right it would not match the stripes...or we could just take out the border lines.
    Bonnie S. Calhoun said...
    LOL...i'm turning in for the night but If you want to get rid of the borders, go to your Edit HTML tab, and scroll down in the code until you find:

    #header-wrapper

    below that it says border: 1px
    make it 0px

    then go down about 5 more lines and it says:

    #header

    Below that it says border: 1px

    Make that also 0px
    B. said...
    It's okay I'm gonna use a different header and that seems to work fine for now. :)

    I really appreciate all your help.

    Do you know how to add buttons for side bars? I need to add one for my madeit page and one for my etsy page.
    B. said...
    Okay, thanks so much for everything. You rock! :)
    Bonnie S. Calhoun said...
    If you have the code already just use a HTML/javascript gadget to insert the code.
    Bonnie S. Calhoun said...
    You're very welcome! Whenever you need help let me know!
    Bonnie S. Calhoun said...
    LOL...that header is very cute! and the butterflies match the green perfectly!

    Great job!
    Billy Dykes said...
    I cannot thank you enough for coming up with this post! That exact problem has been bugging me for ages but now it is fixed thanks to you, keep up the good work!

    Billy
    Leigh Anne Butler said...
    Thanks so much!! I had tried everything to fix this and nothing had worked until I found your tutorial. Thanks a million!!
    Janell said...
    Hi, I'm having this problem w/the minima template. I can delete the old header in the HTML code, but then my page element pages doesn't have a "Add a Gadget" option - the header section is just completely gone... thought???
    Bonnie S. Calhoun said...
    LOL...it's not a problem...you didn't read the part of the post where I tell you to change the showaddelement "no"...to "yes"
    Marianne Teoline said...
    Thank you sooo much for your help!!!!!! Finaly the header picture is gone!! :D
    Anonymous said...
    I don't know how old this tutorial is. I've had the same template the whole time and when I added a Cutest Blog on the Block background, my image disappeared. I tried deleting the words you told me to delete, but they aren't the same words that you're showing. So when I delete what I think is the right thing, it can't save it because I messed it up.
    Bonnie S. Calhoun said...
    To use Cutest backgrounds you must have either a two or three colum Minima template, which is a blogger basic template.

    The code I give would be in that template.

    Where is your blog?
    Anonymous said...
    I know I have the Minima template. And I've also got a CBOTB background. the URL is
    http://chatterbug12.blogspot.com
    Bonnie S. Calhoun said...
    Okay chatterbug, what part are you saying is not there? These examples that I show are using a Minima template
    Anonymous said...
    I tried to post the html that is in my profile to show you what I see that is different, but this thing won't let me post any html. I guess I'm just out of luck... it's hard to explain, but I have a lot more code above what you have highlighted, and a lot of different places say "showaddelement". I change them all and try to delete what I think is the old code, but it errors when I try and save it, since my wording is different than yours. It's hard to explain and I don't get it! I'm sorry this is confusing.
    Connie said...
    Where in the world would I find out where to change my font for my blog? I've tried to do something other than what blogger allows but haven't been successful so far. Thank you for any help.
    Connie
    Bonnie S. Calhoun said...
    If you are using a Blogger template, from your Dashboard choose Settings. The Fonts and Colors tab will be the second one after Page Elements.
    Outdoor Lighting said...
    Nice tutorial. I was really looking for such posts with professional information.
    Leah said...
    Hi there, I know this is an older post and I hope your still answering the comments on it. Im going out of my mind here, I got to the part where I could change the showaddelements to "yes", but Im lost after that. I tried to copy/paste the code into the comment but it is telling me that the HTML cannot be accepted. maybe I could email it?

    Obviously, I still need to do something because my image is still not showing up, but Im at a loss as to what I need to fix now. Any advice will be sincerely appreciated. Thank you
    Bonnie S. Calhoun said...
    Okay...you need to do one thing at a time. Change the showaddelements to yes. Save it.

    Then go to your layout page to see if there is a Add a gadget line in the header.

    Then come back and leave a comment.
    Leah said...
    Thanks for such a speedy response :) No, there is no add a gadget inside the header, its on top of it though..
    Bonnie S. Calhoun said...
    LOL...that's what I meant...it just didn't find it's way out of my fingers when I typed!

    Okay...first step right. Now go back to your Edit HTML and go back to that same area. Now you are going to remove the bad header so that you can put a new one in.

    Scroll down in my post till you see right below where you made it say yes....it will start with:

    <b:widget id='Header1'....and it will end with ...type='Header1">


    Take that piece out, and save. It will warn you that you are deleting a widget...that's what we want to do! Click confirm and save!

    Then go add your header again!
    Leah said...
    Finally! Fixed! Thank you :)
    Bonnie S. Calhoun said...
    Cool! My job here is done today :-)
    Jaime Leigh Hebert said...
    Thank you! You fixed my problem, too!
    ARTina said...
    Not to sound like a broken record, but thanks! You solved my problem. It took me so long to finally come up with a header that I was satisfied with, so for it not to show was a disappointment. EXCELLENT post!
    james said...
    The tutorial was so useful to me. The information explained was so clear and concise that I was feeling so pleased to read it.
    Keep posting more like this.
    Cathy Laine said...
    I'm so glad I found your post!!! :) thanks!

Post a Comment