How to Display Ads in Post (Mobile Version)

How to Display Ads in Post (Mobile Version)

In previous article, I have shared on how you can edit your blog post in order to display ads block at the beginning and end of an article. So, for today I am going to continue on how to display ads in post for mobile views.

Now days, user are most likely using their smart phone, mobile or tablet to surf and browse on the internet. Some times, ads in a blog is set to serve user who are reached to the blog by using desktop and laptop only. So, people who are surfing using mobile device will not be displaying ads.

So here are few simple step on how to display ads in post for mobile:

Step 1:
Before you proceed with editing your blog HTML codes, please backup your code for safety precaution. In order to display ads for mobile, you need to enable mobile view for your blog. Login to your blogger dashboard, go to Template link from the left side of your dashboard and click on Gear icon.

Step 2
A popup for mobile template will be displayed, click checked on "Yes......" and set your mobile template to Custom and save the setting

Step 3
When you save the setting for mobile template, you will be redirect to the previous page and you need to click on Edit HTML to start the process. Once you are in the HTML editor, press Ctrl+F using your keyboard and type id='mobile-post' var='post' within the search box and hit Enter button.

Step 4
The text that searched before will be highlighted with cream color and your ads code will be placed within that section. Click on black arrow on the left side to expand the section.

Step 5
This step is used to display ads block at the beginning of an article. When the section expanded, scroll down and search for a line with text <div class='post-header-line-1'/>, your ads code will be placed just after that line. Before placing the codes please check your ads code language. If it is in JavaScript, please convert it into HTML format. You can use this site to convert, eBlog Template. The green shade on the following picture is the ads code area, and if you want to center the ads block, just place HTML tag <center><div> at the start and at the end of ads code. Refer the following picture for correct implementation.

Step 6
This step is used to display ads block at the end of an article. When you finished on previous step, scroll down a little bit and find the line with <!-- clear for photos floats --> and your ads code will be place just after this line. Some of instruction from the previous step can be used to convert ads code and to center the ads block. Save and display your blog.

When you finish setting up your ads, view your blog to confirm the ads position. If you are using a desktop or a laptop, then how you are going to view it on mobile view? That is a good question isn't it? So here is the trick, when your blog was loaded in browser, add /?m=1 right after your blog address in the address bar and press enter. For example: http://www.yourblog.com/?m=1. A mobile view version of your blog will be displayed, and go to any of your blog post to check the ads. Good luck!