Monday, 21 January 2013

How to center a banner image on Blogger

Last time Cava asked how to get the banner image on the top of the Blogger blog. Now she had an extra question (thank you! :)) and that is: “How to center a top banner image”. There are two different ways to center a banner image on Blogger blog:
  1.  By uploading an image 
  2.  By embedding HTML/JavaScript Code
1. Uploading an image

If you uploaded your banner image via Gadget, Blogger will automatically align it to the left. There are no options for middle and right alignment. Sometimes your header image is not as wide as the rest of your blog then it’s possible by adding CSS.

You just have to do two simple steps:


Step 1:
Upload your Header image.

Step 2:
Go to your Template Designer > Advanced > Add CSS (see below), and add this code:

.header-outer {margin-left:90px;}


You might need to adjust the “90″ value depending on how large your header is and how wide your blog is, so just play with the number until it looks right. (smaller #s will move your header to the left, and larger #s will move your header to the right)

2. Embedding HTML/JavaScript code

If you are embedding your banner through HTML/JavaScript code then it’s also possible by adding CSS. You just have to do these two simple steps:

Step 1:
Make these two little changes in the start and an end of your code which you are going to use for your banner.

<div id="MyBanner">
(your code)
</div>

Step 2: 
Go to your Template Designer > Advanced > Add CSS (see below), and add this code:

#MyBanner {margin: 0 auto 0 -60px;}

You might need to adjust the “-60″ value, depending on how large your header is, and how wide your blog is, so just play with the number until it looks right (smaller numbers will move your header to the left, and larger numbers will move your header to the right).


You can adjust your banner and see how it’s looking just below the code when you are changing numbers, Click Apply to Blog when you are happy with your changes :)


Hopefully you found this helpful! :)

34 comments:

  1. fantastic just what I was looking for THANK YOU for explaining this in plain english !!!

    ReplyDelete
  2. The post is pretty interesting. I really never thought I could have a good read by this time until I found out this site. I am grateful for the information given. Thank you for being so generous enough to have shared your knowledge with us.
    business loan for bad credit

    ReplyDelete
  3. Thank you so much! Easiest instructions ever, option one is the best!

    ReplyDelete
  4. Made so much more sense. Thank you! It's hard to find tutorials that are easy to understand.

    ReplyDelete
  5. I like all comment of site. May be Bannersis very useful everyone. If you want to know more about Banners-click here >Banners

    ReplyDelete
  6. The new building's sleek three-story exterior reflected the sunlight, its irregularly spaced glass panels suggesting contrapuntal rhythms against a steady beat of steel. Inside was the Robert N. Miner Auditorium, named for the late Oracle Corp. המרכז הארצי

    ReplyDelete
  7. Thanks SO much for this! It solved a problem that I've been having for days. :)

    ReplyDelete
  8. Exactly what I was looking for, thank you!:)

    xo Sally | Gold Couture

    ReplyDelete
  9. I love you! I love you! I love you! Okay--sorry but really, I was struggling for HOURS trying to figure this out and was starting to foam at the mouth. Found your blog and my problem was fixed in less than 3 minutes. I will frequent this blog FOR SURE. Again--thank you!

    ReplyDelete
  10. How do i upload the banner just like you have with the illustration and title?
    Also, if it's on this page and Step 1 is upload header image, how big does it have to be in dimentions because i will need to know to create my banner on photoshop..

    Thankyou xx

    ReplyDelete
  11. Thanks this helped so much! :) I did it three years ago but couldn't remember the changes and also with all the blogger changes...anyway. YES! It's finished!:) Thank you!! I totally agree with courtney dalley!

    ReplyDelete
  12. Actually could I have further help with this? Because my header image never moves, no matter how many different codes I have tried. And it is getting really frustrating. I created this image map which I am extremely happy with, but the image map serving as my banner should cover one edge of the screen all the way over to the other.

    shoppinsweetheart.blogspot.com

    ReplyDelete
  13. thank you so much!! :) this helped a lot!

    ReplyDelete
  14. Thank you so much!
    Iv'e tried so many & this is the only one that worked!
    styleofashleigh.blogspot.com

    ReplyDelete
  15. Thank you. I centered the image in no time. Fantastic tip.

    ReplyDelete
  16. Woo Hoo!!!!

    Thank you so much. It worked! I had one clarifying question - Do I need to keep the '0' after 'auto' in -

    #MyBanner {margin: 0 auto 0 -60px;} ?

    Thanks again.

    ReplyDelete
  17. what to say i praise of this blog, which contains a lot of amazing information as well as the thoughtful writes.

    Sign making supplies

    ReplyDelete
  18. Hi! I've used some of your other tutorials and they have been great, but for some reason this isn't working for me! Is there any way you could help me figure mine out?

    Rebecca.
    http://talisbury.blogspot.com/

    ReplyDelete
  19. your site is a definite lifesaver for all of us new bloggers trying to figure out how to get things going. Thanks!

    ReplyDelete
  20. Make A Customized Banner Image Type your title for this web page banner. Click the heart symbol to insert different symbols. How To Blog

    ReplyDelete
  21. thank you!!
    http://weddingringstoteethingrings.blogspot.com/

    ReplyDelete
  22. this was sooooooo helpful, thank you!!

    ReplyDelete
  23. Thank you so much! I could not get this right by myself, it's been far too long since I worked with coding.

    ReplyDelete
  24. Thank you for this article, it was exactly what I needed. I'm definitely going to check out more of your articles.

    ReplyDelete
  25. Thank you so much for this info. It work great!

    ReplyDelete
  26. thankssssssss!! finally ><

    ReplyDelete
  27. Thank you so much! All your articles are SO helpful!

    www.wishableblog.blogspot.com

    ReplyDelete
  28. I don't have "advanced" and "css" on my template or layout menus. Where are they?

    ReplyDelete
  29. Finally! Someone who explained it the RIGHT way! Thank you so much =)

    ReplyDelete
  30. Thank you! Your easy to understand instructions has now corrected my header image. :)

    www.donna-mcdine.blogspot.com

    ReplyDelete
  31. Banners can help you promote your products in a more condensed format, similar to what billboard advertising can offer you.
    custom yard signs

    ReplyDelete