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.
</b:if>
This is mobile view. Put whatever text or HTML markup you want for only mobile view.
</b:if>
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.
<b:else/>
This is PC view. Put whatever text or HTML markup you want for only PC view.
</b:if>
This is mobile view. Put whatever text or HTML markup you want for only mobile view.
<b:else/>
This is PC view. Put whatever text or HTML markup you want for only PC view.
</b:if>
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: https://blogger-developers.googleblog.com/2011/11/introducing-custom-mobile-templates.html. 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.
Troubleshooting
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 https://one-minute-info.blogspot.com/. Hope it has helped you too.
Questions? Let me know!
Posts
