Hey Geeky Bloggers! With regard to internet speed, it is very important that your mobile site loads as quickly as possible. To do this, we need to hide certain widgets that don’t make sense in mobile devices. There are very limited methods that are used in Blogger to hide or show widgets in the mobile custom template. Many of these widgets use scripts like jQuery or JavaScript which really slows the site loading.
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:
Most of you may be familiar with HTML/Javascript widget editing through the Edit HTML page. For those who have no idea how it’s done follow the below tutorial.
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>
<b:if cond=’data:blog.isMobileRequest == “false”‘>
HTML To Show Only in Desktop Devices
</b:if>
6. Once you are done with the addition of expression to widget then click on Save button and you are all done!
thank you very much your post help me lot to display other external gadget in mobile, when I adding external gadget they don’t show in mobile, now they are visible ..