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

Hide/ show widgets in Mobile devices or Destops photo


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.


Hide/ show widgets in Mobile devices or Destops photo


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


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


Post a Comment

What is your say on this

Previous Post Next Post