Sunday , 24 September 2017
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.

Create a Custom Blog Header for Blogger

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:

into this:
Here’s what you’ll need:

  1. A Blogger blog
  2. A Photo-editing program (Photoshop, GIMP, etc)
  3. 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:
#outer-wrapper {
margin: 0 auto;
width: 900px;
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

Related Posts Plugin for WordPress, Blogger...

9 comments

  1. I’ve just read a few books from the library. I’m the type who reads everything, becomes very knowledgeable, but doesn’t actually do it. This article puts everything together so easily that I feel some motivation coming on! Thanks!

  2. Wonderful !!! Looking forward to learning more. This was so helpful and clear !! Thank you

  3. Nice post Great Ideas! I look forward to trying this out!

  4. Thanks a lot for your great advice!

  5. Thanks for posting. keep posting,

  6. Great tutorial! That really helped me create new blog headers. I created a blog about this, would you care to check it out? It’s here: http://www.coolblogheaders.com

  7. I’ve created a new header that I want to apply to my blog, but I can’t figure out how to get it to apply. I’ve searched for the “Design” that you mention in your post but can’t find. Any help would be appreciated. Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>