Most of bloggers have enabled the mobile theme for Google Blogger. Having two different themes for both breads of readers who are accessing your blog from desktop as well as on mobile devices is a good thing. Desktop and mobile theme have their own benefits. There are lots of tutorials on this blog to customize your desktop theme. This is first time when we are publishing about customization of Blogger mobile theme.
To understand Blogger theme we should have to understand th etheme default gadgets/ page elements. By default a Blogger mobile theme have these following 6 gadgets/ page elements –
- Header – shows blog title and description
- Page List – shows a list of pages of your blog (It is not the list of posts)
- Post – shows your posts – posted matters
- Profile – shows author’s Blogger/Google+ profile
- Attribution – shows message your blog is powered by Blogger
- AdSense – If you are eligible for AdSense then you can show ads on mobile theme
Blogger Mobile Theme Conditions
You can add more page elements to Blogger mobile theme. Also you can hide any of these 6 default page elements. To show or hide a page element you should understand mobile theme properties/conditions which are as following –
- default – default condition as Blogger is providing
- yes – can show a gadget/page element on mobile theme
- no – can hide a gadget/page element on mobile theme
- only – can show a gadget/page element only on mobile theme by hiding that element on desktop theme
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 theme 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 theme 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 theme not on Desktop theme 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 theme. As we all know Blogger default mobile theme does not show BlogArchive gadget, so we will show this gadget on mobile theme 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 theme.
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 mobile theme have some problem, then do this –
To work all this make sure that the following code is present in your Blogger theme–
<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 theme. :)
Conclusion
Blogger mobile theme customization mechanics is simple. It is possible to hide or show any Gadgets or page elements with the help of ‘mobile’ attribute and various available conditions.
0 Comments