[Blogger Tutorial] How to show blogger widgets only on mobile devices or desktop devices

 

Blogger CMS allows multiple gadgets or widgets to be included in every website created from the CMS.

 Apart from the default Blogger widgets, others can be added in the case of customisation which includes HTML or JAVASCRIPT codes in Blogger blogs.

 

However, according to preferences, the user may not like to display the widget on all pages or even hide some gadgets on Mobile devices or in Desktops(Wide view).

How to Hide / Show Blogger Widgets/Gadgets In Mobile devices and Desktop explained.

 

 

The code cond='data:view.isPost'  is for only to show widgets in Post pages while cond='data:view.isHomepage' is only for home page widgets.

To hide widgets only in Mobile device and show solely on Desktop or wide views the code is cond='!data:blog.isMobileRequest'

To hide widgets on Desktops view and show only in Mobile devices, the code is cond='!data:blog.isMobileRequest == " false " '

 

 Where to add the code? Search for the widget section  <b:section and add next to it.

 

To hide Widgets on Desktop

 

<b:section class='about-section' cond='!data:blog.isMobileRequest == &quot;false&quot; ' id='about-section' maxwidgets='1' name='About Section' showaddelement='yes'>
                <b:widget id='HTML12' locked='false' title='' type='HTML' version='2' visible='true'>
                  <b:widget-settings>code-box

 

To hide Widgets on Mobile Devices 

  <b:section class='sidebar-widget-ready' cond='!data:blog.isMobileRequest' id='sidebar' name='Main Sidebar' showaddelement='yes'>
          <b:widget id='HTML14' locked='false' title='Recommended' type='HTML' visible='true'>code-box