you enable mobile template for your blog, here is a good news, you can now customize your mobile site to your own personal taste using CSS definitions. You will able to decide which widget is to be displayed in mobile site and which one shouldn't. You can also configure a widget to appear on both
desktop and mobile site.
How To Customize Mobile Template
The default widget that appears on mobile template are as follow:
- Header
- Blog
- Page List
- Adsense (If applied)
- Profile
- Attribution
- If you want to hide any default widget, simply use the mobile="no" property to hide the widget in mobile website.
<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>
Now to hide the attribution widget, simply insert the mobile="no" property as shown below
<b:widget id='Attribution1' locked='true' mobile='no' title='' type='Attribution'/>
- If you want to show any non-default widget, simply use the mobile="yes" property.
<b:widget id='BlogArchive1' title='Blog Archive' type='BlogArchive'>
Now use the mobile="yes" property as shown below
<b:widget id='BlogArchive1' title='Blog Archive' mobile='yes'type='BlogArchive'>
- If you want to show a widget only in mobile site, simply use the mobile="only"property.
<b:widget id='BlogArchive1' title='Blog Archive' mobile='only'type='BlogArchive'>
What Next?
You will need to activate custom template for your mobile template, as it may not show any changes if you are the using any of the default template.
Now go to Template, click on the gear icon below the mobile template and set it as shown in the screenshot below.
It is advisable that you Preview the custom template before you finally click on the Save button.
Customize Mobile Template Using CSS
You can set CSS properties for both mobile and desktop view, but make sure your template is having the following code.
<body expr:class='"loading" + data:blog.mobileClass'>
If you are so good at CSS, you can style your mobile site to your own perfect taste. You can edit some CSS class like:
.mobile .date-header {
text-decoration:underline;
}
text-decoration:underline;
}
.mobile .main-header {
margin: 0;
}
margin: 0;
}
.mobile .content-outer{
text-decoration:none;
}
text-decoration:none;
}
You can control how a widget behave in mobile site by using css class .mobile
Let us know if you have customize your mobile template and we will be happy to make a visit. You can check this blog on mobile and any recommendations or suggestions concerning the improvement of the mobile template is highly welcome.
Happy hacking!