Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Friday, February 25, 2011

Centering Blogger Adsense

I have received a question from a reader (tomjhappy) on how one can make all the AdSense ads in blogger to be centered. Good question. Simple answer, you'd enjoy this mate. By default, when you add an Adsense Ad to Blogger, it will be aligned to left.


With this simple trick, you can center all your Adsense ads in one simple easy step. Yes, all of them.



If you're using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

If you're using the new Blogger interface:
Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog. 
.AdSense, .inline-ad{
text-align: center;
}
That will be all people, have fun!

45 comments:

  1. Awesome! Works great - thanks man

    http://bachelor2011.blogspot.com/

    ReplyDelete
  2. @Reality Me: Happy to help mate. Cheers.

    ReplyDelete
  3. @kiran: You're welcome. Cheers.

    ReplyDelete
  4. iam searched for this long time,thanks

    ReplyDelete
  5. @Raj: You're welcome mate. Cheers.

    ReplyDelete
  6. Been looking for a CSS code instead of doing each individual..Nice!

    ReplyDelete
  7. @Eric: Not only that, you can easily the remove the CSS code if anything goes wrong, and everything will be back to the way it was before. Cheers.

    ReplyDelete
  8. Can you change the background colour and text colour of the ads?? Is the only thing stopping me from returning the ads to my blog... Took them off because of lack of customisation

    ReplyDelete
    Replies
    1. Whoah, I dare not speak of AdSense. You better be asking the pros, here:
      Adsense Help Forum

      Delete
    2. Ok hun... sucks that they let you customise it all in standard views, but go dynamic and you can only have those white ads >.<

      Delete
  9. does anyone know how do you centre the linkwithin gadget?

    ReplyDelete
    Replies
    1. Hi Aimee,

      It depends on the kind of template that you're using. What's your blog's address?

      Cheers :)

      Delete
  10. WoW, Thanks for the Info... I have just applied this to my blog - www.stevenbergy.com.ng and my ads are now showing the way i want.

    ReplyDelete
  11. Wow, thank you so much! I have 25 blogs in counting marketing one product on each blog and the Adsense ads are really important in the income process for me.

    ReplyDelete
  12. I appreciate this so much, Yoga! I have tried numerous other 'helps' and yours was the only one that worked and it was sooooo easy! Thanks :)

    ReplyDelete
    Replies
    1. Glad it worked Jamie :) And thanks for dropping some words here, means a lot :)

      Cheers and God bless!

      Delete
  13. My Question: The inline-ad is showed below the comment form by default, just like it is shown on this page. I want't to show this inline-ad just before the point where comments start appearing. Like, in this order:

    1) End of Post
    2)Adsense default inline-ad. then,
    3)Comments & replys. then,
    4)comment form

    How can I do this in new blogger template?

    ReplyDelete
    Replies
    1. Hi Gaurav,

      Sorry for the late reply. Wether or not you can place your ad portion above your comment form depends on the kind of template you're using. Let's have a look at your blog. What's your blog's address?

      Delete
  14. Thanks man you helped me so mutch, thanks!

    ReplyDelete
  15. I have been searching for the answer to this for ages! Thanks so much. Now if I can find a way to put a line under the inline ad of the front page I will be very happy!

    http://www.802101.com/

    ReplyDelete
    Replies
    1. Hi there,

      See if this helps

      #AdSense1{
      border-bottom: 1px solid black !important;
      }

      Cheers..

      Delete
  16. I have used the Blogger adsense gadgets but now I don't see any ads on my blog but I can't see how many adsense gadget ads I have placed or where I can remove them. Please help. This Dynamic view is really killing my ad revenue stream because when I look at the site through Apple Safari no ads anywhere. I am wondering if I hit the limit or something.


    I used your Google sidebar CSS code which worked! Thanks!


    http://www.toxicstudioinc.com/

    ReplyDelete
  17. I'm not an AdSense expert but the last thing I read was you can have a maximum of 3 types of ads in a page, as in a max of 3 text ads and 3 image ads. Something like this. You might wanna run this by the Adsense Help Forum just to be sure.

    As for your ads not appearing in DV templates, give this a try:
    http://www.southernspeakers.net/2013/07/finally-fix-for-blogger-dynamic-view.html

    ReplyDelete
  18. Hi Yoga boy , thank you so much , was looking for this only :)
    Now I wanted to know how to get the image of my html gadget in center , heading of the gadget is Coupons ?
    http://glittery-dreams.blogspot.com is my blog
    I'm new to blogging and your css codes have helped me a lot , really appreciate your awesome work.
    Thank you

    ReplyDelete
    Replies
    1. Hi Zenia,

      Glad you find the posts helpful. Here, this should center the element in your Coupons HTML gadget:


      #ci_CouponsClickParentIframe{
      display: block !important;
      margin-left: auto !important;
      margin-right: auto !important;
      }

      Cheers..

      Delete
    2. Thank you soo much, You are too good :)

      One more help I have been struggling and haven't found a way to get horizontal bars above and below my pages tab (of home about & contact thing ) without the vertical bars in between them . You have a tutorial for how to get vertical bars but i want to remove those vertical bars . And also how can I get small icon images of my choice under the older post and newer post buttons ?
      You have been such a wonderful help with all your tutorials, thank you thank you thank you .

      Delete
    3. Let's handle one thing at a time. When you said bars, were you referring to borders? See if this is what you're looking for:

      #PageList1 ul{
      border: 1px solid black;
      width: 600px !important;
      display: block !important;
      margin-left: auto !important;
      margin-right: auto !important;
      z-index: 100 !important;
      }

      Delete
    4. I used this code but its like a block around the pages gadget, I just want horizontal bars. like this http://veronabrit.blogspot.com/
      or http://www.stephaniesterjovski.com/, if something like this is possible to do with css code ?

      Delete
    5. Right.. See if this works:

      #PageList1 ul{
      border-top: 1px solid black;
      border-bottom: 1px solid black;
      width: 600px !important;
      display: block !important;
      margin-left: auto !important;
      margin-right: auto !important;
      z-index: 100 !important;
      }

      Delete
    6. Yes thank you :) it did work perfectly . U are genius :)

      Delete
  19. Ugh. You ROCK. This was awesome, and so easy. THANK YOU!

    Sam @ DIY Huntress

    ReplyDelete
  20. Wow! It's sooo easy when you know how, lol! ;) Thank you :)

    ReplyDelete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.