options such as using default blogger mobile theme, using a responsive blogger
template or even creating a personalized app for your blog. This post is a free
guide to blogger mobile template customize.
How To Customize Mobile Template On Blogger – Widgets
template or not.
mobile only, not on PC view
mobile=’no’ property just before ‘title’ as shown in the text and image below.
and to ‘only’ if you want to restrict
showing it to blogger mobile template only
to enable custom template for your mobile template. 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.
customize. Click on the gear icon below the mobile template as select custom.
Save the settings as shown in the picture below.
set it as shown in the screenshot below.
click on the Save button. In my next post, I’ll be sharing on how to customize blogger template with Photoshop.
With the aid of CSS definitions, you will be able to customize your mobile blog or site to suit your own style.
The first procedure you will have to undertake when trying to customize and edit a blogger mobile template involves the following:
- Step 1: Proceed to signing in with your Google mail and the correct password.
- Step 2: Select the blog you intend to work on by clicking on the Down arrow at the top left of the page.
- Step 3: Then click on template in the left menu.
To Enable and Change the Blogger Mobile Template
For you to be able to set a Blogger mobile template, it will require any of the following two (2) methods:
- You can select any of the default Blogger mobile templates. Blogger already has some default built in mobile templates that a person can choose from.
- In the case where you are using a mobile responsive custom mobile template, then you should enable it.
To Enable the Default Blogger Mobile Template
You will have to undertake the following steps to be able to enable the default Blogger mobile template:
- Step 1: Click on the Customize mobile template under the “Mobile” preview box.
- Step 2: Immediately the pop up dialogue box appears, you should select the “Yes show mobile template on mobile devices”.
- Step 3: Select a mobile template, and then click on preview to see the template you have selected.
Default: The default Blogger mobile template will become enabled.
Custom: This will enable you to customize a mobile template. It will be able to adapt to template customizations.
- Step 4: Click on Save.
To Enable the Custom Blogger Mobile Template
You should follow the following steps to enable a custom Blogger mobile template if the mobile template is mobile responsive:
- Step 1: Under “Choose mobile template”, select Custom.
- Step 2: Click on Save.
Note: Click on Save only after you have previewed to ensure everything is working fine on mobile devices.
To Enable the Desktop Template on Mobile Devices
If you decide to turn off the mobile template to enable the desktop template on mobile devices, then you should follow the steps below:
- Step 1: Choose “No. Show desktop template on mobile devices”.
- Step 2: Click on Save.
Test if your Blog Works Well on Mobile
You should know that if you select “No. Show desktop template on mobile devices”, the preview mode will be disabled. Therefore, if you want to test if your blog is mobile responsive or not, you can do that in the following ways:
- You can test straight from your mobile to know if your blog is responsive.
- You can use the Chrome DevTools’ Device mode to check if your blog is responsive:
Step 1: Log on to your blog using Chrome browser.
Step 2: Select Inspect after you right-click on the page, or press Ctrl + Shift + I.
Step 3: Select Toggle device toolbar, or use the shortcut Ctrl + Shift + M.
Step 4: The Device Mode’s screen emulator will instantly open, displaying the viewports control.
Step 5: You can now test your blog in either of the two modes; Specific or Responsive mode, by clicking on the desired mode.
- You can also check your blog’s responsiveness by using some online tools like ResponsiveTest, StudioPress, Responsinator, etc.
- Or you could check your blog’s responsiveness by changing the size of your browser window.
Edit the Structure of your Mobile Template
Widgets are used to make up the blogger templates. By default, the following are the widgets that display on mobile:
You can control how any of these attributes appear by using any of the below:
If you want to hide any of the widgets from your blog, you will have to use “mobile=no” in the widget tag. That widget will appear no more in your blog. This attribute is responsible for preventing most widgets from showing on the blog.
If you decide to control a widget by displaying it, then use “mobile=yes”. The widget will become visible both on the blog’s desktop version and the blog’s mobile version.
For the mobile=”only” attribute, if you use it, it will limit a widget to appearing only on the mobile template of your blog. It will prevent that particular widget from appearing in the desktop version of your blog.
The attribution code by default is:
<b: widget id=’Attribution1’ locked=’true’ title=” type=’Attribution’/>
From the code above, you can hide a particular widget from your blog as seen below:
<b: widget id=’Attribution1’ locked=’true’ mobile=”no” title=” type=’Attribution’/>
How a particular widget can be displayed on both the desktop and the mobile versions of your blog can also be seen below:
<b: widget id=’Attribution1’ locked=’true’ mobile=”yes” title=” type=’Attribution’/>
You can see below how you can restrict or limit a particular widget to appearing on the mobile template only:
<b: widget id=’Attribution1’ locked=’true’ mobile=”only” title=” type=’Attribution’/>
You can view the codes of any of the widgets listed above by visiting your blog ‘Dashboard’, select ‘Template’, and then ‘Edit’ html.