Customize Blogger Mobile Template – Blogger Mobile View
Are you searching for how to customize and edit your blogger mobile template? This article will give you step by step procedures on how you will be able to customize and edit your blogger mobile template without much difficulty.
How to customise blogger mobile template – Blogger mobile template customize
Since Blogger came up with the mobile template option, it is now possible to customize a bloggermobile template. With a knowledge of CSS, you can customize your template and edit blogger mobile view to your taste. You can choose which widget you want to appear in the mobile view and which ones should be displayed on both blogger desktop and mobile templates.
DOWNLOAD: Powerful SEO Plugin For Blogger Blogs
Do you want to make your blogger blog mobile friendly? You have various 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
The primary widgets that appear on the default blogger mobile template
2. Blog Post
3. Page List
There are three ways to control whether a widget shows on blogger mobile
template or not.
mobile=’no’ – widget hides on
mobile=’yes’ – widget shows on
mobile=’only’ – widget shows on
mobile only, not on PC view
The defaut widget code/tag for Popular Post widget is:
If you want to hide this widget on mobile view, simply insert the mobile=’no’ property just before ‘title’ as shown in the text and image below.
Change ‘no’ to ‘yes’ if you want to show the widget on mobile template and to ‘only’ if you want to restrict
showing it to blogger mobile template only
To activate any change you make in Blogger mobile theme, you will need 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.
Click on the Template menu in your blogger dashboard, the click on the customize. Click on the gear icon below the mobile template as select custom. Save the settings as shown in the picture below.
Now go to Template, click on the gear icon below the mobile template and set it as shown in the screenshot below.
It is advisable that you Preview the custom template before you finally click on the Save button. In my next post, I’ll be sharing on how to customize blogger template with Photoshop.
Here is how to edit blog html in mobile. Did you succeed in making your blogger blog mobile friendly? Share your experience below.
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.