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
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
Similar way you can HIDE Blogger Attribution from Blogger mobile template by adding mobile='no' to Attribution gadget -
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 -
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 -
Now we will change it as following -
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 -
Now we will change it as following -
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 -
if not; then you should search for -
<body>
and replace this with -
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.
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.
guy u din work o
ReplyDeleteI need someone to pick out one best product from those on this list here.
ReplyDeleteCustomize Windows