How to Disable Javascript Code, CSS, JQuery and Widgets Using the isMobileRequest Conditional Tag
Sometimes the process of opening a blog page on a cellphone/gadget feels longer than when it is opened via a PC/computer. Various methods are taken by a blogger to speed up the loading of his blog template, so one way is to disable/turn off Javascript, CSS, JQuery, and the blog template . In this way, your blog will be lighter and the loading process will be faster when opened on the mobile/gadget version. The point here is we choose which Javascript, CSS, JQuery, or widget code that doesn't need to be displayed on the mobile version and will only be displayed when opened via the PC/Computer version.
As you can see on the right side of my blog, there is a multi-tab widget that has that 3 columns. The 3-column widget uses a combination of Javascript and JQuery which can affect the loading speed of my blog. If my blog is viewed through a PC/computer browser, it's not too problematic, because I really need this multi-tab widget to save sidebar space. But it will be a problem if the multi-tab widget also appears on the mobile version, and the result is that loading the blog will take loa longer, friend. Try friends, look at my blog on the mobile version/viewers version viewers version/viewers version/viewers view version conversion on version conversion conversion/view via cellphone, the appearance will be different from the PC / computer version. I have disabled some JavaScript, and CSS, JQuery code when viewing the blog via HP/Mobile.
Use the ismobilerequest conditional tag to speed up blog loading
To disable/turn off some Javascript, CSS, and JQuery code, a conditional code tag " ismobilerequest " is needed which will be used to wrap code that we don't want to display on the HP/Mobile version of the blog. Here's the isMobileRequestis mobile request conditional tag code that I meant, friend:
<b:if cond='data:blog.isMobileRequest == "false"'> -----Code JAVASCRIPT, CSS, JQUERY----- </b:if>
Buddy, all you have to do is put the Javascript, CSS, Jquery code into the conditional tag code above, to install it, you need precision and patience, so you don't put the conditional tag code wrong. To make it easier to understand, I will try to give an example of how to install it. 1. Disabling Javascript, CSS, and JQuery. First I will provide the steps to disable Javascript code, CSS, and JQuery. First, open your blogger account, then select "Template' then select "Edit HTML", look for the Javascript, CSS, or JQuery code that you want to hide/deactivate. I will take an example if you want to wrap Javascript code, then the structure will be like this if you have placed the conditional tag code:
<b:if cond='data:blog.isMobileRequest == "false"'> <script type='text/javascript'> //<![CDATA[ // Youtube Responsive setTimeout(function(){$(".video-youtube").each(function(){$(this).replaceWith('<iframe class="video-youtube loader" src="'+$(this).data("src")+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5e3); //]]> </script> </b:if>
2. Disabling Widgets or Gadgets
Apart from hiding Javascript, CSS and JQuery code, we can also hide/deactivate widgets or gadgets that we don't need to speed up loading blogs when opened via HP/Mobile Gadgets. The first step, determine the Widget ID that will be disabled/hidden, to find out how to find the widget ID, you can follow this tutorial How to Find the ID of a Widget/Gadget . After the Widget/gadget ID is found, reopen your blogger account, select "Template", then "Edit HTML".
I exemplify the widget ID is "HTML5", in your HTML template editor, type CTRL+F on your keyboard, to search for the "HTML5" widget code, then press ENTER, or you can go directly to the HTML widget code by clicking "Jump to widget " in your HTML template editor.
Select your widget ID in the "Jump to widget" list, since the Widget ID that I exemplified is HTML5, so I chose HTML5. After you click, it will look like this:
Click the black arrow on the HTML5 widget code if the entire code is not visible, after you click the black arrow, code like this will appear:
<b:widget id='HTML5' locked='false' title='' type='HTML'> <b:includable id='main'> <!-- only display title if it's non-empty --> <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:includable> </b:widget>
Now it's time for us to wrap the HTML5 widget code using the isMobileRequest conditional tag code, after wrapping, it will look like this:
<b:widget id='HTML5' locked='false' title='' type='HTML'> <b:includable id='main'> <b:if cond='data:blog.isMobileRequest == "false"'> <!-- only display title if it's non-empty --> <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>
3. Displays Javascript, CSS, JQuery, and widget code only on the mobile/mobile version and not displayed on the PC version.
Apart from being able to hide Javascript, CSS, JQuery and widget code on the mobile version, the isMobilequest conditional code tag can also hide code. Javascript, CSS, JQuery and widgets on the PC version, so they will only appear on the mobile version. The method is quite easy, friend, we only need to change " false " to " true ".
This is a tutorial on how to hide Javascript, CSS, JQuery and widget code when opening a blog from a PC or mobile gadget. This is one way to speed up the loading of your blog. Hopefully this article can be useful for friends, thank you for visiting, and see you in another article.
