Centering or right aligning header

Have you ever wonder that you can make a header at center and right part of Blog.You may have do this in minima default template.But in blogger default template blogger will keep the header in only left part do you want to appear your header in Middle part then do this.

I.Aligning header to Center or right.

If the header is looking great in left then the tips is not probably for you.But image if it looks great in center or right follow this.

• For CSS
• For Image
• For “Instead of title and description” or “Have description placed after the image”
• For header title and description only
• Splitting header image and text.

1.Adding CSS.

Header can be aligned to center and right easily by adding just a CSS.For adding CSS do this.

1. Go to Blogger.com
2. Click on design
3. Go to Template Designer.
4. Find the tab named “Advanced'”
5. Click on Add CSS(Sometimes We need to scroll at there)
6. In the box add a CSS according to your corresponding choice.
7. The process given below are almost CSS so paste it in CSS box

2.For Image

2.1.For Behind title and description

• In this option blogger will;
  1. The image uploaded by you will be added as background.
  2. If no image is added your default header background will be used.
• To appear this at  center add this CSS

  #header-inner {background-position: center !important; width: 99% !important;}

  1. You can change 99% to any percentage which filts at blog.You can change it to pixel too.
• To appear at right

  #header-inner {background-position: right !important; width: 100% !important;}

• In appearing in center and right they are almost same only background-position in changed to left or right

3.For “Instead of title and description” or “Have description placed after the image”

Using this option your image will only appear your blog title will not to shown as header.

• To appear the header in center

  #header-inner img {margin: 0 auto !important;}
  #header-inner {text-align:center !important;} 

  1. For template designer line 2 must be added
• To appear the header in right.

  #header-inner img {margin: 0 auto 0 300px;}

• To appear vertically

  #header-inner img {padding-top: 45px ;}

• Note: for steps 2.1 and 2.2 your header size must be less than header-wrapper etc..

4 . For header title and description only.

Remember it will not work if you have ticked in have a description placed behind this image or other else.

• To Appear Vertically

  .titlewrapper {padding-top: 45px  !important;}

• To Appear Center

  #header-inner {text-align: center ;}

• To Appear Right

  #header-inner {text-align: right ;}

• The code are almost similar only text align:right or center are changed.

5.Splitting header image and text.

• Adding CSS

  #header-inner {background-position: left !important; width: 100% !important;}
  .titlewrapper, .descriptionwrapper {padding-left: 90px !important;}

• Note. For making text on left and image on right replace line one left to right and line 2 left to right.
• The more you will increase 90px it will push image more your texts to the left (Header Image)

Subscribe At free
Thank you for visiting FacebookSinker.blogspot.com. Please don't miss any of the updates by subscribing to our RSS feed or email updates.