Stuffs4share|Tech and other stuffs for shared: How to Customize Blogger Mobile Template

Most of bloggers have enabled the mobile template for Blogger platform. Having two different templates for both breads of readers who are accessing your blog from desktop as well as on mobile devices is a good thing. Mobile version and Desktop version template have their own benefits. There are lots of tutorials on this blog to customize your desktop template. This is first time when we are publishing about customization of Blogger mobile template. To understand Blogger template we should have to understand the Blogger mobile template default gadgets/ page elements. By default a Blogger mobile template have these following 6 gadgets/ page elements -

1. Header - shows blog title and description
2. Page List - shows a list of pages of your blog (It is not the list of posts)
3. Post - shows your posts - posted matters
4. Profile - shows author's Blogger/Google+ profile
5. Attribution - shows message your blog is powered by Blogger
6. AdSense - If you are eligible for AdSense then you can show ads on mobile template

Read more after the cut.........

You can add more page elements to Blogger mobile template. Also you can hide any of these 6 default page elements for Blogger mobile template. To show or hide a page element you should understand mobile template properties/conditions which are as following -

1. default - default condition as Blogger is providing
2. yes - can show a gadget/page element on mobile template
3. no - can hide a gadget/page element on mobile template
4. only - can show a gadget/page element only on mobile template by hiding that element on desktop template

Now we are coming to 'mobile' attribute which is used with -
<b:widget id='GadgetUniqueID' mobile='Condition' title='TITLE' type='GadgetType'>
Mobile Attribute with 'No' Condition

Suppose you want to HIDE Profile gadget from Blogger mobile template as I did then you have to add mobile='no' to Profile gadget

<b:widget id='Profile1' locked='false' mobile='no' title='About Poet' type='Profile'>

Similar way you can HIDE Blogger Attribution from Blogger mobile template by adding mobile='no' to Attribution gadget -

<b:widget id='Attribution1' mobile='no' title='Attribution' type='Attribution'>

Mobile Attribute with 'Only' Condition

Suppose you want to show PageList gadget ONLY on Blogger mobile template not on Desktop template then add mobile='only' to this -

<b:widget id='PageList1' locked='false' mobile='only' title='Pages' type='PageList'>

Mobile Attribute with 'Yes' Condition

Now I'll tell how to show custom gadget or page element to Blogger mobile template. As we all know Blogger default mobile template does not show BlogArchive gadget, so we will show this gadget on Blogger mobile template with the help of Blogger 'mobile' attribute and 'yes' condition -

BlogArchive default gadget code is -

<b:widget id='BlogArchive1' title='Blog Archive' type='BlogArchive'>

Now we will change it as following -

<b:widget id='BlogArchive1' mobile='yes' title='Blog Archive' type='BlogArchive'>

After this BlogArchive will appear on Blogger mobile template.

Similarly we can show any HTML/Javascript gadget with same attribute and condition as following -

Default HTML/Javascript gadget code is -

<b:widget id='HTML1' locked='false' title='Search Box' type='HTML'>

Now we will change it as following -

<b:widget id='HTML1' locked='false' mobile='yes' title='Search Box' type='HTML'>

If Blogger mobile template have some problem, then do this -

To work all this make sure that the following code is present in your Blogger template -

<body expr:class='"loading" + data:blog.mobileClass'>

if not; then you should search for -

<body>

and replace this with -

<body expr:class='"loading" + data:blog.mobileClass'>

I believe this article is useful to you and you'll love to customize your blog's mobile template. :)

Conclusion

Blogger mobile template customization mechanics is simple. It is possible to hide or show any Gadgets or page elements on Blogger mobile template with the help of 'mobile' attribute and various available conditions.