Mobile users are increasing dramatically. So make your Blog mobile friendly right now. Using mobile templates will make your Blog easier and faster to mobile users. Learn from this tutorial, how to enable a Mobile template to your Blogger Blog and customize it.
Go to Blogger Template Page
Enable and Change Mobile Template
There are two methods to set a Mobile template on your Blog —
Enable Default Blogger Mobile Template
If you are using a custom Blogger template that is mobile responsive then —
Enable Desktop Template on Mobile devices
You can switch off the Mobile template and enable Desktop Template on Mobile devices.
Check your Blog Works Perfectly on Mobile
Choosing “No. Show desktop template on mobile devices” will disable the preview mode. But there are 4 ways to test whether your Blog is mobile responsive or not.
Go to Blogger Template Page
- Sign in to Blogger with your Google Email and Password.
- In the top left, click the Down arrow [img=7x4]http://www.egtutorial.com/wp-content/uploads/2016/09/Down-Arrow-Icon.png[/img], then choose the blog you want to work on.
- In the left menu, click Template.
Enable and Change Mobile Template
There are two methods to set a Mobile template on your Blog —
- Blogger already have some built in mobile templates you can choose one of them.
- If you are using a custom template that is mobile responsive then enable it.
Enable Default Blogger Mobile Template
- Under “Mobile” preview box, click Customize mobile template [img=19x19]http://www.egtutorial.com/wp-conten...heel-icon-on-Blogger-Dashboard-Home.png[/img].
- A popup dialog will appear, select “Yes. Show mobile template on mobile devices”.
- Choose a mobile template and click Preview to see the template live on your blog.
- Default — Default Blogger mobile template will be used.
- Custom — It’s better to use Custom Blogger mobile Template that adapts template customizations.
- Click Save.
If you are using a custom Blogger template that is mobile responsive then —
- Choose Custom under “Choose mobile template”.
- Click Save.
Enable Desktop Template on Mobile devices
You can switch off the Mobile template and enable Desktop Template on Mobile devices.
- Select “No. Show desktop template on mobile devices”.
- Click Save.
Check your Blog Works Perfectly on Mobile
Choosing “No. Show desktop template on mobile devices” will disable the preview mode. But there are 4 ways to test whether your Blog is mobile responsive or not.
- Test your Blog directly from your Mobile.
- Use Chrome DevTools’ Device mode to test your site’s responsiveness —
- Open your Blog in Chrome browser.
- Press Ctrl+Shift+I or right-click on the page and select Inspect.
- Press Ctrl+Shift+M or click Toggle device toolbar.[img=15x16]http://www.egtutorial.com/wp-conten...con-to-check-Mobile-Responsive-view.png[/img]
- The Device Mode’s screen emulator will appear with viewport controls.
[img=247x47]http://www.egtutorial.com/wp-conten...-Chrome-Device-Mode-screen-emulator.png[/img] - You can test your site in two modes — Responsive and Specific Device mode like iPhone 5, Nexus 5, etc. Click [img=8x7]http://www.egtutorial.com/wp-conten...-Down-icon-on-Chrome-view-port-tool.png[/img] to select a mode.
- You can use some online tools to test your site’s responsiveness such as StudioPress, ResponsiveTest, Responsinator and search on Google to get more.
- Even you can test your site’s responsiveness by resizing your Browser window.
