May 28, 2016

f Comment

Google Blogger: How To Create a Mobile View for Your Blog? How to Have 100% Freedom in Making the Mobile View?

Amazon If you use Google Blogger to post your articles you may want to have a desktop view and a separate mobile view because the desktop view is just not good for mobile devices like iPhone or Android smartphone. However, in the Template section in your Blogger account there is Edit HTML button for Live on Blog but no such buttons for Mobile. How do I go about editing the mobile layout for my Blogger blog?

If you want to know how to have 100% or nearly 100% freedom in making the mobile view the way you want, you have come to the right place. Read on.

Quick Solution

Before you read the official tutorial, see if this tip helps you right off the bat. In Template -> Edit HTML, you can edit the template of your blog, which looks sort of like some source code. The code to tell PC view and mobile view apart is the following:

<b:if cond='data:blog.mobileClass'>
This is mobile view. Put whatever text or HTML markup you want for only mobile view.

If you want to add stuff to PC too, use the following:

<b:if cond='data:blog.mobileClass'>
This is mobile view. Put whatever text or HTML markup you want for only mobile view.
This is PC view. Put whatever text or HTML markup you want for only PC view.

If this doesn't help you, read on.

Read the official tutorial

In order to create a PC view and a mobile view, you must understand how to create differentiation in your template. Read up on Google's official document: This document will give you the basics of modifying your blog template to make it desktop-friendly and mobile-friendly.

Important Tips

After you've read the "Introducing custom mobile templates" article, you know 70% of how to make your blog mobile-friendly. But there are important things that the tutorial did not mention. Read on to find out how to customize the mobile template for your Blogger website.

About b:widget's mobile attribute

As the tutorial suggests you can add an attribute called mobile to tell Blogger whether the widget should be rendered on the desktop view or/and on the mobile view. Here's an example:

<b:widget id='HTML3' locked='false' mobile='no' title='' type='HTML' version='1' visible='true'>

In the Layout page, you can add as many widgets (aka gadget) as you want by pressing the "+ Add a Gadget" link. Usually I add the "HTML/JavaScript" gadget so I can add my own HTML or Javascript to add, for example, Google Adsense code. Then you use mobile='yes', mobile='no', mobile='only' to control whether the widget appears on the desktop view or the mobile view. This method is the main method for making your blog mobile-friendly.

Technically speaking you can simply manipulate CSS definitions (mobile view has <body class='mobile'>) and you can get away with it without having to use the mobile attribute. However sometimes you just don't want to use pure CSS. For example, you want the adsense code to be in the desktop layout but not mobile. In this case, you should use the mobile-attribute-in-widget-tag trick.

However, what if the Layout page does not have enough sections you want? For example, what if you want to add a widget to the main section? You cannot do that because there's no Add a gadget button inside the main section.

How to add your own section?

The answer is, you can create your own section in the Template page. Go to Edit HTML and add the following code at the desired place:

<b:section class='leftSection' id='leftSection'></b:section>

You can replace leftSection with whatever name you want. Just make sure it's unique in the template. Save the template and go back to Layout page and you should see the new section you just created. You can click Add a gadget to add a widget the normal way. Once you are done, your template has changed. Therefore if you want to edit template again you must refresh the template.


Google Blogger has quite a few bugs that I have encountered. Some of them are minor but some of them are quite serious. One of them is this. If you set b:widget to mobile='only', then this widget may not appear in the Layout page for you to edit. When you want to edit the widget, you must set it to mobile='no' or mobile='yes', edit it in the Layout page, then come back and set mobile back to 'only'.

This knowledge helped me create my own desktop layout and mobile layout for my Blogger website Hope it has helped you too.

Questions? Let me know!
Please leave a comment here!
One Minute Information - by Michael Wen
ADVERTISING WITH US - Direct your advertising requests to Michael