Showing posts with label Show In Mobile Version. Show all posts
Showing posts with label Show In Mobile Version. Show all posts

Adding More Elements In Mobile Blogger

How to make elements [advertisements [including Adsense], html / java widgets etc] show up in the mobile version of your Blogger template. This will be a very quick post. If you have looked at the mobile version of your Blogger template and wondered why none of your widgets or advertisements are showing up like they are in the normal web based version, this post will show you how to get them to appear.

First off, go to the "Theme" tab in the sidebar and click it. At the top of the page click the arrow next to the orange "Customise" button [see picture below].


edit_m1


A drop down menu will appear. Click "Edit HTML". Find the widget or advertisement that you want to appear in the mobile version of your blog.

If you don't know how to do this, you can either find it manually, or you can click the 4 square symbol on the right of the page. See the picture below. A drop down menu will appear and you can then find and click the widget you want to edit.


finding_widgets_blogger_blogspot


Once that is achieved you should add the following code to your widget [pictured below].


add_mobile_elements_blogspot_website



As seen in the image above, all you have to do is add the code: mobile="yes" somewhere on the line that is underlined in the picture. I usually add it just after locked='false'.

And that's it. Once you have added the mobile="yes" code in the right location press save. You can then go to the mobile theme preview and take a look. Your blogger mobile theme should now be showing the widget with the added code in the mobile version of your blog. You can then just repeat this process for any / all the widgets you want to show in the mobile version of your blog / website. Hope this helped you out. Until the next time amigo.

If you have any questions just leave a comment.

How To Get Adsense In Mobile Blogger

Have you ever noticed that your Blogspot blog which you have installed Google Adsense on by using widgets, either by using your own code manually and using the "HTML/JavaScript" widget or the automatic Adsense widget doesn't actually show any Adsense at all when you check out the mobile version of your blog..I've been working on one of my blogs lately that has Adsense running and noticed that I'm getting some mobile traffic. So when I follow the links in Blogger Stats and see what the visitor sees there is no Adsense what so ever!.

Needless to say, but I'll remind you anyway, if no ads are showing when you are getting mobile visitors then you are losing out on potential clicks. This is quite misleading in a way because if you go to your Adsense account and try to make a mobile ad it tells you to just use the normal contextual ads because those ads are apparently advanced enough to display on most mobile devices. But every time I have tried to view the ads in mobile view they don't show. And since finding this error I have been visiting my site with a whole host of different devices to see if Adsense shows but it does not.

So how do you fix this and get Adsense to show up..It's easy. All we need to do is add a converted for Blogger Adsense Code straight to the coding HTML of your blog.

So first go and grab the Adsense ad code from your Adsense account that you want to add to your site.

Head over to any website that can convert your Adsense code so it's compatible with Bloggers coding. http://adsense-convert.blogspot.com (Click convert just once then copy the code.)

Now go to Blogger and choose the website that you want to add the Adsense to and go to it's layout page. Click Template in the Blogger sidebar/ then Edit HTML.

Use your browsers search facility and find the code <data:post.body/> within the blogs HTML.

Now place your converted Adsense code directly underneath <data:post.body/> if you want the Ad to show at the bottom of your post, or directly above <data:post.body/> if you want the Ad to show at the top of the post. Once the code is added press save. If the spacing looks funny adjust as you see fit. Example: <br /> to add some spacing or Div Align - Div Float etc depending on what position you want your ad to be positioned in. Press save and that's it. Now your Adsense will show when someone visits your site using a mobile device. One of my sites below showing Adsense at the bottom of the post in mobile view.


Please Note: Depending on what Blogger template you are using there may be more than one <data:post.body/>. So it's just a case of trying the code with each <data:post.body/> (adding the adsense code under or above) until you find the correct <data:post.body/> where the Ad shows up where you want it to. There's usually two or three different <data:post.body/> these days with a lot of the newer templates.

Always check the homepage when you have added the code, not just a single post, because if it's the wrong <data:post.body/> the Ad can show on the homepage and it can make things look a real mess. If this happens just move the code to the next <data:post.body/> and re-check homepage and single posts to confirm the code is in the right location and all is well.

If you want to check that the Adsense Ad is showing up in the mobile version of your blog just add ?m=1 to the end of the domain name.

Example: http://ill-help-u.blogspot.com/?m=1

From there just click a post and it will also show you what a single post looks like in it's mobile version.

Hope this helped you out.


Popular Posts