Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.
In this post we're going to learn about how to edit our blogger template for mobile phones so please starting this don't forget to enable mobile template on your blogger by visiting template section.
How To Customize The Structure Of Your Mobile Template :
Blogger Templates are made by using widgets. Blogger has added a new property (mobile) to the <b:widget/> tag. This property can take the following values: ‘default', ‘yes', ‘no', ‘only'. As you may have guessed, this property will determine how the widget will be rendered in the mobile view.
By default, the widgets that will be shown on mobile are:
- Header
- Blog
- Profile
- PageList
- AdSense
- Attribution
a) If you want to hide any of said widgets, you need to use the property mobile='no' in the widget tag. By doing so, that widget would no longer appear in the mobile view.
For instance, you can hide the Attribution Gadget in Mobile view if you use:
<b:widget id='Attribution1' locked='true' mobile='no' title='' type='Attribution'/>
b) If you want to display a non-default widget in the Mobile view of your Blogger blog, then just set its mobile property to 'yes'.
Here is an example:
This is the normal tag for the Blog Archive Widget:
<b:widget id='BlogArchive1' title='Blog Archive' type='BlogArchive'>
When you set the mobile property as
<b:widget id='BlogArchive1' title='Blog Archive' mobile='yes' type='BlogArchive'>
you should see the Archive Widget on your Mobile view.
c) If you want a widget to appear only in the mobile view, you can achieve this be setting the Mobile property to 'only':
<b:widget id='Attribution1' locked='true' mobile='only' title='' type='Attribution'/>
If you use this tag, the attribution gadget will disappear from your desktop view, and will appear only on the mobile view.
How To Customize The Look And Feel Of Your Mobile Template :
You can fully customize the look of your mobile template. The body element of the mobile template will be styled by the mobile class:
<body class='loading mobile'>
Make sure that your template contains the following line of code:
<body expr:class='"loading" + data:blog.mobileClass'>
If you have experience working with CSS, you can use this class name to style your mobile template.
.mobile .date-header {
text-decoration:underline;
}
Alternate Widget Content On Mobile View :
When you switch to the Custom Mobile Template, you might find that the template is too huge to fit into a Mobile Browser. If you want you can provide alternate content inside a widget.
For example:
<div class="widget-content">
<b:if cond="data:blog.isMobile">
<!-- Show a text link in mobile view.-->
<a href="http://www.blogger.com">
Powered By Blogger
</a>
<b:else/>
<!-- Show an image link in desktop view.-->
<a href="http://www.blogger.com">
<img expr:src="data:fullButton" alt="Powered By Blogger"/>
</a>
</b:if>
</div>
This code will show a Powered by Blogger Text link on the Mobile View and a Powered by Blogger image on the normal desktop view.
The condition
<b:if cond="data:blog.isMobile"/>
can be used to check if a visitor is viewing your blog in a mobile browser or not. You can use this conditional check creatively and give a totally different look to the mobile version of the blog.
That’s all!
Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.
