Customize Mobile Template in Blogger

This is my first article related to blogger mobile template on this blog. In this post series we will be talking about some general customization of custom mobile templates if you are using official templates for your blog.
Those of you who are (using custom templates) not using official templates, you might as well as find this article useful to display custom widgets on the mobile version if you are using custom. Such as third party commenting system, third party ads etc.

There must not be so much problem on implementing and checking these techniques because blogger's mobile detection software detects a large range of mobiles. Though, I have found it not working in Opera modified (un-official) versions due to the proxy being used in them.

Display Custom Widgets in Mobile Template

You can customize the display of particular widget in the mobile version of blogger, by default Google displays following widgets.

Header
Blog
Profile
PageList (drop down menu of navigation page links)
AdSense (if applied)
Attribution (Powered by blogger)

Follow these simple steps to display custom widgets within the mobile version of your blogspot blog.

First, search for the name of the gadget you want to be appeared in the mobile version, see the image below.

You may not find the widget code with name, but by doing this you will be sure about the type of widget. The type of Label is Label itself.
If you have installed multiple label widgets inside your template then you should first get sure before proceeding. In this case it is 'label1', because there is no other label widget installed in my template. It is same in case of HTML/JavaScript widget. 

Now, proceed to HTML editor of your blogger template.[Click on Template on the left side and Edit HTML]
You will get a warning message window, click on Proceed.

Now search for the id or name of the widget which you want to be appeared in the mobile version in our case this is 'Label'
But remember that you could find the word Label for several more times inside a template. But the exact code we are looking looks like below.

Now you just need to add mobile='yes' parameter somewhere inside the HTML element of the respective widget, which will look something like below.

To show the gadget only on the mobile template and not to desktop users, add mobile='only' to the code, like this:

<b:widget id='PlusBadge1' locked='false' mobile='only' title='Google+ Badge' type='PlusBadge'/>

You just need to add it like this and Save the template.

Using this method you can show custom HTML widgets too, you could show custom author profile, custom search box, custom email subscription box in your mobile version of blogger. You just need to find the widget ID and add mobile='yes' parameter inside the widget element.

If your blog is not showing your custom template and rather showing a default template then follow these steps,
Go to the Template section from the left side of your dashboard and click on the grip icon below the mobile preview of your template as below,

Now, select Custom from the drop down list of mobile templates as below,

Hope this helps. In the next post we will be talking more about the customization of template for mobile. Stay subscribed.

Keep Visiting for More Articles and Tutorials. :) Like our Official Page for More Updates...