Translate

Tuesday

How to: Push (or Center) a Blog Header

This tutorial is to serve as an alternative to my other tutorial titled How to: Center a Blog Header.  Although that method works well in most cases, it can fail to center if used with other enhanced template features so if you find your banner image is not centering properly then go ahead and give this simple method a try.  The code below is not meant to be used in combination with any other code for centering a header so be sure to remove any prior "banner centering code" before moving forward.

To use this tutorial you will need to have a banner already loaded onto your blog.  If you need help installing a blog banner then follow this tutorial: How to: Install a Blog Header.
With a banner in place you are ready to move forward with "pushing" your blog header, so let's begin...

1. Log-in to your blog click on the "Design" link in the top right corner link list...


2. This should bring you directly to the "Template" page, in the left links list...


3. Click on the "Customize" button...


4. We are now in the "Template Designer" area...


This interface offers you the ability to easily change aspects of your blog.  We will be adding some code to the "Advanced CSS" area so let's navigate to that area...

5. Click on "Advanced" at the bottom of the left link list...


6. Now using the scroll bar...


7. Scroll down the inner link list until you see "Add CSS"...


8. Click on that link to be taken to the CSS area...


If you've previously inserted any CSS code then you will see it present in this area. If you have not then this area will be empty on your blog.

9. Now copy the code from the scrolling box below...


10. And paste it into the CSS area...


and you should see your banner image immediately shift to the right.

11. If you wish to move it over further to the right or left you can easily do this by either increasing or decreasing the last number in the code.  So, if the setting is at "0", then your banner will be all the way to the farthest left position it can go...


12. And if you increase the number to say "100", then you will see your banner image move way over to the right side...


13. Personally, I think somewhere between 30 - 50 works best but test it out and see what looks best on your own blog....


14.  Once you have your banner image set where you want it, then save your changes by clicking the "Apply to Blog" button...


That's it! You've now successfully centered your blog banner.  If you decide to change the dimensions of your blog layout in the future, you can simply return to this area and increase or decease that last number to recenter you banner image.

Enjoy~

9 comments:

  1. Fantastic worked a treat and so easy to follow! Thank you!

    ReplyDelete
  2. Thanks for sharing what you have learned about moving the header over to the right!

    ReplyDelete
  3. thanks for this info it helped a lot my magic center number 88. I have to ask where did you learn all about blog codes? how do you design your blog templates? beautiful. is it hard to learn all of this? sorry more than one question.

    ReplyDelete
    Replies
    1. Hi Esveyde,
      I was a web developer for many years so I learned Html & CSS code through that work. I'm also an art major and have studied Photoshop Creative Suite in college.
      Best~
      ♥Sharon

      Delete
  4. Hi,

    Your instructions were the 3rd one that I tried to center a banner header on Blogger and I am so pleased with the results! It centered at 130px. Thank you very much for helping. Check the banner out here...
    http://broussardgregorysledgewilliams.blogspot.co.uk

    ReplyDelete
  5. Nope didn't work for me. I did everything twice. Even got someone else to follow the instructions and that sucker just refuses to budge from the left. So frustrating but thanks anyway

    ReplyDelete
  6. Oh that's a shame Kereru ~ I do think it matters what template is being used and heaven knows there are so many variables that can interfere. Sure hope you find something that works for your specific look.
    ♥Sharon

    ReplyDelete

Due to a recent increase in SPAM comments preauthorization is temporarily set for all comments ~ once the situation improves I will remove that function.

I love your comments and appreciate your opinions so much ~ I hope you enjoyed your visit and come back often.
♥Sharon

Note: Only a member of this blog may post a comment.