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='only', 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.
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='only', 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.
0 Response to "How To Place Ad Banner Under Header of Blogger Mobile View"
Post a Comment