How to optimize blogger template for mobile

Today day I will talk about:

How to optimize blogger template for mobile.

We all know that the majority of Internet users now use the phone to browse websites and blogs, and Google has become focused on sites that have a fast and responsive mobile template.

READ ALSO :  Easiest way to add responsive share buttons to your blog

 
The idea is to block any JavaScript codes or codes that affects loading speed of your page (JavaScript code, large images, etc.), but only in the phone version. Means that the visitor will not see those items if they browse the blog via phones.
Let's get started!
First thing you should know is the code responsible for the items you want to hide/block from appearing in mobile version of your blog
Tip: Use the Inspect Element to find out which code is responsible for the properties of the item you want to hide.
After you know the code you must add a condition tag.
Search for the element you want to block , for exemple I want to hide the menu so I will search for  <div class = 'menus'>  and then add this line after it:

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>

Now you must close the condition tag , search for </ div> that is responsible for closing the menu tag and add the following code:

</b:if>

Save it and test it.