In continuation of the series of tutorials on the customization of Blogger custom mobile view, I have decided to share with you today, how to place advertisement on the mobile view of your blogspot blog.
Placing advert banners of sites, events, businesses etc on the mobile view of your blog can be generating extra income for you online especially if you are able to get advertisers that will be willing to market their product and services to mobile users.
Some advertisers will even be more willing to buy advert spaces on your blog if you let them know that their adverts will display both on the mobile and desktop view of your blog.
How To Get Started
==> Learn how to generate banners online here if you don't have your ad banner handy. Just make sure the width of your ad banner is not more than 300px. 300x50 and 300x250 ad banners are recommended for mobile sites.
Now, let me assume you've saved your ad banner on your PC. You can add it to your Blogger blog using the "Image" gadget or the "HTML/Javascript" gadget.
==> Log in to your Blogger dashboard, go to "Layout" and click on "Add a gadget"
*** If you want it to appear at the top of your mobile view, add the gadget to the header section. If you want it down the mobile view, add it to the sidebar or footer section.
Using HTML/Javascript Gadget
If you want to use the "HTML/Javascript" gadget (recommended), upload your banner somewhere, copy the image code and paste it in the gadget. The code for your banner should be similar to the one below:
<a href="http://www.ogbongeblog.com/p/advertise.html" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijV1u_jBXzSsnf863y4iL91n_coixaHLapXg71FbeZ2huV7aLBk3Q-114Vxw0rsGnbJFqUSAWRxjEs-Ftb67idIUd2A219ouEPhPkfgZnq_Xvxz111y6C2zD74t1u-9ZnKc-z8_z-QED4R/s1600/advertise+here.png" width="300px" height="250px"/></a>
You can read how to use Blogger.com to host your banners here.
Using "Image" Gadget
If you want to use the "Image" gadget, browse your computer for the banner, upload it, then add the URL of where it will link to in the space provided.
Ensure the banner fits in perfectly into the section you are adding it to. i.e do not add 300x50 ad banner to your sidebar which is just 120px in width.
What Next?
==> After adding the banner to your blog, click the "edit" link under "HTML" or "Image" gadget. Get the widget ID (eg HTML10 or Image1) from the URL bar as seen in the screenshot below and take note of it.
==> Go to "Template". Under "Mobile", select "Yes. Show mobile template on mobile devices" and choose "Custom" from the "choose mobile template" dropdown box.
==> Save your settings.
Now, we need to activate the Banner to be displayed on the Blogger mobile view.
==> Go to "Template" > "Edit HTML"
==> Click on the "Jump to Widget" tab and click on the widgetID of the banner you added to your blog earlier. This will take you to the code of the widget in your HTML.
==> Add mobile='yes' to the line of code as seen in the screenshot below:
==> SAVE your template.
View the mobile view of your blog by adding ?m=1 to your blog address eg www.ogbongeblog.com?m=1 and you should see the Banner been displayed on the mobile view.
NOTE
If you want it to display ONLY on the mobile view and not on the desktop view, use mobile='only' but if you do this, you will keep seeing an error message anytime you want to re-arrange the widgets on your blog layout.
Please, relay your comments, contribution etc via the comment form below.
Don't forget to share this with your friends.
You might be interested in "how to place Advertise Here banners on Blogspot blogs" and you can read more Blogger tips here.
Placing advert banners of sites, events, businesses etc on the mobile view of your blog can be generating extra income for you online especially if you are able to get advertisers that will be willing to market their product and services to mobile users.
Some advertisers will even be more willing to buy advert spaces on your blog if you let them know that their adverts will display both on the mobile and desktop view of your blog.
How To Get Started
==> Learn how to generate banners online here if you don't have your ad banner handy. Just make sure the width of your ad banner is not more than 300px. 300x50 and 300x250 ad banners are recommended for mobile sites.
Now, let me assume you've saved your ad banner on your PC. You can add it to your Blogger blog using the "Image" gadget or the "HTML/Javascript" gadget.
==> Log in to your Blogger dashboard, go to "Layout" and click on "Add a gadget"
*** If you want it to appear at the top of your mobile view, add the gadget to the header section. If you want it down the mobile view, add it to the sidebar or footer section.
Using HTML/Javascript Gadget
If you want to use the "HTML/Javascript" gadget (recommended), upload your banner somewhere, copy the image code and paste it in the gadget. The code for your banner should be similar to the one below:
<a href="http://www.ogbongeblog.com/p/advertise.html" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijV1u_jBXzSsnf863y4iL91n_coixaHLapXg71FbeZ2huV7aLBk3Q-114Vxw0rsGnbJFqUSAWRxjEs-Ftb67idIUd2A219ouEPhPkfgZnq_Xvxz111y6C2zD74t1u-9ZnKc-z8_z-QED4R/s1600/advertise+here.png" width="300px" height="250px"/></a>
You can read how to use Blogger.com to host your banners here.
Using "Image" Gadget
If you want to use the "Image" gadget, browse your computer for the banner, upload it, then add the URL of where it will link to in the space provided.
Ensure the banner fits in perfectly into the section you are adding it to. i.e do not add 300x50 ad banner to your sidebar which is just 120px in width.
What Next?
==> After adding the banner to your blog, click the "edit" link under "HTML" or "Image" gadget. Get the widget ID (eg HTML10 or Image1) from the URL bar as seen in the screenshot below and take note of it.
==> Go to "Template". Under "Mobile", select "Yes. Show mobile template on mobile devices" and choose "Custom" from the "choose mobile template" dropdown box.
==> Save your settings.
Now, we need to activate the Banner to be displayed on the Blogger mobile view.
==> Go to "Template" > "Edit HTML"
==> Click on the "Jump to Widget" tab and click on the widgetID of the banner you added to your blog earlier. This will take you to the code of the widget in your HTML.
==> Add mobile='yes' to the line of code as seen in the screenshot below:
==> SAVE your template.
View the mobile view of your blog by adding ?m=1 to your blog address eg www.ogbongeblog.com?m=1 and you should see the Banner been displayed on the mobile view.
NOTE
If you want it to display ONLY on the mobile view and not on the desktop view, use mobile='only' but if you do this, you will keep seeing an error message anytime you want to re-arrange the widgets on your blog layout.
Please, relay your comments, contribution etc via the comment form below.
Don't forget to share this with your friends.
You might be interested in "how to place Advertise Here banners on Blogspot blogs" and you can read more Blogger tips here.
Thanks Jide. Will try it when on PC. Guess I can't do this on my phone. God bless you.
ReplyDeleteEasier when done on PC
DeleteHappy sunday bro..... Can I use my blackberry to Do it.... My system has fault
ReplyDeleteWell, you can try it but I doubt if you can with a BB
Deleteplease how can i scout for advetisers to advertise in my blog
ReplyDeleteOn popular blog and websites. You can also try buysellads.com. You should also be posting about it on social networks
DeleteYipeeee, so informative. I followed the steps n ive done it right but pls how can I iremove it from my web version cos I now ve 2 same banners on the web version.
ReplyDeletewww.trendyrammy.com
if you don't want it to appear on the web version, use mobile='only'
DeleteI have a problem, my blog doesn't change to Mobile view when i choose
ReplyDelete"Yes. Show mobile template on mobile devices" and choose "Custom" from the "choose mobile template" dropdown box, could my template be the problem? the only way it can change to mobile view is if i choose one of bloggers default mobile view. what can i do
www.JinduBlog.com
Problem probably with your template. Might be using an old third party template. I can fix it for you though..
DeleteHi jide, I'm having problm wit my Edit html section of my blog template. Whenever I edit wit new script, d new script won't just work on my blog though I've tried to use another template maybe that will help bt yet it just won't work.
ReplyDeleteI don't understand what you mean by editing with new script. If you want to add any script to the body of your blog in your HTML, you must parse it before pasting it in your HTML. You can use www.freehtmlparser.blogspot.com
DeleteI mean html codes nt ad codes [like the one u explained in this post]. Thanks for ur response
ReplyDeleteJide please drop a tutorial of how to make "like us on facebook" and "follow us on twitter" appear on mobile view.
ReplyDeleteJide how do i add the image gadget to the header section. You didnt indicate that. Though the footer section is working.
ReplyDeletethats really great, will help me to get going,
ReplyDeletecheckout platinumdaily.blogspot.com for all the breaking and interesting news around you. At platinumdaily.blogspot.com, we explore into the most trusted and certified news casters world wide to gather all the informations you need in just one place.
Pls i want u to reply...
ReplyDeleteCan i use an i pad for blogging?
Pls I dont understand how to put dis mtn advert on my blog and d advert should just be random... mimdrive.blogspot.com dts my blog...tnx
ReplyDeleteIt work for me. Tnx mentor, buh pls how can can i centralized my advert on Web view?
ReplyDeleteVictoreke.blogspot.com.ng
Victor ekes, visit my blog and learn how to centralized advert on web view www.nairaloadit.blogspot.com click on the category select blogging tips and see how to do so keep enjoying trick from nairaloadit.blogspot.com.ng
Delete