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'.

A blogger mobile template is what visitors using mobile phones, tablets, iphones, blackbery 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.

• Properly SEO Optimize Blogger Blogspot

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.

• 3 Surefire Ways To Eliminate Rendering Blocking JavaScript In Blogger Blog
• How To Optimise Or Minimize External CSS (Font Awesome, Fonts) Links In Blogger

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".

• Customize Blogger Custom Mobile Template
• Make Blogger Blog Fully Responsive And Mobile Friendly

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.

<b:if cond='data:blog.isMobileRequest == "true"'>

Step 4

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

</b:if>

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.

<b:if cond='data:blog.isMobileRequest == "false"'>

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.