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.