How to Change and Customize Blogger Mobile Template

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

  1. Sign in to Blogger with your Google Email and Password.
  2. In the top left, click the Down arrow Down Arrow Icon, then choose the blog you want to work on.
  3. In the left menu, click Template.

Enable and Change Mobile Template

There are two methods to set a Mobile template on your Blog —

  1. Blogger already have some built in mobile templates you can choose one of them.
  2. If you are using a custom template that is mobile responsive then enable it.

Popup dialog to Customize mobile template on Blogger

Enable Default Blogger Mobile Template

  1. Under “Mobile” preview box, click Customize mobile template Wheel button to customize blogger mobile template.
  2. A popup dialog will appear, select “Yes. Show mobile template on mobile devices”.
  3. 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.
  4. Click Save.

Enable Custom Blogger Mobile Template

If you are using a custom Blogger template that is mobile responsive then —

  1. Choose Custom under “Choose mobile template”.
  2. Click Save.
Tip: Be sure to preview your template before saving. If everything works well on mobile devices the click Save.

Enable Desktop Template on Mobile devices

You can switch off Mobile template and enable Desktop Template on Mobile devices.

  1. Select “No. Show desktop template on mobile devices”.
  2. Click Save.
Note: If your custom Blogger template is mobile responsive, you can switch off Mobile template. Because a responsive template works well 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.

  1. Test your Blog directly form your Mobile.
  2. 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 Chrome Toggle device toolbar icon to check Mobile Responsive view.
    • The Device Mode’s screen emulator will appear with viewport controls.
      Viewport Controls in Chrome Device Mode screen emulator
    • You can test your site in two modes — Responsive and Specific Device mode like iPhone 5, Nexus 5, etc. Click Arrow Down icon on Chrome view port tool to select a mode.
  3. You can use some online tools to test your site’s responsiveness such as StudioPress, ResponsiveTest, Responsinator and search on Google to get more.
  4. Even you can test your site’s responsiveness by resizing your Browser window.