This tutorial will guide you to customize default mobile template in blogger. This is not difficult but a little bit tricky rather. Make sure you have selected mobile theme in theme chooser.

Enable mobile theme

Log in to dashboard and select theme option present on the left side bar. Click on Gear Icon. Tick radio button for ” Yes show mobile theme on mobile devices“. Choose theme as “Custom“.

Open up website on mobile. You will notice very few things appear on mobile comparing desktop view of the same theme. Custom gadgets are also not visible.

Make custom gadgets visible on mobile

Go to theme chooser again and click on “Edit HTML” button. Select gadget you want to show on mobile and input below code as shown in picture.

mobile=’yes’  —-Input code just before title=’something’

Troubleshoot visibility

Sometime mobile=’yes’ is there at right place but still your gadgets are not showing up. So need not to worry about. Click anywhere in HTML editor and press ctrl+f on keyboard. Find code mobile=’no’ for any gadget on site. Just remove that code and save. Your gadgets will show up immediately.

How to customize adding custom CSS

@media library is not available with inbuilt themes in blogger. It makes a little difficult to make changes for mobile only layout. But this part is a little tricky. You can add custom CSS to change mobile only view.

Just input “.mobile” before custom CSS code as shown in picture.

Save changes after adding custom CSS.

Hope you find this tutorial easy to use. Share and Subscribe to get updates. Thanks for reading.