How To Make 728 by 90 Ad Banner Show At Center Of Blogger Blog Header


By default, if you add a 728x90 ad banner to a Blogspot blog's header, it will appear by the left hand side. You can easily make it to appear at the center of your blog's header but how you will do that, depends on how you've added the banner to your blog.

If you've added it using the Blogger HTML/Javascript gadget, you can wrap up the banner code with the HTML <center> Tag i.e add <center> at the beginning of the code and </center> at the end of the banner code.

i.e

<center>

BANNER CODE HERE

</center>


center ad banner in blogger header



If you've added the banner using the Blogger Image widget, you will have to get the ID of the widget and use the CSS text-align property to make it appear at the center.


get Blogger widget id


Read how to get Blogger widget ID here.

Once you have the widget's ID, you can edit the css below, copy and paste in the css section of your Blogger blog.

#Image1 {
text-align:center;
}

To add the css to your blog's html,

==> Go to "Template" > "Customize" > "Advanced" > "Add CSS". Click on it.
==> A box will appear by the right hand side. Copy and paste the code in it
==> Click "Apply to Blog" by the top right hand corner.

That's all.


NB : The HTML Center Element (<center>) is not supported in HTML5. So, if it doesn't work for you or it stops working for you later, you can try using the CSS text-align property as explained above.


Recommended :   How To Place "Advertise Here" Banner on Blogger blog.




Comments

James said…
Hello Jide thanks for sharing. However, i've been wondering how you were able to implement the above one under the nav bar and the one after post paragraph in mobile view. See screenshots Here and Here
Yes, it worked for me. Check it out here www.entertaintechnews.com
Thanks alot Engr Jide
Anonymous said…
Nice, very informative I will try in on my blog techconstant.com