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!