Simple tutorial about how to hide blogger widgets in mobile version
Making blogger templates to responsive gives more SEO rank than normal blogger templates, so after months of hardworking and template customization bloggers create responsive templates, but in the case of some blogger widgets we do not want to load this in our mobile view, so here is the simple technique to hide any widgets or html in mobile view.

Steps to Hide Blogger Widgets

Go-to Blogger dashboard
open Layout of your blog
blogger layout

Now copy the name of Widget that you want to hide, 
blogger layout editor

in our case it is social-counter
then open Template
Click Edit HTML
blogger template

Press Ctrl + F and paste our widget ID to find our Widget code
blogger template editor

Your code look like this, search until you find this code
<b:section class='social-counter sidebar' id='social-counter' maxwidgets='1' showaddelement='yes'>
        <b:widget id='LinkList56' locked='true' title='Social Counter' type='LinkList'>
          <b:includable id='main'>
            <b:if cond='data:title != &quot;&quot;'>
              <h2 class='title'><data:title/></h2>
            </b:if>
            <div class='widget-content'>
              <ul id='social'>
                <b:loop values='data:links' var='link'>
                  <li expr:class='&quot;social-item &quot; + data:link.name'>
<a expr:href='data:link.target'> <i class='item-icon fa'/>
<div class='remove-count'><data:link.name/>
</div><span class='item-text'>Followers</span> </a></li>
                </b:loop>
              </ul>
            </div>
          </b:includable>
        </b:widget>
      </b:section>
So this is our Widget code to hide
with the use of <b:if cond='data:blog.isMobileRequest == "false"'> you can hide any widget or html from your blog template
The final code look like this
<b:if cond='data:blog.isMobileRequest == "false"'>
      <b:section class='social-counter sidebar' id='social-counter' maxwidgets='1' showaddelement='yes'>
        <b:widget id='LinkList56' locked='true' title='Social Counter' type='LinkList'>
          <b:includable id='main'>
            <b:if cond='data:title != &quot;&quot;'>
              <h2 class='title'><data:title/></h2>
            </b:if>
            <div class='widget-content'>
              <ul id='social'>
                <b:loop values='data:links' var='link'>
                  <li expr:class='&quot;social-item &quot; + data:link.name'><a expr:href='data:link.target'> <i class='item-icon fa'/><div class='remove-count'><data:link.name/></div><span class='item-text'>Followers</span> </a></li>
                </b:loop>
              </ul>
            </div>
          </b:includable>
        </b:widget>
      </b:section>
</b:if>
blogger hide widget code

Syntax

<b:if cond='data:blog.isMobileRequest == "false"'>
 Widget code to hide in mobile devices
</b:if>


TechCybo

TechCybo

A Technolgy Blog about How-To Tutorials, Android, Programming, Blogging, Windows, Software Tips, Mobile Apps and Tricks for better Digital Life

Post A Comment: