How to hide widgets in mobile view

How to Hide Widgets in Mobile View with Blogger

Five Easy Steps to Hide Widgets in Mobile View with Blogger

Readers do not like a slow website. They said you only have seconds to capture a reader’s attention. And, if you’re site is slow those seconds would go by so fast and there goes your readers moving on to a faster website. Here are simple blogger hacks that can help your website load faster. Let's go!

To check your website speed try https://pagespeed.web.dev

Everyone uses their mobile phones now more than their laptops. I’ve also noticed most of my readers use their phones to check on my blogs so I try to make sure that my website runs fast in mobile view. If you have a lot of widgets running in mobile view that will slow down your website. There is an easy way to hide widgets in mobile view with blogger. This worked for my blog, try to meticulously follow the steps and you’ll see great results.

Always remember when it comes to blogger template codes. There are always two codes for most functions, I call them: opening and closing codes. Opening code for the first part and the closing code to end the code function. 


For widgets that you only want to show in the Mobile view

Two HTML codes to show widgets in Mobile Devices only:
1. <b:if cond=’data:blog.isMobileRequest == “true”‘>
2. </b:if>

How to insert HTML codes in your blogger template?
1. Go to Blogger and select Theme 
Reminders: Always Backup your HTML Theme before making any changes. Better safe than sorry.
2. Click on the arrow-down button and select Edit HTML.
3. Find the widget you want to edit, to simplify your search click on "Jump to widget" and select the widget.
4. Search <b:includable id=’main’> then add the first code AFTER IT, the first code is<b:if cond=’data:blog.isMobileRequest == “true”‘>
5. Lastly, search </b:includable> and then add the second code BEFORE IT, the second code is  </b:if>


Example
The two codes should look like this:

 <b:widget id='BlogSearch2' locked='false' title='Search This Blog' type='BlogSearch' version='1'>
    <b:includable id='main'><b:if cond=’data:blog.isMobileRequest == “true”‘>
    <!-- only display title if it's non-empty -->
    <b:if cond='data:title != &quot;&quot;'>
      <h2 class='title'><data:title/></h2>
    </b:if>
    <div class='widget-content'>
      <div expr:id='data:widget.instanceId + &quot;_form&quot;'>
        <form class='gsc-search-box' expr:action='data:blog.searchUrl'>
          <b:attr cond='not data:view.isPreview' name='target' value='_top'/>
          <table cellpadding='0' cellspacing='0' class='gsc-search-box'>
            <tbody>
        </table>
        </form>
      </div>
    </div>
    <b:include name='quickedit'/>
  </b:if></b:includable>


If you want the widget only to show in Desktop Devices all you have to change is the word “true” to “false” simple as that. I’ll repeat the instructions above for ease of reading for those who didn’t get it. I was there before and I know how it feels.  

For widgets that you only want to show in the Desktop view

Two HTML codes to show widgets in Desktop only:
1. <b:if cond=’data:blog.isMobileRequest == “false”‘>
2. </b:if>

How to insert HTML codes in your blogger template?
1. Go to Blogger and select Theme 
Reminders: Always Backup your HTML Theme before making any changes. Better safe than sorry.
2. Click on the arrow-down button and select Edit HTML.
3. Find the widget you want to edit, to simplify your search click on "Jump to widget" and select the widget.
4. Search <b:includable id=’main’> then add the first code AFTER IT, the first code is <b:if cond=’data:blog.isMobileRequest == “false”‘>
5. Lastly, search </b:includable> and then add the second code BEFORE IT, the second code is  </b:if>

Don't forget to SAVE  after adding the HTML codes. I hope it works for your website as it worked on mine. I'm not a web developer, so proceed at your own risk. 



No comments

Post a Comment