Portal of all Blogger widget, Airtel USSD Codes, Facebook Hack, Free Internet Tips, PC and Blogger Tricks

Breaking

Wednesday 6 November 2013

Center or right Align header image and title¦Adjust Blogger Header Alignment

I have already posted article to align widget/Gadgets title in blogger .  Today I will tell you steps to align blogger header. To give your blogger a professional look, you need to customize blogger default theme. That include adding widget title background , adding image before sidebar title. This article is to customize alignment of blogger header image or title.


To align Blogger Title Or Header:

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

Before Going Next Step Check Other Related PoSt.




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

Option 1: If you used “INSTEAD OF TITLE AND DESCRIPTION
With this option the image was added as a <img> HTML element. Use these code snippets
to align the element.
To Center:
#header-inner img {
margin: 0 auto !important;} #header-inner {
text-align:center;}

To Align Right:
#header-inner img {
margin: 0 auto 0 300px;}
The ’300′ number can be adjusted higher or lower to move your image left or right.

To Align Vertically:
#header-inner img {
padding-top:50px ;}

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 2: If you used “BEHIND TITLE AND DESCRIPTION“
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:
#header-inner {background-position:center !important;
width: 100% !

To Align Right:
#header-inner {background-position:right !important;
width: 100% !

No comments:

Post a Comment

Notice: Don't add "backlink". Text with Link will automatically Removed.