Posted on at

Is your blogger banner off centered with the new Template Designer?  Once your blog has the ‘simple layout’ or the ‘picture window layout’ it will move your banner over to the left.  Does it look like this image below?   This will make your blog look unprofessional and it is kind of annoying!!  Well, you are at the right place!  This is an easy step by step tutorial that will show you how to center your blog banner with the new Template Designer.

You should already have your banner on your blog. If you do not have a banner on your blog follow thistutorial on How to put a banner on your blog.

1.) Go to your ‘Layout’ page and then click on the blue ‘Template Designer’.

2.)   Next you will click on ‘Advanced’.  Scroll down to the bottom of the black box and click on ‘Add CSS’.  Remove the wording that is in the white box.

3.)  Paste the following code in the white box:  #Header1 {width:650px;margin:0 auto}
You may need to adjust the number 650 to the width of the banner you designed.   If you used one of our free banners the code will be anywhere from 650 to 750.  If it still looks a little off, play around with the number until the banner is centered in the preview box below.

In my sample below I changed the number to 750 and it centered the blogger banner.

 Next you will click ‘Apply To Blog’  in the upper right hand corner. Then click ‘View Blog’.  You now have a cute banner on your blog that is centered!!  Leave a comment and let us know how your blog turned out:)!

About the author


I am simple personality with some attitude.

Subscribe 2693