About   All Tips   Tips by Category   Tips by Ability   Help!

How To Center Ads and Gadgets Above Your Header

Have you ever tried adding a banner advertisement above your header? On most templates, this area is left-aligned. An left aligned ad (or any gadget) that site above a centered header can be a bit of an eyesore. What's a blogger to do?????

Turns out it's not that difficult to center gadgets in that area. Here's how to do it:

1. Take a look at the html code for the gadget/ad. Add <center> to the very beginning and </center> to the very end. Add the gadget to your blog and move it above the header. Preview. If it's centered, poof! You're done! If it isn't, leave the gadget there so that you can experiment with it and proceed to step 2.

2. If you have a new Blogger template, skip this step and proceed to step 3 below. If you have an older template, click here to visit Blog Sentral. Follow the tip exactly. Hooray for a centered top gadget!

3. Click here to visit Blog Sentral. You'll need to scroll down and copy the snippet of code that will work for your blog. Which code you copy will depend upon how you installed your header. All you're doing on this site is copying the code. DO NOT OPEN YOUR TEMPLATE! Once you've copied the code, come back here and continue with step 4.

4. Go to your blog and click on Design in the upper right corner.

5. Click on Customize (on the left).

6. Click on Advanced, then scroll down and click on Add CSS.

7. Paste the code that you copied into the big white box. Preview. Hopefully, your gadget is now centered! The first time I did this, I thought that the gadget was not perfectly centered because it didn't appear to sit exactly in the middle above my header. Turned out, it was my header that wasn't perfectly centered. Click here for help with positioning your header. :)

Related Posts:
How To Center Your Header (New Templates)
How To Move Gadgets and Sidebar Items
How To Center Gadgets and Sidebar Items
Have you been helped by my tips? Consider sharing them with your readers by adding Sneaky Momma Blog Design to your blog list or by grabbing a button to display in your sidebar! 
Want to share this tip with others? I would be honored for you to do so by linking back to this post. Please do not copy and paste my words and images onto your blog/website. I work hard on my tips and want everything to remain here. Thank you for your cooperation! :)


Debra Howard said...

Great tutorial! Keep up the great work...you really are making a difference and you matter more than you know. May you be blessed above and beyond all you can ask or imagine. Praying for your business to prosper beyond all you can even dream girl.

Kris @ Driven by D├ęcor said...

Thanks for the great tip! I like to avoid editing my HTML code whenever possible and I love that this was something that I could try within the gadget (and it worked!).

Anil Kumar said...

nice computer tricks