Friday, September 30, 2011

Center a Blog Header in Blogger




Hi Everyone~

Often, people need to move their blog headers to center them.  Those that are off-center show that a blogger is "lost" on the virtual highway...I know because I was lost once!  So, here's how you can center a blog header.  It's not hard.  I would suggest that you write down the steps.  That will make it easier.

First, I will go to my blog. I will go to the top
where it says DESIGN and click it.  (That's in the picture up above.)


I will arrive at the TEMPLATE page.  There I will look for the orange button that says DESIGN and click it! (The page will look like the one above.)



Next, a screen like the one above will appear.  It is the TEMPLATE DESIGNER page. I will push ADVANCED on the left sidebar..


Once I go to the new page as seen below, I will scroll down to where it says CSS FEED and push that.

Keep in mind that when you land on this last page (where all the magic happens!) you will not see ADD CSS .  That is why you need to move that blue bar down on the left side of your screen.  You will then see ADD CSS.


Almost done!



Click ADD CSS, You will see a screen. You will see a code. You will increase the number if
you want to move the header to the right. You will decrease the number if you want to move it to the left.


In this picture, you can see that it says 35 px. Just insert a different number to move it.

If I want to move it to the right, I put in 45.  If it's not enough, I just keep going up in increments of 10.
It's the same for if I want to move it to the left.  I start at 35...So, if it's not correct, I put in 25...I keep going down until I get the placement I want.

The larger the number, it moves right.  The lower the number, it moves left.

Get it where you want it and then at the top right, click APPLY TO BLOG.

That's it!!!

Special Note: Sometimes people go into their blog templates and there is no code there on that screen at all. If you want, you can copy and paste this code from my blog and then just change the numbers in it to move your header.


.header-outer {
margin-left:35px;
}



I am the author of 3 e-books on Amazon:




They were created to give
you the inspiration to make your blog rock!

Thanks for visiting--and I hope that this tutorial helped!

XO

Cindy

6 comments:

  1. Visiting from Carla's Curiously Crafty Chaos Blog. Come by my blog for some puddin n pie
    http://georgie-hornpuddinnpie.blogspot.com/2011/09/tag-tuesday-and-giveaway_27.html

    ReplyDelete
  2. Hi Cindy, I'm going to save this post. Right now the header I'm using is working out, but I have wrestled with this problem before and I'm sure I will have this problem again when I change my blog around. Thanks for posting this information!
    Mary

    ReplyDelete
  3. Meu CSS não tem código...não consegui...

    ReplyDelete
  4. Acho que teria que compactar minha imagem...estou tentando...

    ReplyDelete
  5. Thank you, I had a code but didn't know to add a higher number so I deleted the code because I thought the code automatically moved it. Dahhhh, thanks so much, Hope I can do what I need to now.
    Lesley

    ReplyDelete
  6. Thank you so much, it worked a treat!! I'm off to see what else I can do to beautify my blog

    hugs Vicky xxx

    ReplyDelete