Lani from The Wooden Porch is guest blogging for me today and explaining how to put your own banner on a Blogger blog. Let’s give her a hearty welcome and leave lots of comments!
Here’s a step-by-step guide with pictures to show you how easy it is to upload your own banner into your Blogger blog and make sure that it’s positioned well and looks just as you want it without the Blogger lines around your new banner. It’s easy. I promise. I’m going to hold your hand through it all. Seriously, my grandchildren’s kids’ great-grandma can do it, and she’s a bit of a slow learner.
First, the header looked like this:
On my computer, I made a header that I wanted to insert instead of the regular option Blogger give me.
To begin the upload, I went to "Dashboard" and clicked on "Layout":
"Page Elements" should be automatically open:
You now want to click on the "edit" option on the header portion:
A new screen will open up. You want to do three things:
- Upload your new header from your computer.
- Choose "Instead of title and description".
- Choose "Shrink to fit" (this resizes your header so it will fit your blog if your header ends up being too big).
A small version of your header will appear. Click "save".
By now you may be excited because you finally have your header up on your blog! However, it probably looks something like this:
Double lines are all around the header.
If you like the look, great. I don’t. I want to get rid of them. To do so, choose "Edit HTML" under the "Layout" tab.
Before you do anything else, BACK UP YOUR TEMPLATE! (Which means highlight and copy the whole HTML code and paste it into Word.) I can tell you about a popular blog designer who accidentally messed things up quite a bit for herself once when she forgot to save her template. She even knew what the heck all the HTML stuff actually meant, so that should just go to say that the rest of us need to be extra careful before we go messing around with the template.
Scroll through the HTML code. Look for the word "header". (Here’s a quick tip for MAC users: Click on your "apple" button + F, then type in "header" in the box that opens on your screen. You’ll find it faster that way. For PC users: use ctrl+F, then type "header" in the box that opens.)
Delete the lines that refer to the border.
Now it looks like this:
Now, click "preview".
Look! No lines!
Now save your template and you are done. Enjoy!
Related posts:
- Facebook Video Feature: Create or Upload Video to Your Community Facebook is a great way to share information with your...
Related posts brought to you by Yet Another Related Posts Plugin.
WordPress Admin
{ 15 comments… read them below or add one }
Thanks for the advice. HTML freaks me out!
Thanks for this heads up. I have been trying to do this for the last few days, but now I think I understand what I was doing wrong!
can u upload a header in basic templates in typepad or do I need to upgrade?
thanks
Sharon, I’m not sure. I’m sorry! I only know how to do things in blogger. Melanie probably knows the answer though!
What are popular programs for creating headers? We don’t have a graphics or photoshop program and need to get one (for Mac). Any favorites that aren’t super expensive? Thanks!
Kirstin, check out this post:
http://www.bloggingbasics101.com/101/2008/02/is-there-any-fr/
Melanie wrote about that awhile back ago. I haven’t tried any of the links she provides because I have Adobe InDesign that I use… it’s an $800 program though.
YAY! I’ve been wanting to do something new.
Are there dimensions (specifically width I guess) that I should work with when designing my header?
Yay! You rock. Not only was ImageWell easy to use, but now I have a lovely header with no borders! Yahoo! Regarding Robin’s post, another blog I read suggested a width of 645 and that seemed to work really well. Height is up to you–somewhere around 200?
I should have asked you in the first place… that thing has bugged me for SO long! THANK YOU!!!!!!!
Thanks. Worked like a charm.
Bloody Brilliant!!
How do I do this if I am using classic blogger also how do I make it clickable so that it returns to the homepage say if someone clicks into the archives
it would be great, but when i uploaded my banner from my computer, it said it was “corrupt, or in an unrecognized format”. do you know what this means?
Alyssa,
What was the graphic file saved as: .jpg, .gif, .png, or something else? Jpg and gif are the most common ways of saving graphics and are supported on all blog platforms. Png is becoming more mainstream and may or may not be accepted on your platform (you can do a quick search in their Help files to see what that platform supports).
You can try saving the graphic with a different extension (e.g., .jpg or .gif) and then try re-uploading it to see if that solves your problem.
Thank you so much for this! It really helped me out! I knew how to put a banner on my page already but I had no idea how to get rid of the border lines! So thanks, you rock!