Properly Hide/Show Any Widget In Blogger Mobile Template

As the world, is advancing and more persons purchasing smartphones, it would be a wise decision for a blogger to properly customize his blog for mobile phone users by properly hiding/showing widgets in his blogger mobile template using conditional tags, isMobile, mobile=’no’, ‘yes’ and ‘only’.
hide show widget blogger mobile template
A blogger mobile template is what visitors using mobile phones, tablets, iPhones, Blackberry and other mobile devices see when visiting your blog. Many professional bloggers design mobile apps for their blog but still, your have to optimize your BlogSpot blog for mobile viewers.
Adding a widget to a blogger blog is pretty easy as you can simply do it through the Layout Section but as a wise blogger aiming for SEO and pagespeed, it would be wise to show only certain widgets on your mobile template so as to keep up with good loading speed.

Avoid Adding Too Many Widgets To Blogger Mobile Template.

Mobile phones are not like laptops that can load huge files at high speed. Therefore it is recommended to show only certain widgets in your blogger mobile template. 
Many widgets with pictures, makes use of Jquery, have a lot of animations, sliders, carousels etc are not advised for mobile templates because they will send too many HTTP requests which will reduce your loading speed. Due to this, you might want to eliminate rendering blocking JavaScript from your blog.

Important Widgets To Show In Mobile Devices 

Keep it simple. Before using Conditional tags to enable widgets for mobile viewing, you need to list out widgets that should and should not be shown on mobile devices. These widgets should be lite to load and also very important to your blog.
I have listed out my own view of important gadgets to show on mobile templates and also widgets not to show on mobile templates whether you are on BlogSpot or using WordPress.

Widgets To Show On Mobile

  1. Popular Post
  2. Social Widget (like and share buttons)
  3. Subscription Widget ( OgbongeBlog FeedBurner Subscription Box)

Widgets Not To Show On Mobile

  1. Sliders and Carousels (e.g  Blogger Recent Post Slider)
  2. Twitter And Facebook Widgets e.g (Adding Twitter Feed Widget to Blogger Blog)
  3. Sidebar Images 

2  Ways To Enable Blogger Mobile Templates

Before I show you how to show any widget/gadget in BlogSpot mobile templates, you will first want to enable it mobile viewing by using “Custom” or “Responsive sheet”.

Method To Show Widgets In Custom Blogger Mobile Template

This a popular way of showing or hiding widgets in blogger mobile template. This will work well if you are using a Custom mobile template. All you need to do is add mobile=’no’,’yes’ or ‘only’ to your widget HTML.

Let’s Get Started!!.

Go to blogger.com >> Template >> Edit Template >> Jump to Widget >> Select any widget you wish to show/hide in blogger mobile view.

To show Widget

To show any widget, simply add mobile=’yes’ immediately after title=’ ‘

To Hide Widget

Simply add mobile=’no’ and this will hide that widget from your BlogSpot mobile view.

To Show Widget Only In Mobile View.

You might want to show a certain widget only in the mobile view. you can achieve this by adding mobile=’only’ instead.

Properly Hide/Show Any Widget In Blogger Mobile Template Using Conditional Tags.

Conditional tags are the perfect recipe to show/hide any widget in blogger mobile template. Also, you can use this to show/hide widgets on various pages only. Conditional tags, do not allow prevent the widget from showing, it also prevents it from loading.
Note: This will only work for you if you are have used CSS media queries or style sheet to make your BlogSpot blog responsive and mobile friendly.

Let’s Get Started!!…

How To Enable Any Mobile Widget

Now let’s see how to properly show any widget in BlogSpot blogs.

Step 1.

Go to blogger.com >> Templates >> Edit HTML >> Jump To Widget >> Select any widget you wish to show.

Step 2.

Click on the “Arrow” at the left side of the widget, Then you will see a code <b:incluable id=’main’>…</b:includable> Click on the arrow at the side to view the full code.

Step 3

Just below <b:includable id=’main’> paste the below code.

Step 4

Just above </b:includable> paste the below code.

The step above will help you show any widget on your responsive blogger mobile template.

Hide Any Widget In Responsive Mobile Template

To hide any widget in your responsive blogger template, you will just follow the similar procedure in enabling widgets above. But this time you will use the code below.

And don’t forget to add </b:if> as shown above.

Custom or Responsive Mobile Template?

Custom templates are pretty awesome but Responsive templates are better. For a template to be responsive, it means it is fully flexible. With a responsive blogger template, you can show different CSS styles on mobile, tablets and laptops but you can not do that with Custom mobile view.  

Which are you using? Custom or Responsive!!

More From Author.

This post has shown you two awesome ways to Properly Hide/Show Any Widget In Blogger Mobile Template using conditional tags, isMobile, mobile=’no’, ‘yes’ and ‘only’. Customizing your mobile template is very important for your blog many persons now visit websites using mobile phones.

Related Articles

4 Comments - Post Yours! How to? ▼

hello
  1. I don't know why but on my blog it hides the widgets on desktop as well.
    And this is not the first time i try to do that, it's always the same, i guess because it's a third party template.

  2. If you are using a custom template, then the conditional tags should work for you. Try the last step which talked on ismobile conditional tags.

  3. can we hide any particular eliment from blog post in mobile? Like Adsense in post if I have big size adsense ad in post which is not responsive so can I hide that ad in mobile view ?

  4. Anonymous says:

    Hello Sir I have been searching for this tags for some days now and joyfully I have gotten it at last. Thanks for the good works.
    I used this tag to hide widget from showing on mobile view of my responsive blogger template and it really works out,Now my question is please how can I use this same tag to also hide widget from showing on web view… Please help


Leave a Reply