How to add Adsense or any other Ad code in various places in Blogger blog

Adsense as well as any other ad codes can be added in various positions in the blog and some positions may bring more revenue than others and it totally depends on your content and its layout.These ad codes are usually javascript codes.

The various positions where Adsense and ad codes can be added are:

1. Go to Layout->Page Elements

Sidebar Add Gadget

2. Then in the sidebar you see an Add Gadget link, click on this link.

Add GadgetAdd Gadget

3a. For Adsense add the Adsense Gadget and then configure the adsense ad.

Configure Adsense
Configuring Adsense

3b. For any other Ad code add the Html/Javascript Gadget and add your Ad Code in the following space

Adding Ad Code
Adding Ad Code

Your ad is ready. Now you can place it above and below gadgets just by dragging it and placing it accordingly.

Above and below Blog Posts:

The ad code or adsense code can be placed above and below the blog posts section just by dragging the gadget from the sidebar to place it above or below the blog posts section.

Ad Code above blog posts
Dragging Gadget to place it Above Posts

Inside The blog Post:

Ad codes can also be embedded inside blog posts. So you will see ads inside your blogpost. This sometimes has more revenue potential than others because it is next to the content. And for each blog post there will be an individual ad. Therefore, more number of ads and hence more chance of earning revenue.

1. Go to Layout->Edit Html
2. Download Full Template (This is to backup your template)
3. Check the Expand Widget Templates
4. Convert Your Ad Code as shown in Ad Code converter
5. Now Find this piece of code


6. Just above this code paste this code.

a. To display ads on the left side of the content

<div class=’ad-code-inside- blogpost’ style=’float:left;’>
Your Ad code here

Ad Code Embedded in blog Posts(left)
Ad code on the left of the post

b. To display ads on the right of the content replace ‘float:left’ with ‘float:right’

Ad Code Embedded in blog Posts(Right)
Ad code on the Right of post

c. To display ads above the content replace ‘float:left’ with ‘float:none’

Ad Code Embedded in blog Posts(above)
Ad code above the post

d. Lastly, to display ads below the content then add the code after this code instead of adding before this code.



You can also add border as well as background to these ads by just editing the style using ‘style=’float:left;’by adding border and background tags.

7. Save Template

  • bloggeronline

    thanks friend
    Nice tips

  • bloggodown

    Take a look at my other posts, it might help you 🙂

  • Nice Tutorial ^_^

    Thanks .

  • Hello Gautam,Thanks for sharing these tips.Can i know that as per google adsense, only 3 ads should be shown per page.So,if we also show the ads in blog posts even having 3 ads at sidebar and other area’s (added using html/javascript widget in blogger) which are showing up in homepage .So,adding ads in blog posts increase showing up more than 3 ads in a page as per google adsense we cant’ show in that way,can we add add them in that way or can’t.please i need your help.. 🙂

  • Thanks for the tips!!

  • A really informative post Guatam. I went through a process of researching the best possible way I can advertise Adsense on my Blogspot blog. The main problem I think many of us experience is not only getting conversion clicks but also putting off regular visitors from coming to your blog; as lets be honest, nobody likes advertisements. Thanks for the read!

  • rndtechnologies786

    Nice view.

  • Useful tips Gautam,Thanks.