DIY Blog Makeover - Designing a Header

Since the header is the first thing that your visitors will see, you want to make sure that it catches the eye and showcases what your blog is all about.

In this post I will address:
1. Creating Art for your Header
2. Designing a Collage Header
3. Resizing a Header and Loading it in Blogger
4. Changing or Getting rid of the Border around the Header

CREATING ART FOR YOUR HEADER

As far as the actual art goes, it's really not hard to make yourself a fun logo or picture for your header. I am pretty awful at drawing, but you can really do a lot to a picture once you get it uploaded into a computer!

The last header that I had was just a silly little sketch that I drew and scanned into the computer:


I used Picasa to change the picture to sepia.
Then I used the same techniques that I will explain in the next section for creating a collage.

For the header that you see now, I just drew a squiggly box and used some stamps to add the two birds.
I took a picture with my camera and uploaded it:


I actually used photobucket.com to get the antiqued effect
[you'd be surprised how many fun features you can find on photobucket!],
and then just used Picasa to turn it into a collage with pictures of some of my crafts and add text.

For our "test blog" I took the "html beast" sketch and some clips of html, and tweeked them a little bit:


And I will use those images to make a collage header.


DESIGNING A COLLAGE HEADER

I tried several different resources when I was first trying to create a header, ranging anywhere from mybannermaker.com to Walmart's photo center!

The best FREE resource I found is Picasa. I actually started using it because of a tutorial I found on one of my favorite blogs, Craftaholics Annonymous. [If you've never visited, you totally should! Linda is so sweet and super crafty!] She also has a great tutorial for how to make a header, but for the purpose of thoroughness, I'm going to show you my own step-by-step of how I am making one for my test blog:

Remember, this is how our blog looked after we resized it yesterday:



If you don't already have Picasa, you can download it for free here.
Your pictures should automatically load into it.

Once they do, you need to select the picture that you want to use for your header.
To do this, click the photo thumbnail.
The image will show up in the bottom, left corner.
You need to click the green thumb pin to keep it there:


Select other photos the same way, so that you have a collection for your collage:


Then click the tab "create" at the top of the screen, and select "Picture Collage"


Your pictures will be dumped in a white space like this:


You can do all sorts of things here, including changing your background color.
Arrange the photos the way you'd like them to be on your banner
[probably a long rectangle shape]
Then click "Create Collage":


At this point you can crop your image and add text:


Save your header.

RESIZE YOUR HEADER AND LOAD IT INTO BLOGGER

Now, you need to resize it to fit in your header-wrapper.
There are several sites to use, but I'm going to take you to Pic Resize.

Upload your header.
Under "Make my picture" select "Custom Size":


Make your picture the just a little smaller than your header-wrapper.
I chose 1000px for my header-wrapper, so I made my header 990px
[be sure to change it from percent to pixels!!]



Click "I'm Done, Resize My Picture" and save it to your computer.

Go to your blogger dashboard.
Click the "Design" tab.
Click "Edit" where it says header:


Click to choose a file from your computer:


Make sure that the image goes over the current title:


And this is what our blog looks like now:



CHANGING OR GETTING RID OF THE BORDER AROUND THE HEADER

If you don't want that black border around your header, getting rid of it [or changing its size or color] is actually really easy.

Go to your blogger dashboard.
Click the "Design" tab.
Click on "Edit HTML."

[Don't forget to backup your template now before you change anything!]

Use the Ctrl + F to find "header-wrapper" again.
I've highlighted the first line we are interested in:


Where it says 1px, change it to 0px.

Now we're going to change this line:


You can replace 1px with whatever number you'd like. 0px will remove the border all together, and a larger number will make it bigger.

If you'd like to leave it there, you can change the color by replacing $bordercolor with either a color word or an html color code

Here I resized the border to 10px and changed the color to turquoise:


To get this:


But I'm going show you how to put a border all the way around the blog tomorrow,
so for now, I'm going to remove the header border by changing the px to 0.

And this is what the blog looks like after all of today's changes:



I'm linking to these parties.
♥