We can very easily hide or show widgets in the Desktop/Laptop view but for mobile, it is not directly possible. We can efficiently use conditional tag “isMobileRequest” for hiding or showing those widgets or HTML in the mobile view.
Note: isMobileRequest only applies to the mobile view only and it is not effective for Tablets and iPads.
Hide or Show HTML using isMobileRequest?
The Conditional expression “isMobileRequest” has the following syntax which works on a Boolean Logic:
<b:if cond=’data:blog.isMobileRequest == “true”‘>HTML To Show Only in Mobile Devices</b:if>
The content within the above conditional expression will only be loaded on mobile devices where the condition is true because of the parameter? m=1 where 1 stands for True.
If you want to display content only on desktop devices then you just need to reverse the operator:
<b:if cond=’data:blog.isMobileRequest == “false”‘>HTML To Show Only in Desktop Devices</b:if>
As simple as that. Note that this condition works irrespective of whether or not you have enabled or disabled the default Blogger Mobile template. You can use it in both cases.
Implement this isMobileRequest in the widget to hide/show them in mobile view:
1. Go To Blogger > Theme > Click on three dots in the window opened > Backup
2. Click Edit HTML
3. Now a window will open with an HTML template. Now, you need to click on the widget icon.
4. From the drop-down menu locate your widget through the widget ID. In our case it is HTML1.
5. When you will select your widget, the template will be navigated to the desired widget. Now you need to add the conditional expression <b:if cond=’data:blog.isMobileRequest == “true/false”‘> to the widget after <b:includable id=’main’> and </b:if> before </b:includable> as shown in the picture below.
Example of a widget template :
<b:widget id=’HTML1′ locked=’false’ title=’Back at Home’ type=’HTML’><b:includable id=’main’><b:if cond=’data:blog.isMobileRequest == “false”‘><b:if cond=’data:title != ""’><h2 class=’title’><data:title/></h2></b:if><div class=’widget-content’><data:content/></div><b:include name=’quickedit’/></b:if></b:includable></b:widget>
Use these conditional expressions according to need:
<b:if cond=’data:blog.isMobileRequest == “true”‘>
HTML To Show Only in Mobile Devices
<b:if cond=’data:blog.isMobileRequest == “false”‘>
HTML To Show Only in Desktop Devices
6. Once you are done with the addition of expression to widget then click on Save button and you are all done!