Blogspot/Blogger Mobile Theme Customization – Advanced Tutorial

We have already told you how to enable and change the Blogspot/Blogger mobile theme. Most of the bloggers have enabled the mobile theme for Google Blogger/Blogspot. Having two different themes for both type of readers who are accessing your blog from the desktop as well as on mobile devices is a good thing. Desktop and mobile theme have their own benefits. There are lots of tutorials on this blog to customize your desktop theme. This is the first time when we are publishing the Blogspot/Blogger mobile theme customization.

Blogspot Blogger mobile theme customization

To understand Blogger theme, we should have to understand the theme default gadgets/ page elements. By default, a Blogger mobile theme has these following six gadgets/ page elements –

  1. Header – shows blog title and description
  2. Page List – shows a list of pages of your blog (It is not the list of posts)
  3. Post – shows your posts – posted matters
  4. Profile – shows the author’s Blogger/Google+ profile
  5. Attribution – shows message your blog is powered by Blogger
  6. AdSense – If you are eligible for AdSense then you can display ads on the mobile theme

Do not have a Blogspot blog? Learn how to start a free blog with Blogspot.

Blogspot/Blogger Mobile Theme Conditions

You can add more page elements to the Blogger mobile theme. Also, you can hide any of these six default page elements. To show or hide a page element you should understand mobile theme properties/conditions which are as follows –

  1. default – default condition as Blogger is providing
  2. yes – can show a gadget/page element on the mobile theme
  3. no – can hide a gadget/page element on the mobile theme
  4. only – can show a gadget/page element only on a mobile theme by hiding that element on the desktop theme

Now we are coming to ‘mobile‘ attribute which is used with –

<b:widget id='GadgetUniqueID' mobile='Condition' title='TITLE' type='GadgetType'>

Mobile Attribute with ‘No’ Condition

Suppose you want to HIDE Profile gadget from Blogger mobile theme as I did then you have to add mobile=’no’ to Profile gadget –

<b:widget id='Profile1' locked='false' mobile='no' title='About Poet' type='Profile'>

Similar way you can HIDE Blogger Attribution from Blogger mobile theme by adding mobile=’no’ to Attribution gadget –

<b:widget id='Attribution1' mobile='no' title='Attribution' type='Attribution'>

Mobile Attribute with ‘Only’ Condition

Suppose you want to show PageList gadget ONLY on Blogger mobile theme, not on the desktop theme then add mobile=’only’ to this –

<b:widget id='PageList1' locked='false' mobile='only' title='Pages' type='PageList'>

Mobile Attribute with ‘Yes’ Condition

Now I’ll tell how to show custom gadget or page element to Blogger mobile theme. As we all know Blogger default mobile theme does not show BlogArchive gadget, so we will show this gadget on mobile theme with the help of Blogger ‘mobile’ attribute and ‘yes’ condition –

Blog Archive default gadget code is –

<b:widget id='BlogArchive1' title='Blog Archive' type='BlogArchive'>

Now we will change it as follows –

<b:widget id='BlogArchive1' mobile='yes' title='Blog Archive' type='BlogArchive'>

After this Blog Archive will appear on Blogger mobile theme.

Similarly, we can show any HTML/Javascript gadget with the same attribute and condition as following –

Default HTML/Javascript gadget code is –

<b:widget id='HTML1' locked='false' title='Search Box' type='HTML'>

Now we will change it as follows –

<b:widget id='HTML1' locked='false' mobile='yes' title='Search Box' type='HTML'>

If the mobile theme has some problem, then do this –

To work all this make sure that the following code is present in your Blogger theme

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

If not; then you should search for –

<body>

And replace this with –

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

I believe this article is useful to you, and you’ll love to customize your blog’s mobile theme.

Conclusion

Blogger mobile theme customization mechanics are simple. It is possible to hide or show any Gadgets or page elements with the help of ‘mobile’ attribute and various available conditions.

24 thoughts on “Blogspot/Blogger Mobile Theme Customization – Advanced Tutorial”

  1. Avatar photo
    Dheeraj Thedijje

    Thanks for this great information, SEO is being more important to be on mobile, most of the web users are on the Go, you helped me to do so. thanks

  2. Your site is very good looking. The mobile site information is already available on blogger’s official blog. I want to put Adsense custom code below post title in mobile version of my blog (www.essssay .com) by copyinig adsense code from my adsense account.. If you know this trick then post it. It would be very helpful to us. Thank.

      1. This will boost CTR of mobile site. So try to hack this trick. I am trying but failed till now. Adsense added through the blog are working nicely on the desktop and mobile version site. But this code become hidden when mobile=”only” is added to this widget. This just an information i shared with your so that you may find few clue.

  3. Hi Vinay, I wanted a search box to show in the mobile version so followed your instruction and replaced with but the search box still didn’t display in the mobile version. I am referring to -http://www.damansarauptown.com/?m=1 non-mobile version -http://www.damansarauptown.com/ (a custom search box at top of the main column. What do I need to do to make the search box display in the mobile version?

  4. It is amazing and wonderful to visit your site.Thanks for sharing this information,this is useful to me

  5. Thank you for the tutorial.

    Please create a tutorial to make blogger desktop version responsive and fluid width, like your blog but in blogger version.

    My blog a bit weird, the responsive isn’t automatically adjust per pixel follows the screen size, but it’s resize per around 100px, e.g. if we resize the screen on PC browser, the layout elements decreased -100px, -100px, an so on, not follows the mouse movement.

    So the result, when we saw it on mobile, the layout looks distorted with too much empty space on left and right side, because it’s -100px from left and -100px from right.

    Thank you.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top