How To Place Ad Banner Under Header of Blogger Mobile View

In this tutorial, I will explain how to place 300x250 ad banner under header of Blogger mobile view. The banner can be Google adsense ad, an affiliate program banner or a personal advert banner to promote your products and services. So, I expect you have saved the code for the banner somewhere.

You can increase your Adsense earnings by placing a 300x250 ad banner under your blog header section as explained in this post.

To get started, sign in to your Blogger account via www.blogger.com
==>  Go to your blog dashboard,click on "Template".
==> Click the settings icon under "Mobile", Select "Yes.............", choose "Custom" and Save.
==> Go back to "Template" > "Edit HTML"

==>Use CTRL F to find id='main' in the HTML

==> Edit showaddelement to yes and add maxwidgets='3' so it becomes similar to the code below:

<b:section class='main' id='main' maxwidgets='3' showaddelement='yes'>

==> Click "Save Template".

==> Go to "Layout' and you should now be able to add a gadget above the post area as seen in screenshot below.

==> Click the "add a gadget", select "HTML/Javascript"

==> Copy and paste your ad code in it and save.

==> Click the "edit" link next to the gadget

==> Click in the address bar of the gadget window and scroll to the end of the address as seen in the screenshot below:

Take note of the gadget id and close the window. In the screenshot above, the id is HTML1

==> Go to "Template" > "Edit HTML"

==> Use CTRL F to find the gadget id in your template
==> Add mobile='yes' to it so it becomes similar to the code below

<b:widget id='HTML1' locked='false' mobile='yes' title='' type='HTML'>

==> Click "Save Template"

==> Use CTRL F to find ]]></b:skin>

==> Paste the code below, directly above the ]]></b:skin>

#HTML1{
display : none;
}

@media all and (max-width: 768px)  {

#HTML1{
display : block;
}

}

Replace the gadget id with yours.
Click 'Save Template"

View your blog on mobile phone and you should see the banner displayed under the header.

I hope this works for you.

NB: If you set it to mobile='yes', it will be giving you errors while saving arrangements in the layout section.

If you need help placing Google ads on your blog, contact me. I will only charge you a token. 

Share :