Jul 17, 2017

How To Display Ad Banner in Mobile View Under Blogger Header

Displaying or placing  a 300x250 ad banner under header of Blogger mobile view is another way to make the Ads very visible to blog readers. Through this way, you can increase your Adsense earnings the more. 

You and I knows that, the more the visibility of adverts to readers, the more they have the chances to click through the adverts in other to find what they are looking for. I used to place other ads like Konga and some other personal adverts on my blogger header mobile view.

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 "Theme" > "Edit HTML"

==>Use CTRL F to find any of the lines of codes below in the HTML of blogger template

<b:section class='main' id='main'



==> 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 into it and save. 

==> Click "Save arrangement"

==> 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 to find the Gadget ID. 

For example if your Gadget ID is HTML5,

==> Then go to your blogger "Theme" again and click "Edit HTML" 

==> Use CTRL F to find the gadget id in your template

==> Add mobile='yes' to the gadget codes so it now looks similar to the code below 

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

==> Click "Save Template"
Note that, if you set it to mobile='only' the ads will appear only on mobile view but it will be giving you error messages whenever you want to save the arrangement you made under layout section. So use the following method i provide below.

To Restrict your 300x250 Google Banner Ads to display on mobile view only, then do this.

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

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

display : none; 

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

Replace the gadget id with yours. 

==> Click "Save Template" 

That's all. Now view your blog on mobile and you should see your ad banner displayed under the header section of your blogger mobile view.

READ ALSO: How To Place Ad Banner Below Blogger Top Nav Pages Desktop View

Use the comment box below to let us know if this worked for you or if you need more help

Don't forget to subscribe through the subscription box below or here.


Click these buttons to follow LawrenceIfeanyi:

No comments:

Feel free to share your comment(s) via comment box below.

Sign in to comment "anonymously" without entering verification text.

Want to be notified when I reply your comment? Tick the "Notify Me" box.

We will try to response your comment(s) as soon as possible.

If your comment is unrelated to this post, please drop it through the Contact Us page HERE .

Please DON'T spam.


Post a Comment

Designed by: Nwaonuma Ifeanyi.
Phone No.: (+2348037343364)