Create a Custom Blog Header for Blogger
Hi everyone! I’m so excited to be here with you, sharing my tips and tricks on customizing blog themes. Since this is my first post on Handemadeology, I thought it’d be best to start from the top (literally!)- so we’ll learn how to create a custom blog header for your blogger blog.
As we all know, the header is the first thing you’ll probably notice when you visit a new blog. If you take your blogging seriously (or just want it to look great), you’ll want to have an attractive header to get your readers’ attention.
We’ll be transforming this:
Here’s what you’ll need:
- A Blogger blog
- A Photo-editing program (Photoshop, GIMP, etc)
- Stock photos or other graphics/ logos
Now let’s get started!
I do realize that most bloggers are using different templates. The first thing we need to find out is how wide your header is for your specific template.
1. Find the width of your current header.
Go to Design-> Edit HTML, and do a search for ‘#outer-wrapper’. You will see a width specification underneath. Your code should be something similar to this:
margin: 0 auto;
And there it is! Ok, so now that we know the width of our header (900px), let’s get creative!
2. Create a custom banner for your blog.
Open up your photo editing program of choice and create a new document 900px wide. The height can be any value.
Now you’ll grab all of those images we talked about, and create something fantastic!
If you are looking for images, there are many websites that offer free clip art or you can purchase them from sites such as iStockphoto.com. This is where the bulk of your time will be spent, and you’ll see that it’s easy to get carried away.
Once you’re happy with the header, save it!
(Note: If you want any part of your header to be transparent, you should save your file as a .gif or .png, and make sure ‘transparent’ is selected.)
3. Get ‘er installed.
Now that we have a shiny new header, let’s show it off to the world. Don’t worry, this is the easy part!
Go to Design-> Page elements-> Header -> Edit
Then you will navigate to the file on your computer that you just saved, and select “Instead of Title and Description”. Save and view your blog.
Nice, isn’t it?
If you’re eager to keep going, you can learn how to customize your sidebar titles, or add a custom favicon to your blog.
I’ll be back soon with more tips and tricks for customizing your blog.
(Theme shown- A Trickle of Meaning. Custom blog theme created by Viva la Violette)