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!


"This site contains Affiliate links and as an Amazon Associate, I earn from qualifying purchases of a product/service at no added cost to you." ^_^

Travel Tips
  • For flights, Skyscanner is excellent for comparing the best airline deals.
  • For accommodations, our family trusts Booking.com for reasonable prices.


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 follow the steps meticulously, 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 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 on 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 back up 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 on Desktop Devices all you have to change is the word “true” to “false” simple as that. I’ll repeat the instructions above to ease 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 on 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 back up 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. 


Do you want to learn more blog tips and tricks? 

Have fun and be safe ^__^



Do you want more adventure?
Here is a Compilation of all my thrilling escapades over the past few years. Perhaps it's time to revisit your own bucket list and make some progress towards achieving your goals.

Where am I going next?
For my next adventure, we're thrilled to finally visit one of California's most breathtaking mountains – Mammoth Lake!

No comments

Post a Comment