September 05, 2013

How to Customize Blogger Mobile Template - Advanced Tutorial

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

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.

Show comments

Hide comments

13 comments:

TwistBlogger2 January 2014 at 09:10
Nice Tutorials. Your Blog Is Full Of Tutorials But The Template Does Not Look Great. You Must Update Your Template and Logo otherwise a great blog. ThanQ
ReplyDelete
Replies
Prompat Articles5 January 2014 at 00:32
Can I also add addynamo ads this same way to my mobile template?
ReplyDelete
Replies
Mr Gbengz6 January 2014 at 13:34
it works great on ma site Earn Online
ReplyDelete
Replies
daayur6 January 2014 at 13:36
thanks for sharing, it helps
ReplyDelete
Replies
Anonymous8 January 2014 at 12:41
hi,.. body tag... this is present in my template as i use default template, but customization does not take effet in preview of mobile template
ReplyDelete
Replies
Neha Sharma8 January 2014 at 12:55
I changed my blog coding and it is very helpful.
ReplyDelete
Replies
Anonymous8 January 2014 at 13:09
hii.. i need a help.... in mobile template customization, in the home page of my blo, i can see the full blog post but what i need is to show until jump break, that is like updates 3 to 4 posts in home page. any idea
ReplyDelete
Replies
Pooja20 January 2014 at 09:23
nice tips, really helpful for me thnx
ReplyDelete
Replies
Unknown8 May 2014 at 18:03
Can you advise on how to edit my blog header for mobile so it all shows on one line with the same font as on the desktop version, seems to be a problem on iPhone (narrow screen)? Http://www.fashionmamaaquarius.com
Thanks so much!!
ReplyDelete
Replies
Anonymous3 July 2014 at 03:08
thnkaz its verry use ful
ReplyDelete
Replies
Picreel6 July 2014 at 18:24
This post is very useful.
ReplyDelete
Replies
Unknown8 July 2014 at 13:30
Creating an income via world wide web income systems is conducted by offering points in amazon or completing studies on the web. While individuals can assist you generate some dough on the web, they are job demanding but not value your efforts. Indeed, they could perform, nevertheless it isn't really the simplest way to generate a ways to make money.
ReplyDelete
Replies