Tuesday, May 29, 2012

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!







52 comments:

  1. My comment is simply.... when are you up for that coffee date??? :o)

    ReplyDelete
  2. In Firefox you can right-click on an image and click 'get image info' and it does pretty much the same thing :)
    Thanks for the tips!

    ReplyDelete
    Replies
    1. Thanks Fox! I've updated this post to include that info! :)

      Delete
  3. coooool, i think I'm going to get a lot of your posting on blog designy things. Am going to have a go at this on the long weekend, just so i know I can do it. package posted this arvo btw x

    ReplyDelete
  4. Thanks, Sophie. This info was very valuable. Now I have to figure out how to reduce the height... If you know how to add widgets inside of the header please let me know... xdisciple.blogspot.com

    ReplyDelete
  5. wow sophie, you are so good... i went though your videos and just did as you said and the difference it has done to my blog is great...thank you so much for the tutorials, please post more... will love to do more work on my blog... God bless... by the way i like the way you explain things so simple and easy...

    ReplyDelete
    Replies
    1. Hi Priya, thanks for the feedback! Unfortunately I can't get back to you, you dont have an email linked to your comments and your blogger profile is private! Boo! :(

      Wish I could see your header :)

      Delete
  6. can you please help me with my header image, i saw your video and did the same but the only issue is that it doesnt fit the page well and also i find that it is cornered on the left... not sure where i had made a mistake... will be great if you can help me out... i hard earlier commented and thanked you for the image button which turned out perfect... please help me out...

    ReplyDelete
  7. Hi Sopie, sorry about that i will change the settings and this is my mail id - mailfigsandolives@gmail.com and this is my blog URL - http://cooklikepriya.blogspot.co.uk/... first thing in the morning came to check you blog to see if you have left some comments, please help

    ReplyDelete
  8. thank u so much sophie, your a great help.... when you find time please go thought my blog... yes i took like weeks to do the header and without your help not sure how i would have fixed it...

    ReplyDelete
  9. Thank you so much for your easy-to-understand-and-follow -tip! I'm trying to do a new header, and you explain the different steps in a very clear way! I noticed that you're blog is about crafting, sewing etc ... I like to sew & knit whenever I get a change ... I'M your new follower :-)

    ReplyDelete
  10. Thank you so much for your clear and understandable tips - that's a great help (I'm trying to make a new header, a bit more simple with an image and a text). I noticed that you blog about crafting, sewing ... I do like to sew an knit, whenever I can - so I' m your new follower :-)

    ReplyDelete
  11. Hi! Thanks so much for your tutorial. I am trying to follow it but it still isn't working for me :( I have created a new logo that is taller than my old one and when I put it in it is squishing it height-ways and placing it to the left. If you have the time to give me some advice I sure would appreciate it :D Thanks so much xx

    ReplyDelete
  12. These were great directions/info. Can you tell me, if you make your own header, should it be at 72dpi resolution???

    ReplyDelete
  13. Thank you for the post and the video on how to design your own header! Both were well-sequenced and helped me make my own header on my new blog. All the best to you!

    ReplyDelete
  14. Thank you for this tutorial. My mind was starting to explode, trying to think about this.

    ReplyDelete
    Replies
    1. Hahaha! I hope it exploded in a good way in the end! ;)

      Delete
  15. Hi there,
    I saw your tutorial on youtube, and it was just fabulous.
    But now, when I upload it to my "edit header layout" tab, and follow exactly what you say but it is too short, and it crops my logo!!!!
    I have tried over 5 times and cannot conquer this!!!
    My blog width is 960 by 310...

    ReplyDelete
  16. thank you for the tips. I am a graphic artist and it drives me nuts that some headers work and some dont, but know I know why. :)

    ReplyDelete
  17. Thank you for the clear and direct tips. I am a graphic artist and this really helps me.

    ReplyDelete
  18. hey!! I recently started my blog and it looks pretty boring, how do I add all of the follow widgets like yours so it all blends together

    ReplyDelete
  19. Hey there! Thanks for the great tutorial. For some reason, I can't find my dimensions of my header anywhere. I have searched all over my WP dashboard. I installed Google Chrome and tried to do what you said. Everytime I right click it just opens up a new tab with my site. Would you have any other suggestions?

    ReplyDelete
  20. Very helpful. Didn't expect I could look into Inspect Element right within the open tab. Thank you!

    - CdV (http://earn-online-income-today.blogspot.com

    ReplyDelete
  21. Hi Sophie!
    I'm just starting my new blog (in german) and i was so lost with all this layout header stuff...you really saved me!:D
    Thanks I'm trying to make a new better design of my blog do you have any ideas for my header? Thank you so much!!
    xxx

    http://theycallitmylife.blogspot.com

    ReplyDelete
  22. Found this helpful post via Google, just what I needed: thanks!
    Blog Hug Nina Joy

    ReplyDelete
  23. THANK YOU! This was HUGELY helpful! (((hugs)))

    ReplyDelete
  24. wow this is about the only site that can help thanks so much Sophie! Keep doing what you do, you rock :)

    http://jennoshealth.blogspot.ie/

    ReplyDelete
  25. Finally! Some helpful info on this question! Thanks for the info, I will now go and fix my header that is sitting to the left of my blog. Thanks so much!

    ReplyDelete
    Replies
    1. Awesome! I see you have fixed it now :) What beautiful art work you have!

      Delete
  26. This is just what I needed.
    Thanks for sharing this with us.

    ReplyDelete
  27. thanks for this i'm fixing my header right now:)

    ReplyDelete
  28. HI Sophie,

    I managed to find my stats in 'Inspect Element', but can't figure out how to change the numbers for height, (way too big right now). I tried, but nothing happens, and I'm afraid to click anything in case it does something irreversible. Please help. Thank you!

    Poppy@www.poppyview.blogspot.com
    Email: youlahatzaki@gmail.com

    ReplyDelete
  29. Way helpful, thank you!

    I copied your Header Measurements, and it worked almost, but what i realized that was helpful for me is this: My header was still just slightly too big, so I adjusted the size of the Blog itself to instead!

    I also use Google Blogger as my website, and here is what I did: Go to Blogger, then: Template- click Customize. When that opens, your left menu gives you an option to Adjust Widths, click that. The slider allows you to make the blog bigger or smaller, and since I already knew my header was 1040 pixels (based off of yours), i made sure to just make the blog bigger than that at 1080 pix. Ta daaa!

    ReplyDelete
  30. Thank you for this. Got my size...now going to make a new banner!

    ReplyDelete
  31. Thanks a lot Sophie,its great to know this,stay happy as you are welcome to http://happinessiosis.blogspot.com

    ReplyDelete
  32. soooo helpfull,, works for opera too :)

    ReplyDelete
  33. Hi, the part highlighted in this post is the home tabs. I'm a bit6 confused because I also have an option of highlighting the header area :( Please can you help me with this?

    ReplyDelete
    Replies
    1. Hello! This is because at the time my header and my tabs bar were exactly the same width. If you're wanting to create a header, use the width of the header area thats already there :)

      Delete
  34. Hi, the part highlighted in this post is the home tabs. I'm a bit6 confused because I also have an option of highlighting the header area :( Please can you help me with this?

    ReplyDelete

Wowee! Thanks for leaving a comment :)

Pin It button on image hover