Basic Blog Designing–Headers


Untitled-2 copycrop

In my last blog design post I covered creating a test blog, picking a template, and getting a background for your blog.  If you missed my first post on basic blog design, please check it out here

I know I said I’d cover headers, social media buttons, and other details in this post, but as I sat down to write it I realized how long this post would actually be if I covered all that today - way too long (kind of like the last blog design post).  So in an effort to make these posts a bit more manageable, I decided to split them up into bite-size chunks.  I’ll save social media buttons and other details for a separate post (or possibly two separate posts), and today I’ll just cover headers.  Let me know if you are working on a redesign and just can’t wait, and I’ll give you a sneak peek at the other topics.


Blog headers are basically just images that you put at the head of your blog.

How you go about making a header for your blog depends a lot on what kind of header you have in mind.  Do you want a scrapbook-type header?  One that includes pictures?  Something simple?

If you are looking to create a header that has a scrapbook-type style, or one that includes pictures, using a scrapbook software is probably the easiest way to go.  However, all the same copyright rules for graphics that I talked about last time still apply.  Again, I recommend using My Memories scrapbooking software for any blog elements, because as long as you give credit to the designer somewhere on your page you can use any of their stickers/backgrounds for blog design.

If you are just going to go with simple text (like my current header), any photo editing program or website will do.

The actual creating of the header is hard for me to explain in basic steps, because this is where you should take some creative license and make something that you really like!  So instead of a step-by-step for creating a header image, I’ll just give you a few tips.

Tip #1 

If you want it to appear like the text or images that you come up with for a header are actually embedded in the page of your blog, there is only one thing you really need to do, and that is make sure that the color of the background for your header is the same as the color of the background of your blog. 

For my blog, the background is just plain white, so when I was placing the text on my header image, I just made sure the background was white as well – this way it looks like the text is a part of the page, as opposed to the header being a colored box with words on it.  This applies to scrapbook style headers too – if you want it to appear like the graphics are embedded in your page, make sure (1) that none of the stickers you use touch the edge of your image, because they will just look cut off when you upload them, and (2) make sure the background behind the scrapbook stickers is the same color as your blog.

If you are using a photo-editing website like PicMonkey, just upload a random picture and place a big ‘ole rectangular sticker over the whole image.  That will give you a blank canvas to work with.  Just makes sure the background sticker is the same color as your blog background in this instance.

It’s easy to match pure white, but if you have a colored background to your blog, you’ll need to find the color code so you can make sure they are both the same.  More on that in the post on “other details” (coming soon).

Tip #2 

It’s usually a good idea to make your header image shorter in height so that when your page loads on someone’s computer they can see more than just the header image.  I like people to be able to see at least the title of the current post without having to scroll down, so I crop my header images to be short enough to allow for that.

For example, this . . .


. . . invites readers to scroll down and read on. More so than this . . .



Tip #3 

If you want the pictures and words in your header to look really crisp, make sure that the width of the file is bigger than the width of your blog (in pixels) before you upload it.  If it’s smaller than the width of your blog one of two things will happen.  Either Blogger will automatically enlarge it when you upload it, and it will look a bit blurry, or (if you uncheck the “resize” box before you upload your image) your image will not be centered on your blog.  So unless you want it off-centered, size it exactly how you want it to be, or to let Blogger resize your image smaller.  It’s better to start off big when it comes to header images.

So to upload your header image, go to the design tab on your blog, and then click to edit the header gadget:


This is the box that will come up when you click to edit your header:



  I always put the title and blog description in my actual header image, because then I can control where the text is placed – so since I already have the text I want in the image, I’m selecting to use my header image instead of the title and description.  Make sure your blog title and description are still written in the appropriate boxes though, because it will help you with search engines.

  I also am letting Blogger shrink my image to fit for this blog design, but if you don’t want Blogger to shrink your image for whatever reason you can uncheck that box before you upload your image.

Tip #4

If you feel like the main text/graphics of your header are not centered on your blog, and you have the width of your image right, go back to your original header image and crop the side of the image (the opposite side of the side the text is leaning – if your text is more to the left than you want it, crop the right side so it’s even, or visa versa).  Then re-upload it. Which brings me to . . .

Tip #5 

Designing a header to be perfectly the way you want it takes a lot of tweaking, so save any cropping adjustments as separate files so that if you don’t like it you still have the original file to use to start over.  Or if you are still making adjustments in whatever program/website you are using, leave it open until you are sure you have your image just right and it looks good on your blog.  That way you don’t have to start all over every time you want to tweak a detail.

Tip #6

Just be creative, and see what you can come up with!  Experiment.  It’s not like you can’t change it later.  For example, when I was coming up with a header for this blog design, I was originally going to do a scrapbook-y header, but then I decided to go for something a little more simple.  Here is one of the other headers I made:

Header4 copy

I made this header using the blank file/paint can tool/cookie cutter tool – the same way I discussed making background images in Photoshop in my last post, only this time I dragged multiple shapes onto another blank file and used them to make a header.

The simple header that I ended up using is just text against a blank background, so it doesn’t require too much explaining.

And that about sums it up for headers – if you have any questions, please send me an e-mail at, or comment below!  Next time I’ll cover social media buttons (which I know is what you are all most curious about)!

You may also like:
Brittney said...

Very, very cool! Have been learning a lot from your recent posts! Thanks so much for sharing:)

I kinda learned by trial and error too, though I'm nowhere near your knowledge level;) Fun just to play around and see where the design takes ya, isn't it?

Melanie said...

Very helpful Callie!!! Cant thank you enough for doing these posts lately..with all the probs I've been having w/mine it has come in handy!

Elyse said...

Thank you so much for doing these have inspired me to redo my blog and to get back to regular posting :-)

Hannah Terpstra said...

I know this is an old post but Im still enjoying clicking through your blog design series! Im really trying to figure out the code for the fixed navigation bar/ header that you have! Any tips for me? :)

© Through Clouded Glass. Design by MangoBlogs.