Sep 12, 2015

How To Customize Mobile Template For Your Blog

Customize Mobile Template For Your Blog:

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

After That

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 and click on the gear icon below the mobile template and set it as shown in the screenshot below.

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='&quot;loading&quot; + 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

Alternate Widget Content on Mobile View:

Once 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, then you can provide alternate content inside a widget.

e.g:

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

0 comments:

Post a Comment