Hide Blogger Widgets in Mobile Version

0
2672
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>

LEAVE A REPLY

Please enter your comment!
Please enter your name here