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.
Wow! I've been seeing error when saving, never knew its because of gadgets I set to mobile no. Thanks for this boss. Its an eye opener. Will def implement this asap.
ReplyDeleteI want the ad block to only display on mobile template so I set it to mobile='only'
ReplyDeleteIf you set it to mobile only, you will not be able to re arrange your gadgets. Error message will always be displayed whenever you want to save via layout
DeleteI just did!and it's displaying on mobile.i don't have to pay anyone to do it for me!yaaaay!!
ReplyDeleteThanks bro
Bolateethole.blogspot.com
I have the Id to be adsense1 and mobile =yes. given me error what should do bros
ReplyDeletehow did u finally do it
DeleteThis is very informative.
ReplyDeleteJide, you have taken over as the main source of infoTech source. congratulations for your good work to humanity
Check for us here
This comment has been removed by the author.
ReplyDeleteWhen I tried saving the template it says- More than one section was found with id: main. Section IDs should be unique.Please what could be happening?
ReplyDeletenice, i think its the best cus it help increase clicks and that what everyone needs
ReplyDeletenice one bro, keep it up
ReplyDeleteits working for m. what you need is basic html and css knowledge to do it.
ReplyDeleteJide kudos to you
Bro Jide,
ReplyDeleteI think my template bears that apartment already or can one still add them?
I need know how you inserted those related post thumbnails above post, its really attractive.
Check out my blog via your smartphone http://www.loadedjaka.blogspot.com
Thanks Ogbonge baba. Now I have a 468*60 adsense ad below the header section of my blog. Now I want to see if that's not visible enough.
ReplyDeletethough it worked but this codes are shoeing at the top
ReplyDelete#HTML1{ display : none; } @media all and (max-width: 768) { #HTML{ display : block; } } how do i fix that?
I hope you added the code directly above ]]>?
DeleteGreetings bro.. Thanks for taking your time to write articles which are favourable to others.. God bless you.. even people who are not programing oriented can now play with codes.... please need to know to put drop down navbar ir drop down menus in blog mobile view... Thanks in advance
ReplyDeletehelllo are you using the blogger mobile template or a custom template? Let me know so that i can help you with some suggestions
DeleteI couldn't find ]]> in my template
ReplyDeletewww.xontechng.com
I really found this post very helpful...most especially the comment about the error issue.....The issue of arranging and saving a gadget in blogger after enabling mobile='yes' give most bloggers problem. Most of keep changing their templates. Only few realize it because of the of the mobile='yes'. A friend of mine once has this issue. he spent days and nights on google trying to find solution. I told him and he was happy to fix it.
ReplyDeleteThis post on adding banner under blogger mobile view is so timely. Many bloggers have been asking me how to do it. I keep explaining and repeating myself over and over again. But now it just for me to copy this link and always refer them to it.
www.tetlomall.com
Good I'll go give it a try
ReplyDeleteNice one Jide. that is what am using on my blog ans it is very beautiful. See it here
ReplyDeleteThanks for the info. I successfully added a mobile='yes' tag to a sidebar widget which now appears at the bottom of my mobile view. However, the symbol "x" now appears under the pages tab (above the main text) on all of my blog pages. Any idea where that comes from or how to get rid of it?
ReplyDeleteThanks for this infp
ReplyDeleteHi , I tried this code and its working great.But I would like to place my ad above the header. Please guide me where to add this code.TIA
ReplyDeleteboss..... i duff my hat for u....God bless ur hutsle
ReplyDeletethanks jide it worked perfectly for me
ReplyDeletethanks...it worked
ReplyDelete