Tuesday, 16 February 2010

ADJUSTING & CENTERING HEADERS IN BLOGGER

I've had a few queries about headers - so much so, that I think it's worth a full tutorial!

CENTERING TEXT

When using a ready-made header, you may want to use Blogger's own header text and bye-line. Or you may have downloaded a header, then added your own title in a fancy font.



Unfortunately, the placement defaults to Blogger's own measurements and borders, so may look too high, too far to one side etc. Here's how to adjust it (don't forget to save a copy of your template to your desktop first.)



ADJUSTING VERTICAL PLACEMENT 

If the text/image is too high up, you'll need to bring it down.



I’ve highlighted the padding (default setting is 15px) so try adjusting to 100px and click Preview to see how it looks. If you are happy, press Save.

Then go on to make any horizontal adjustments necessary.

ADJUSTING HORIZONTAL PLACEMENT

If the text/image isn't centred properly, do this:

Copy and paste the text below into the 'Find' box (type CTRL+F on your keyboard and it will appear just above your lower toolbar). Paste the text into the box and it will highlight in green for you:

#header img {



 Then copy and paste this piece of text into the code...
position: relative;
left: -20px;
... just above the { symbol.

Or copy and paste all of this if it’s easier for you:

#header img {
  margin-$startSide: auto;
  margin-$endSide: auto;
  position: relative;
  left: -20px;

}

It should look like the pic below (make sure you don’t have two { symbols).  Preview again, and if you are happy, Save.

Preview to see how it looks, and keep adjusting the numbers until it looks right.

-25px will bring it over even more to the left, -15px will move it a little to the right again, etc.

FOR THE NEW BLOGGER TEMPLATES

The code is slightly different. Look for this:
.Header {
margin-$startSide: auto;
  margin-$endSide: auto;
}
and add this: 
position: relative;
 left: -14px;
 to get this:
.Header {
margin-$startSide: auto;
  margin-$endSide: auto;
position: relative;
  left: -14px; }
Again, adjust those figures to suit your blog: - moves the header to the left, + moves it to the right, and the numbers are the amount you need to shift it.

post signature
your photo name

8 comments:

  1. Fabulous - these instructions fixed my frustration :-) Thanks

    ReplyDelete
  2. tnx it worked
    is there any way to reposition header on the mobile template?

    ReplyDelete
    Replies
    1. HI and thanks for asking

      I'm sorry but I can't help with this one... If you click on the default for the mobile template that should actually sort it out automatically, and if it doesn't, as far as I know nobody has worked out a tweak for this so far.

      It might be worth googling specifically for this though. Good luck!

      Delete
  3. Hi,

    Can you publish code for "Back to top" Button for blogger

    ReplyDelete
    Replies
    1. Hi Pankaj
      Thanks for asking - I'll sort a tutorial out for this ASAP.
      In the meantime, try this one:
      http://www.alltechpeople.com/2015/11/add-back-to-top-button.html

      Thanks for commenting!

      Delete
  4. Thanks, its working, so nice of you.

    ReplyDelete
    Replies
    1. Happy to help! Thanks for letting me know.

      Delete

I absolutely love to receive comments!

But please note - I DO check for spam, and I moderate all comments - any spam is deleted at source.