How To Find Out The Size Of Your Blog Header

 

The header on your personal website is one of the first things your viewers will see, so it needs to represent you well and give the viewer an instant download as to what they can expect, along with being visually appealing.

All around the blog world I see headers that are off to the left, or are super duper huge like they have just uploaded a whole photo. Its good to see a little bit of blog text below your header - this is your "landing space" where peoples eyes are drawn to. If you just have a huge photo as your header a reader might only spend 1 second on your page and they wont learn anything about you!

This is so frustrating for me because I know it is such a simple fix.

If you're thinking "that's exactly whats happening on my blog right now" then this is for you, so keep reading, I might just be able to help you!

Your header is off center and massive because it's the wrong size for the space where your header should be. 

You need to make a header that is a specific size for your website (this will depend on your blog template or what you've chosen your blog dimensions to be (which probably happened when you first made your blog. They can easily be changed!)

Here's how you find out the size your header needs to be

• To find out the size of the space open up google chrome (its free to download, and in my opinion the best browser you can use right now) (You can also open Firefox and it will do almost the same thing)
• Right click on your blogs tab line - This will open up a little drop down menu, click "inspect element"("Get info" in Firefox)

• This Inspect Element button will open up a new area in the lower half of your chrome browser. Here, it will bring up all of the HTML that you are viewing on your page, and highlighted, it will show you the area that you just clicked on. It might look a little scary.
• If you happen to move your mouse and loose the info, on the top half of your browser hover your mouse over the area you want to view (your tabs (because this is the width of your page))
• Alternatively, you can use the up and down button on your keypad to scroll through the lines of code. With each line you scroll down, on the top half of your page a new section will be highlighted. Keep scrolling until your tabs are highlighted, like below.

• Can you see 1040x30 px? These are the pixels. The WIDTH (from left to right) of my header needs to be 1040 pixels.
• If you're planning on redesigning your header the height of it is up to you. My current header is 300 pixels. 400 pixels is nice too. You choose! Just enter the number in whatever you're using to create a header and play around with what works best with your design. I've done a handy blog post and video on how to design a blog header in 5 minutes using a free online editing program. 
• So, my headers dimensions are 1040x300pixels

Write your dimensions down and stick them to the fridge, you'll need to remember your pixels when you go and create your new blog header!

If you would like to play along but you are already confused, please email me, sophieslim@moo2.co.nz , I'd love to help :)

Read more on blog tips:
Must Know Side Bar Tips
How To Link Your Email Address To Your Comments (so bloggers can easily reply directly to you!)
How To Create New Tabs On Your Blog
How To Create A Blog Header In Under 5 Minutes
How To Get Your Blog In Google Search Results

Was this helpful? Have you used any of my tutorials? Leave a comment and let me know how it went!