How To Edit And Customize Blogger Mobile Templates

by Unknown | Monday, January 07, 2013 | Blogger tips | CSS | Development 327 Comments

If 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

Three properties can be use to control how widget operates, and the properties include: mobile="no", mobile="yes", and mobile="only".

If you want to hide any default widget, simply use the mobile="no" property to hide the widget in mobile website.

Example: The default widget tag/code for attribution widget is:

<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.

Example: The default widget code for the archive widget is:

<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.

Example: Let's try to show the archive widget only in mobile site, using the mobile mobile="only" property as shown below.

<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;
}

.mobile .main-header {
margin: 0;
}

.mobile .content-outer{
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!

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

Follow @realcombiz