We Post only the Best Stuff

Complete Guide to Editing Blogger Mobile Templates

Hey Bloggers! I got a good news when i visited Blogger Cods Blog posted by Blogger Team there. If you have customised your blog’s mobile views with Blogger’s default mobile templates, now you will be able to customise the mobile views by using CSS - Cascading Style Sheets definitions. You will also be able to check on which widgets get displayed in mobile view and which in Desktop view. In brief, you’ll be able to show same or alternate content in blogger mobile view.

How to achieve it in Blogger mobile View?

Go to Blog’s dashboard, then select Template from left pane.

Now under Mobile Template, click on Gear (wheel) icon.

Click on Gear Button -- Blogger Mobile Templates Simplifie

Select “Custom” from the “Choose mobile template” drop-down menu. Choose custom-- Blogger Mobile Templates Simplified

“Preview” your template in Mobile Version and Save it.

Preview Template -- Blogger Mobile Templates Simplified

Let’s Start Customisation

The folks at Blogger have done a great job and have added an additional property to the <b:widget/> tag. The property has values ‘default’, ‘yes’, ‘no’ and ‘only’. These values determine how our mobile site will look to readers.

To add CSS - Cascading Style Sheets and codes to Blogger Template Check: How to Edit a Blogger Template in new Interface Part I and Part II

The following widgets are displayed in our mobile template by default:

  • Header
  • Blog
  • Profile
  • Page List
  • Attribution

Now, suppose we wish to hide any of above widgets from our blog’s mobile view, then we may use property mobile=’no’ in widget tag. Now, the widget will not appear in mobile.

For Example: To Hide “Attribution” in Mobile View

<b:widget id=’Attribution1’ locked=’false’ mobile=’no’ title=’’ type=’Attribution’/>

If you want to show Blog Archive widget in Mobile View, then change

<b:widget id=’BlogArchive1’ locked=’false’ mobile=’no’ title=’’ type=’BlogArchive’/>

to

<b:widget id=’BlogArchive1’ locked=’false’ mobile=’yes’ title=’’ type=’BlogArchive’/>

To display a widget only in Mobile Version, set Mobile Property to ‘only

For Example: To show Blog Archive only in Mobile Version, use mobile=’only’ property in above coding and it will look like

<b:widget id=’BlogArchive1’ locked=’false’ mobile=’only’ title=’’ type=’BlogArchive’/>

Customising the Look and Graphics of Mobile site:

Now, as blogger code blog tells us, we can also customise the design of mobile site additional to just displaying widgets. The body element of the template will be styled by the mobile class.

<body class=’loading mobile’>

Make sure your Template has:

<body expr:class=’&quot;loading&quot; + data:blog.mobileclass’>

For this either use and customise Blogger Default Template, or add the above lines to your non-default custom template.

So’ if you are good at coding and CSS designing, then you can use this class name to style your mobile site template.

.mobile .date-header {

text-decoration: underline;

}

Blogger Default Templates have preinstalled mobile CSS class for your blog, so you may edit them or add new one to style your blog in mobile view.

Alternate Widget Content in Mobile View:

Once you have enabled Custom View for your Mobile Template, you may find that the site template as well as content of widgets is too big and bulky to fit into Mobile Browser. So, if you wish, you can show different (alternate) content inside a widget for Mobile View.

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>

The above coding will show a “Powered by Blogger” text link on Mobile View and a “Powered by Blogger” image on the normal Desktop View.


The conditiona tag:



<b:if cond=”data:blog.isMobile”/>


is used to check if the user is seeing our Blog in Mobile Browser or not. You can use this conditional tag to show your creativity and show a completely different looking blog to mobile visitors of your blog.


Happy Customisation!!!


Please share and like this article if this article has helped you in customisation and giving a new look to your blog.

Support : Contact Us | Privacy Policy | Site Map
Copyright © 2013. Tech Jatt - All Rights Reserved
Site Design by Nitin Kundu Licensed to Tech Jatt
Proudly powered by Blogger