web analytics

How to make a blog header in Blogger

Pin on PinterestShare on FacebookTweet about this on TwitterShare on Google+Share on StumbleUpon

Hello my friends, finally another episode in my DIY blog design series. A lot of you said they had questions about how to make a blog banner and how to get it up on your blog the way you want it. {updated on May 1. 2012}

Today I will share with you:

  • Five things to consider about the design of your blog header
  • Resources on how to make a blog banner/ collage header
  • How to install a header in Blogger
  • How to center your header in Blogger

 

 

 

 

So todays topic is:

how to design and install blog headers

 

A good header or banner for your blog is very important. It’s like your business card for your blog, or your front door. It is the first thing people see, when they stumble unto your blog and it might be the one thing that determines whether they want to hang around or not.

That space on top of your blog is gold, and you should use it really well. It is the curb appeal that has to convince a casual passer-by that she is curious to see what’s inside.

So before you upload a new header to your blog, you should make sure that it is the best possible header for your blog. Here are five things I would want you to consider.

 

Five things to consider about your blog header

 

1. Let it be a reflection of you and what your blog is about

Dutch Sisters

I think this banner from Dutch Sisters is a beautiful example of ‘what you see is what you get’. Their banner fits their blog to a t.

 

That header should convey a clear message. This is my blog, this is who I am, and this is what this blog is about. There are about a million styles of blog headers out there. Choose the one YOU feel comfortable with. Don’t just follow a trend. If everyone is doing collage style picture banners, but you are more of a ‘one picture says it all’ kind of gal, than go with that.

 

 

2. Don’t automatically think the bigger the better


Heather Bullard


Style queen Heather Bullard shows this principal beautiful. Her header is quite small but has a lot of impact, and you can even see a part of a very intriguing first picture. I want to see more….

Don’t go too big. It might be tempting to make a really large header and put a lot of teasers and beautiful elements in it, but it might not work so well. You don’t want people to come and admire your blog banner, you want them to read your post. I am a strong fan of blog headers that allow me to see at least the title of the first post without having to scroll. Of course that only shows how important the title of a post is too, but that is a subject for a later date.

3. Do you want to change your banner often?

 

TheInspiredRoom


The Inspired Room does the changing of the seasons very elegantly, the basic banner stays the same and only some small decorative elements change (f.e. the little birdies and green bush in Spring)

 

It is popular to change your banner regularly and have it reflect the seasons (I try to do that for example). But before you decide to go that route please consider two things.
1 it might be more work than you realize. I for one have cursed my banner on more than one occasion when I was frantically trying to come up with a new one half January because I still had a Christmas theme going on. Once you have made yourself a typically Spring banner you know you will have to change it again in a few weeks.
2 people might not recognize you straight away. With all the nest/cottage/junk/beach/bungalow blog names around, I sometimes get confused about whose house I am visiting. While bloghopping it might be easy to forget which cottage I am currently seeing and who is feathering their nest here. A clearly recognizable blog banner makes it much easier to recognize where I am in a split second. Let’s face it, with the hundreds of blogs out there, there is no way we are going to remember all of those blog names. Having a visual reminder as well, really helps. So sometimes NOT changing your blog banner is the way to go (unless you are one of the really big ones, but then you wouldn’t be reading this anyway).

 

 

4. Use your absolute best pictures. No Flash!!!!

 

I found my home
I think these pictures from I found my home, prove my point very well. Great shots, matching color tones, nice details with enough context to make me want to see more.

 

Sometimes I come across blogs with really big and might I say bad pictures in the blog header. I think that that is such a shame. We all can’t really say it enough: flash kills your pictures. You might get away with an occasional flash picture in a post, but please, pretty please, if you use a picture in your banner, let it be a great picture! Don’t try to show us your whole house, but choose a detail that represents you. But don’t zoom in too much either, I want to be able to catch the atmosphere. So if you are going to use photographs it better be great photographs.
Oh and if you are using more than one photograph, make sure the the colors kind of ‘match’. I don’t mean necessarily all of the same colors but not one picture with a yellowish undertone and the other with a blue-ish one. Trust me it doesn’t look half as nice as it could look (most post processing programs allow you to match color tones).

 

5. If photographing isn’t your thing, graphics work wonderful too!


Homemakingjoyfully


I think this cartoon-like header from Homemaking Joyfully, is a very inviting way to show us what her blog is about.

 

There is no law that says you have to use pictures in your header. If you are not confident about the quality of your photographs, or your blog isn’t about showing photographs, using some graphic header works really well too. Again choose your own style, don’t let the masses influence you. Technically even a graphic header is a photograph too, but there were no pictures harmed in the making of a graphic header.

Think that that doesn’t work in our DIY/ Home/ Craft bloggers niche? Ha think again….

 

 

TheNester

You can’t get bigger than Nesting Place and not a picture in sight on her blog header. So if it is good enough for The Nester herself…….

 

 

How to make a blog banner

 

Now that you now what to do, go on and make a blog banner …..

The easiest way to make a header is by using a photo editing software like Picasa, Picmonkey, or Photoshop.

Make your title and (if you have it) your tagline part of that picture. Be creative with your colors and your fonts. But do remember that people should be able to read and recognize it in a split second. So don’t go too crazy.

 

StoriesofAtoZ


I think Beth form Home Stories A2Z really has a knack for making banners. Her logo is part of it, her tagline makes it clear in an instant what her blog is about, the great pictures reinforce that, she uses a couple of repeating colors both in the graphics as in the pictures, creative use of different fonts without overdoing it, and even with that ad banner there, I can still see what her first post is about.
Her banner is a clear representation of her brand. That’s how you do it people!

 

Using more than one font, really is a great way to make your banner and title look interesting. You can Google for free fonts. But I get mine from Kevin and Amanda, they have a wonderful creative font collection. But again be careful. Readability is more important than the fun factor, and I wouldn’t suggest using more than three different fonts on your entire blog, unless you are a real pro with this design stuff and know what your are doing.

 

Thirtyhandmadedays

Great way of different fonts and coordinating colors from 30 days

 

How to install a blog header in blogger

 

Okay let’s get on with it and install us a blog header. First things first, set the width of your blog. I’d suggest go for the maximum width that blogger’s editor allows. Just about all monitors can handle that comfortably and it allows you to post really big pictures.

On your dashboard click on DESIGN
Go to TEMPLATE DESIGNER
Go to ADJUST WIDTHS
Move the slider for ENTIRE BLOG to maximum
Choose how wide you want your sidebars to be and move the slider
click APPLY TO BLOG
Make a note of your choices in your Blog Design Log

Adjust Width Blogger

 

You can even go wider than this, but some people will have to use sliders to see your whole blog and it does require some HTML editing, so I’ll save that for a later date.

Now that you have your new header all ready you have to upload it to your blog. First make sure that it is the correct size. Using your photo editing software resize your picture. Resize it in pixels and as a maximum size it to your blog width. So the width of your picture must not be more than 1000 pix (if that is how wide you made your blog). Then upload the header picture:

On your dashboard click on DESIGN
Go to PAGE ELEMENTS
click on EDIT HEADER
UPLOAD picture from pc
click INSTEAD OF TITLE AND DESCRIPTION
click SAVE

Configure Header Blogger
If you choose to make a slightly smaller header (which often looks better) than you might want to center it above your main posting area and your sidebar(s). This requires a tiny amount of html editing. Don’t be scared it is real easy.

 

How to center your header on your blog

On your dashboard click on DESIGN
Go to TEMPLATE DESIGNER
Go to ADVANCED
Scroll down to ADD CSS
Copy and paste the following lines into the STYLE SHEET:

.Header {
text-align: center;
}

Click APPLY TO BLOG

Center Blog Header Blogger

 

The CSS style sheet is basically a place where you can put all kinds of notes about customizations you made to your blog that the blogger machine must know when it loads your blog. Often when you make personal changes to your blog design you put them in this style sheet, but not always….

This is important: if you have never done this before (and even if you have) make the changes inyour testblog first! That way you don’t mess up your blog.

Now your header should be nicely centered.

 

DIY Blog Design Blog screenshot 1

Other episodes in this DIY Blog Design series:

Five things to consider before you work on your blog design

How to change your background in Blogger

How to design a horizontal menu bar for your Blog

How to customize your sidebar in Blogger: adding sidebar title graphics

Why and how I moved from Blogger to WordPress

 

 

So did you learn something new? Was this helpful? Did I answer all of your questions? Let me know folks!!!

 

Further reading:

How to design a blog header by Musings of a Housewife
How to create a free blog header with Photoscape by the Etsy Blog Team
How to create a cute text based blog header by Dawn by Design

Pin on PinterestShare on FacebookTweet about this on TwitterShare on Google+Share on StumbleUpon

I'll love you so much if you share...

 

 

Love,

signature

 

If you liked this post, enter your email address to receive all my future posts in your email inbox:

Comments

  1. Hi Marianne! Wow, thanks so much for your generosity. This post was easy to understand and very informative. I need to change up my blog header etc and now I think I can actually accomplish it with this great tutorial.

  2. Abby's Paperie Garden says:

    One of the most helpful posts I've seen in a long, long time! It's evident you put a lot of work and time and it's really appreciated!

    Abby

  3. Susie (aka Three Boys Farm Mama) says:

    Thanks so much for posting this! I have been wanting to create a personalized header for months! Now i just need to find a few free hours…

    Susie

  4. dutch sisters says:

    Dank je voor deze tutorial. Wat een werk moet je hebben gehad om deze post samen te stellen! Hij is mooi, verzichtelijk en makkelijk te volgen. Bedankt Marianne dat onze header bij je voorbeelden is opgenomen.
    Groetjes, Corry en Heleen

  5. Pink Princess says:

    HEEL duidelijk, thanx :)

  6. Pink Princess says:

    Heb een nieuwe header, HEB de CSS voor center picture gedaan, HEB alles gedaan en gesaved. Ben heel tevreden met mn header maar….hij staat toch niet in het midden duh.

    Nou ja….ff verder ploeteren haha.

    Liefs van marian

  7. Carol@TheDesignPages says:

    wow, what an amazing post. That's very generous to share your knowledge.

  8. Tracie~MyPetiteMaison says:

    Thank you so much for this, Marianne!
    I actually skimmed through it very quickly but have been wanting to know without spending days upon days (more like weeks for me!) trying to figure it out. This is a wonderful thing for you to put out here for us all.

    I am coming back to take notes! Thanks again.

  9. Gloria Fox says:

    Thank you so much for this tutorial! I did it! Hop over and check it out. Any helpful criticism is appreciated.

    http://gloriaislivingonadime.blogspot.com

  10. Mind Movies Review says:

    Thanks for the wonderful and useful guide and tips! It's very helpful!

  11. Hey Marianne! I'm new to following your blog (found you on Gloria Fox's blog) and just wanted to say that I found this post to be so incredibly helpful!

    I just started a blog myself centering around various creative outlets and inspirations (http://adesiretoinspire.blogspot.com) and can't wait to spend some time this weekend working on a new blog header.

    Thanks again for providing such useful information. Looking forward to continuing to follow you! :)

  12. Vicki V @ blestnest.blogspot.com says:

    Great post! I didn't know how to adjust the width of my blog, and your instructions were perfect!

  13. Danielle says:

    So i was wondering if you could do a tutorial on how to do a cute break between posts. I see you have your pretty tree branches separating each post. I have the picture that I want, I just don't know where to put it.

  14. Danielle says:

    sorry, my e-mail is dkpetrella15@yahoo.com if it's easier to just e-mail it

  15. Martina says:

    Thank you for all of the helpful tips! My blog header looks so much better now.

  16. Fareed khan says:

    very very beautiful…header makes a blog attractive…

  17. Aimee Katherine says:

    This is so helpful! I'd been trying to figure out for ages on how to center my blog header. :)

  18. Thank you soooo much! Check out my new header at http://yolanda-imaginemakeshare.blogspot.com/

  19. Oh thank you, thank you, thank you! I have been wanting to do this for a long time, and thanks to you, I made one today! http://www.anartfulmom.com Very clear instructions! I am going to have so much fun with this!

  20. Thank you! Thank you! Thank you! That was so helpful :)

  21. This was extremely helpful, thank you.

  22. Love your tips and your blog too. Simple but so cute.

  23. Dag Marianne! Dank je voor je uitleg! Het heeft echt geholpen! Ik ben tevreden met mijn resultaat! Aleen twijfel ik nog een beetje voor de achtergrond. Ik ga je andere uitlegjes eens goed bestuderen!
    Alvast heeeeeeel erg bedankt voor je tip! Ik ben er heel blij mee! XXX

  24. Ok, So I’m TRYING very hard to follow the posting instructions, but my “blogger” account doesn’t look anything like the OLD blogger I used to have and under “Design” there is no “Page Elements option” and I cannot find an option to upload an image ANYWHERE?! I’m tearing my hair out trying to figure this out….grr. Please, please, can someone help me. I used to be so computer savvy, now I know how my mom feels…

  25. Ha! Found it…stupid new blogger look….haha it’s under “Layout” (seems pretty obvious huh?) but my page wasn’t completely loading, so once it did – BAM! – there it was. My first blog ever…can’t wait to get the layout right. :)

    • Marianne@Songbird says:

      LOL. I was about to send in the troops to help you out. But you figured it out yourself, good on you. I’ll hop over now to your blog and check out your new header.

      • My blog is still not as “snazzy” as I’d like, but it’s a work in progress. I’m super picky about things, so I’m trying to write everything and then proof it before I post it. The header turned out ok though. I was in love with it. But I’m fickle. I’ll probably be a “change with the seasons” kind of blogger. :) Thanks for your wonderful tutorial!!

  26. Thank you thank you thank you for this information! I just popped over to Clover Lane and followed her tut on making a new header for my blog. It took me a few hours to find my way around Picasa, but I’m loving it so far and my header turned out fabulous! Thank you!!!!!!

    xoxo laurie

  27. I’m so glad I stumbled upon this post on Pinterest, it inspired me to give my whole site a lick of paint, I started on the banner but one thing led to another. This is a great step by step guide and I shared it on my post about my blog overhaul

    http://nicedaydesigns.org/2013/03/spring-cleaning-my-website.html

  28. kelly dillon says:

    Wonderful tutorial, thank you so much. What I would like to know is
    where is a good place to find free images to use in the header?

    Audrina

    • Marianne@Songbird says:

      1. Take them yourself
      2. Buy them from a photosite
      3. Look on internet on sharing sites. But DO NOT steal them. Most pictures are copyrighted. But you can search on Flickr for example, for those that are without copyright (that have a creative commons status). Usually they do require a mention of origin though.

  29. Thank you – your tutorial helped me re-do my Etsy banner. Now my Etsy banner better matches my blog!

  30. Thank you for sharing your ideas, your blog has become an inspiration. The tutorials are very helpful.
    Thanks for thinking of us readers :)

  31. Thank you sooo much! I luv ti and it helped my blog oh so much!
    Check it out!

  32. Absolutely invaluable for someone like me!

    Just started my own blog and now my header looks brilliant! (If I do say so myself)

    Thanks so much!

    Love, Elise x

  33. Amy Comstock says:

    Is anyone else having problems centering it? Because I didn’t make it the right size, so to look nice it’s gonna have to be centered. Please help!

    Or, if you know how I can resize it, that’d be nice too. :)))

    Thankss!!!

    ~Amy <3 :)

  34. What a great post! This is exactly what i needed to fix up my header…will definitely be working on this later.

  35. Marianne – As a brand new blogger I have been overwhelmed with trying to figure things out on my own. This article was a godsend! Thank you, thank you, thank you. I will now get to work on getting taking some excellent pictures that represent who I am. Blessings to you.

  36. Thanks for a great tutorial! I’m setting up a new header for my new blog this weekend, this is really helpful.

    BTW – you might want to reread point 4. Because whilst I want to trust you, I’m not sure that I want to thrust you :)

  37. Oh my goodness . . . this is what I have been searching for for about 2 hours! Thank you so much for explaining it in plain English! God bless you!! =)

  38. How did you/or could you make that blog header that had no pictures in it and only had that one ‘stamp’ that had the blog’s name on it and then that brown tag line beside it?

  39. Thank you so much for providing all this useful information. I am an artist and wanted to design my blog to reflect my art work. I now have a better understanding of how to do it. Now to get painting and upload some pictures!

  40. best blog post ever! Thanks! YOU are a STAR!

  41. Hi,
    Thank you very much for your tutorials, I so much appreciate when people like yourself is kind enough to share there knowlege with others, so again thank you.
    I do have a question though, how do I save my blogger banner PNG or JPG ?? I am using Gimp to create my banner.

  42. Thank you sooooooooooooooooooooooo much for this!!!!!!!! It is the most helpful tutorial I have read! I just started blogging and wanted to make my blog look more original, but I didn’t know how. I searched google over and over again and helpful tutorials, but didn’t find anything helpful. Finally I found your blog, and it was clear and helpful. I still don’t quite get how to make my blog header in the middle, but for now I’m fine with how it is. Check out how much better it looks thanks to you: theblissofsimple.blogspot.com
    THANK YOU!!! :D

  43. I love it when I google a random thing and stumble upon a friend! So, now I’m going to follow this tutorial and make a new banner for my blog!

    • Marianne@Songbird says:

      I love it when a friend stumbles on my blog and finds something helpful! Good luck with your new banner, let me know when I can come over and have a look.

  44. Hi Marianne! Just wanted to say thank you for the tutorial! I’m planning on changing the design of my blog and the information you shared is really helpful. I’ve been blogging for awhile but only sporadically, but I’m hoping to change that. Now I’m collecting information and want to try out new things. Learning by doing!
    I’m so thankful that there are creative people like you out in blogland that are willing to share this stuff. Thanks again and happy advent season!
    Siggie

  45. Hi where can i make a banner with graphics and clip art pictures.

  46. This was so helpful! Thank you for taking the time and care to write such a thorough tutorial.

  47. This was extremely helpful. I had a banner made and uploaded in less than half an hour. Thanks so much!

Speak Your Mind

*