Below is an example of a blog banner image in place but obviously set off center. The default setting for most Blogger templates is for the banner image to show up toward the left side of your blog as shown below...
So let's begin...
1. Log into your blog and then click the "Design" link found in the top right corner...
2. In the next window click on the "Customize" button...
3. This will open the Blogger Template Designer which you can see an example of shown below...
4. Click on the "Advance" link in the bottom of the left side list...
5. Using the inner scroll bar...
6. Scroll down to the "Add CSS" link...
7. This is the area where you can add a snippet of CSS code to tell your blog to center the header...
8. Now copy the code below and paste it into the rectangle...
9. Now it should look like this...
Within the code you'll notice the number "900" ~ this is the standard size for all of my wide banners. This size, when used in combination with the "Shrink to Fit" option when uploading a blog is how you can achieve the best fit for your blog. Playing with both of these settings in different combinations will help you achieve the best look.
10. To check your blog width, click on the "Adjust widths" link in the far left link list...
11. In case of my sample blog in this tutorial the blog is set to 860 pixels wide...
12. So I'll jot this number down and return to the "Advanced" area by clicking on that link again...
13. Now, we can change that "900" to "860" as shown in the example below...
14. And preview the changes in the preview area below to see how the changes have taken affect...
15. In the example above it appears the banner has not moved. This is common and you may need to play around with the number a bit until you begin to see the results you're looking for ~ you can see a few examples of making changes in the screen shots below...
:-----In this example the number is too small so the banner is cut off-----:
:-----In this example the number is too big so the banner is still sitting to the left-----:
:-----In this example the number is just perfect & the banner is centered-----:
16. Now that you have your banner code in place and the image is situated just where you want it, click the "Apply to Blog" button to save your changes...
That's it! You can now click on the "View Blog" link to view your blog and centered banner. Remember to use this tutorial in combination with my "How to Install a Blog Header" to find the right adjustments and fit for your own blog.
Enjoy~
and for a layout up to 1050 pixels wide?
ReplyDeletethanks
Thanks for your comment Roberta ~ I have my test blog set at 1050px and the code to center the banner is set at 900px so no need to adjust the number ofr a wider blog.
Delete♥Sharon
Sharon,
ReplyDeleteFirst off, I love the colors you use = insta-subbed. Second, I wanted to thank you and tell you that after two failed tutorials, this worked like a charm. 650 was my magic number, but my blog looks so much better now. I invite you to come check out my blog.
It's under construction until the end of the weekend; but I think you will enjoy the painting I have up in the meantime.
Peace,
Bunneah
http://bunneahmunkeah.blogspot.com
Ah I'm so happy the tutorial worked for you ~ super! I'm not sure what happened to this comment as it seemed to have gotten lost for awhile but I sure do appreciate it Bunneah!
DeleteBest~
♥Sharon
Sharon, once again thank you for an awesome tutorial! My banner is centered now and I'm ready to blog my new adventures in our new 'old' house. Stop by and visit 'A House in Waterloo'.
ReplyDeleteOh, and the blog background design is b-e-a-u-t-i-f-u-l!!
http://ahouseinwaterloo.blogspot.com/
Love and Hugs,
Teresa
Ah so happy it helped Teresa ~ love the new digs too, really gorgeous! Good luck with the move ~ I detest moving but at least when it's done it's done. *smile*
Delete♥Sharon
thanks for the tutorials really helpful. my blogspot looks much better and personalized thanks to your lovely designs. however, I have a question How do you I change the header background to blend with the post background?
ReplyDeleteYou can check out my blog and see what I did wrong?
http://craftyartsydesigns.blogspot.com/
Hi Esveyde,
DeleteThanks for your comment. I create PNG headers to the backgrounds are clear and blend in with my theme backgrounds. You can find them listed in my Etsy shop at: www.plumroselane.etsy.com
Hope that helps~
♥Sharon
Hi! Firstly, your blog is so pretty! The design is lovely.
ReplyDeleteI have tried to use this tutorial, but my banner has still not moved! It is still sitting slightly to the left. Is there any way you could help me out?
http://talisbury.blogspot.com/
Thank you,
Rebecca
Thanks for your comment Rebecca ~ I've found this works with the Picture Window template so if you're using a different template then that may be interfering. If it were me, I would try changing over to that one otherwise it's tough to know what exactly is blocking the change.
DeleteHow to Set up & Adjust the Picture Window Template
Hope that helps~
♥Sharon
Thank you so much!
DeleteOh em gee you RrrrrrrOCK!!!
ReplyDeleteNow if I could just be a little more creative like some people!! Your blog gorg.eous!
Hi, thank you for sharing this tutorial. I had already designed by blog header but had forgotten how I had previously centralised it but found your tutorial which was so helpful,
ReplyDeleteI've also mentioned your blog and tutorial on my blog.
Thank you
Kate