Southern Listeners

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

Friday, February 25, 2011

Centering Blogger Adsense

Spoken by at 6:02 AM
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!
Labels:

46 comments:

  1. BeautifulRosesFebruary 26, 2011 at 1:43 AM

    Awesome! Works great - thanks man

    http://bachelor2011.blogspot.com/

    ReplyDelete
  2. YoboyFebruary 26, 2011 at 6:47 AM

    @Reality Me: Happy to help mate. Cheers.

    ReplyDelete
  3. Saikiran PamanjiApril 13, 2011 at 1:00 AM

    Nice Solution .. Thanks

    ReplyDelete
  4. YoboyApril 13, 2011 at 3:52 AM

    @kiran: You're welcome. Cheers.

    ReplyDelete
  5. dharmarajarunApril 30, 2011 at 2:51 AM

    iam searched for this long time,thanks

    ReplyDelete
  6. YoboyApril 30, 2011 at 6:49 AM

    @Raj: You're welcome mate. Cheers.

    ReplyDelete
  7. EricAugust 13, 2011 at 10:19 AM

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

    ReplyDelete
  8. YoboyAugust 13, 2011 at 7:03 PM

    @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
  9. UnknownMarch 6, 2012 at 12:22 AM

    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. YoboyMarch 6, 2012 at 2:25 AM

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

      Delete
    2. UnknownMarch 6, 2012 at 4:34 AM

      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
  10. LucasNovember 3, 2012 at 2:02 AM

    Good!

    ReplyDelete
  11. AimeeJanuary 23, 2013 at 4:10 AM

    does anyone know how do you centre the linkwithin gadget?

    ReplyDelete
    Replies
    1. YoboyJanuary 24, 2013 at 4:04 PM

      Hi Aimee,

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

      Cheers :)

      Delete
  12. AnonymousMarch 3, 2013 at 10:51 AM

    Brilliant. Thank you. :D

    Kayleigh

    ReplyDelete
  13. Anna B.March 7, 2013 at 6:03 PM

    Thank you so much!

    ReplyDelete
  14. Aywhy93April 26, 2013 at 2:09 PM

    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
  15. UnknownJune 10, 2013 at 4:52 AM

    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
  16. JamieJune 25, 2013 at 11:37 AM

    This is great! Thank you!
    ~Jamie

    ReplyDelete
  17. Love Bakes Good CakesAugust 23, 2013 at 1:19 AM

    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. YoboyAugust 24, 2013 at 12:18 PM

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

      Cheers and God bless!

      Delete
  18. GauravSeptember 6, 2013 at 9:04 PM

    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. YoboySeptember 13, 2013 at 12:24 PM

      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
  19. KikocrxSeptember 12, 2013 at 1:21 AM

    Thanks man you helped me so mutch, thanks!

    ReplyDelete
  20. UnknownNovember 7, 2013 at 5:54 AM

    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. YoboyNovember 9, 2013 at 11:30 AM

      Hi there,

      See if this helps

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

      Cheers..

      Delete
  21. Kareem KingNovember 12, 2013 at 8:48 AM

    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
  22. YoboyNovember 17, 2013 at 2:51 PM

    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
  23. UnknownDecember 15, 2013 at 2:04 AM

    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. YoboyDecember 15, 2013 at 1:47 PM

      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. UnknownDecember 16, 2013 at 3:55 AM

      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. YoboyDecember 21, 2013 at 12:21 PM

      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. UnknownDecember 23, 2013 at 1:10 AM

      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. YoboyDecember 26, 2013 at 12:52 PM

      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. UnknownJanuary 2, 2014 at 3:51 AM

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

      Delete
  24. AnonymousApril 19, 2014 at 12:12 AM

    very nice you're my go to guy

    ReplyDelete
  25. NIcole BanensDecember 17, 2014 at 7:08 PM

    Still working perfect, thanks

    ReplyDelete
  26. UnknownMarch 29, 2015 at 12:20 AM

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

    Sam @ DIY Huntress

    ReplyDelete
  27. 80sMusicReMixesMay 9, 2015 at 3:04 PM

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

    ReplyDelete
  28. Scott M.May 27, 2017 at 10:32 AM

    It doesn't center the widget completely. It still sits to slightly to the left..

    ReplyDelete

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

Subscribe to: Post Comments (Atom)