How to Center Your Blog Header on Blogger

How to Center Your Blog Header on Blogger

in Blog Tips, Blog Tutorials, Blogger Tutorials, Not For Commercial Use on November 26, 2012

How to Center Your Blog Header on Blogger
How-to-center-blog-header

Hello everyone!  Tiffany here! It’s so great to be here and to begin sharing all kinds of tips with you!  Today I’m going to share a very simple trick to get your blog header to be centered!!
The blogger template I’m using is probably one of the most popular ‘Picture Window’, but this tip can be used with most any template!

The problem is the width of my blog is actually wider than my pretty header image.  Don’t you just love this pretty header?  It was a freebie from Keren, find it here at Free Pretty Things for You! Before I added it to my blog I brought it into Photoshop and added a lovely verse!

 

But it would look a lot better if it were centered on top of my blog!  So here are a couple of quick steps to make that happen!

How to Center Your Blog Header on Blogger

1.  First go to  TEMPLATE > CUSTOMIZE > ADVANCED > ADD CSS

 

2.  Choose the code that best fits your needs below!  Copy & Paste it in the space as shown above. *Please Note* Hit your ENTER Key after you paste the code snippet.

Option A:  If you used INSTEAD OF TITLE AND DESCRIPTION option:

 

With this option the image was added as a <img> HTML element. Use these code snippets to align the element.

To Center:

[showmyads]

To Align Right:

The ‘300’ number can be adjusted higher or lower to move your image left or right.

To Align Vertically:

The ’50’ number can be adjusted higher or lower to move your image up or down. This code snippet can be used in conjunction with the 2 above.

Option B:   If you used BEHIND TITLE AND DESCRIPTION option:

When you choose this option, Blogger added your header image as a background to the header.  To align it you need to add one of the follow snippets of code:

To Center:

To Align Right:

 
 

All Done!!  Oh that is so much better!!   Below are a few extra aligning tips for your headers!!

Line Up Your Header Text

If you would like to Line Up your Header Text (Title & Description) then use of one these snippet codes: These codes will work with text-only header and the text in “Behind Title & Description” image placement option.

To Center:

To Align Right:

To Align Vertically:(apply top padding)

The ’50’ number can be adjusted higher or lower to move your image up or down. This code snippet can be used in conjunction with the 2 above.  Also, to adjust the Description use .descriptionwrapper

 

Line Up Image & Text Side by Side

Use one of these snippets if you want to split up your header into 2 parts positioned side by side, an image and text: These codes will work with the “Behind Title & Description” image placement option.

To Place Image on Left & Text on Right:

Increase left padding to push away texts to the right of the image header

To Place Text on Left & Image on Right:

Increase right padding to push away texts to the left of the image header.

It has been such a pleasure to share this tip with you today! Feel free to share your comments or questions below!
Swing by my shop at Tiffany Doodles Digital Stamps any time! I’d love to have you over!  At least come by and pick up a new freebie every Thursday! =)