March 16, 2019

How to Display/Hide Widgets in Right Side on Blogger

By default, Blogger displays all the widgets on each and every page of the Website. We can control the widgets by hiding it or displaying it on a specific site using few Scripts. For pages like About us , Contact us etc, you won’t need widgets and in that case, you have to hide the unnecessary widgets. Even specific widgets can be hidden/shown on the side bar of the blogger. To do this, just follow the steps below.

show-hide-blogger-widgets

Steps to Display/Hide Widgets in Right Side on Blogger

Step 1 : Go to your Blogger Dashboard and click on “Layouts“. From there select the gadget that you want to hide it on your blog.

Step 2 : Click on “Edit” and you will redirect to the widget ID on the top as shown in the picture below.

configure-profile

Step 3 : Copy the Widget ID , you will need it in the next step.

Step 4 : Go to “Template” and click on “Edit HTML” and search for the profile ID.

Step 5 : It must look something like the code given below

<b:widget id='Profile1' locked='false' title='About Me' type='Profile'>
 <b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <h2><data:title/></h2>
</b:if>
 <div class='widget-content'>
 <b:if cond='data:team == &quot;true&quot;'> <!-- team blog profile -->
 <ul>
 <b:loop values='data:authors' var='i'>
 <li><a class='profile-name-link g-profile' expr:href='data:i.userUrl' expr:style='&quot;background-image: url(&quot; + data:i.profileLogo + &quot;);&quot;'><data:i.display-name/></a></li>
 </b:loop>
 </ul>
 <b:else/> <!-- normal blog profile -->
 <b:if cond='data:photo.url != &quot;&quot;'>
 <a expr:href='data:userUrl'><img class='profile-img' expr:alt='data:photo.alt' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/></a>
 </b:if>
 <dl class='profile-datablock'>
 <dt class='profile-data'>
 <a class='profile-name-link g-profile' expr:href='data:userUrl' expr:style='&quot;background-image: url(&quot; + data:profileLogo + &quot;);&quot;' rel='author'>
 <data:displayname/>
 </a>
 <b:if cond='data:hasgoogleprofile'>
 <br/>
 <div class='g-follow' data-annotation='bubble' data-height='20' expr:data-href='data:userUrl'/>
 </b:if>
 </dt>
 <b:if cond='data:showlocation == &quot;true&quot;'>
 <dd class='profile-data'><data:location/></dd>
 </b:if>
 <b:if cond='data:aboutme != &quot;&quot;'><dd class='profile-textblock'><data:aboutme/></dd></b:if>
 </dl>
 <a class='profile-link' expr:href='data:userUrl' rel='author'><data:viewProfileMsg/></a>
 </b:if>
 <b:include name='quickedit'/>
 </div> </b:includable> </b:widget>

To Hide the Widget on Homepage

Add two codes shown below on the exact place as mentioned.

<b:widget id='Profile1' locked='false' title='About Me' type='Profile'>
 <b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'> // Add this line
<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <h2><data:title/></h2>
</b:if>
 <div class='widget-content'>
 <b:if cond='data:team == &quot;true&quot;'> <!-- team blog profile -->
 <ul>
 <b:loop values='data:authors' var='i'>
 <li><a class='profile-name-link g-profile' expr:href='data:i.userUrl' expr:style='&quot;background-image: url(&quot; + data:i.profileLogo + &quot;);&quot;'><data:i.display-name/></a></li>
 </b:loop>
 </ul>
 <b:else/> <!-- normal blog profile -->
 <b:if cond='data:photo.url != &quot;&quot;'>
 <a expr:href='data:userUrl'><img class='profile-img' expr:alt='data:photo.alt' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/></a>
 </b:if>
 <dl class='profile-datablock'>
 <dt class='profile-data'>
 <a class='profile-name-link g-profile' expr:href='data:userUrl' expr:style='&quot;background-image: url(&quot; + data:profileLogo + &quot;);&quot;' rel='author'>
 <data:displayname/>
 </a>
 <b:if cond='data:hasgoogleprofile'>
 <br/>
 <div class='g-follow' data-annotation='bubble' data-height='20' expr:data-href='data:userUrl'/>
 </b:if>
 </dt>
 <b:if cond='data:showlocation == &quot;true&quot;'>
 <dd class='profile-data'><data:location/></dd>
 </b:if>
 <b:if cond='data:aboutme != &quot;&quot;'><dd class='profile-textblock'><data:aboutme/></dd></b:if>
 </dl>
 <a class='profile-link' expr:href='data:userUrl' rel='author'><data:viewProfileMsg/></a>
 </b:if>
 <b:include name='quickedit'/>
 </div>
</b:if> // Add this line
</b:includable> </b:widget>

To Show Blogger Widget only in Post Pages

<b:widget id='Profile1' locked='false' title='About Me' type='Profile'>
 <b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'> // Add this line
<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <h2><data:title/></h2>
</b:if>
 <div class='widget-content'>
 <b:if cond='data:team == &quot;true&quot;'> <!-- team blog profile -->
 <ul>
 <b:loop values='data:authors' var='i'>
 <li><a class='profile-name-link g-profile' expr:href='data:i.userUrl' expr:style='&quot;background-image: url(&quot; + data:i.profileLogo + &quot;);&quot;'><data:i.display-name/></a></li>
 </b:loop>
 </ul>
 <b:else/> <!-- normal blog profile -->
 <b:if cond='data:photo.url != &quot;&quot;'>
 <a expr:href='data:userUrl'><img class='profile-img' expr:alt='data:photo.alt' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/></a>
 </b:if>
 <dl class='profile-datablock'>
 <dt class='profile-data'>
 <a class='profile-name-link g-profile' expr:href='data:userUrl' expr:style='&quot;background-image: url(&quot; + data:profileLogo + &quot;);&quot;' rel='author'>
 <data:displayname/>
 </a>
 <b:if cond='data:hasgoogleprofile'>
 <br/>
 <div class='g-follow' data-annotation='bubble' data-height='20' expr:data-href='data:userUrl'/>
 </b:if>
 </dt>
 <b:if cond='data:showlocation == &quot;true&quot;'>
 <dd class='profile-data'><data:location/></dd>
 </b:if>
 <b:if cond='data:aboutme != &quot;&quot;'><dd class='profile-textblock'><data:aboutme/></dd></b:if>
 </dl>
 <a class='profile-link' expr:href='data:userUrl' rel='author'><data:viewProfileMsg/></a>
 </b:if>
 <b:include name='quickedit'/>
 </div>
</b:if> // Add this line
</b:includable> </b:widget>

To Hide Widget on Specific Page

<b:widget id='Profile1' locked='false' title='About Me' type='Profile'>
 <b:includable id='main'>
<b:if cond='data:blog.url != "URL of the page"'> // Add this line
<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <h2><data:title/></h2>
</b:if>
 <div class='widget-content'>
 <b:if cond='data:team == &quot;true&quot;'> <!-- team blog profile -->
 <ul>
 <b:loop values='data:authors' var='i'>
 <li><a class='profile-name-link g-profile' expr:href='data:i.userUrl' expr:style='&quot;background-image: url(&quot; + data:i.profileLogo + &quot;);&quot;'><data:i.display-name/></a></li>
 </b:loop>
 </ul>
 <b:else/> <!-- normal blog profile -->
 <b:if cond='data:photo.url != &quot;&quot;'>
 <a expr:href='data:userUrl'><img class='profile-img' expr:alt='data:photo.alt' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/></a>
 </b:if>
 <dl class='profile-datablock'>
 <dt class='profile-data'>
 <a class='profile-name-link g-profile' expr:href='data:userUrl' expr:style='&quot;background-image: url(&quot; + data:profileLogo + &quot;);&quot;' rel='author'>
 <data:displayname/>
 </a>
 <b:if cond='data:hasgoogleprofile'>
 <br/>
 <div class='g-follow' data-annotation='bubble' data-height='20' expr:data-href='data:userUrl'/>
 </b:if>
 </dt>
 <b:if cond='data:showlocation == &quot;true&quot;'>
 <dd class='profile-data'><data:location/></dd>
 </b:if>
 <b:if cond='data:aboutme != &quot;&quot;'><dd class='profile-textblock'><data:aboutme/></dd></b:if>
 </dl>
 <a class='profile-link' expr:href='data:userUrl' rel='author'><data:viewProfileMsg/></a>
 </b:if>
 <b:include name='quickedit'/>
 </div>
</b:if> // Add this line
</b:includable> </b:widget>

To hide widgets in Static Pages

<b:widget id='Profile1' locked='false' title='About Me' type='Profile'>
 <b:includable id='main'>
<b:if cond='data:blog.pageType != "static_page"'> // Add this line
<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <h2><data:title/></h2>
</b:if>
 <div class='widget-content'>
 <b:if cond='data:team == &quot;true&quot;'> <!-- team blog profile -->
 <ul>
 <b:loop values='data:authors' var='i'>
 <li><a class='profile-name-link g-profile' expr:href='data:i.userUrl' expr:style='&quot;background-image: url(&quot; + data:i.profileLogo + &quot;);&quot;'><data:i.display-name/></a></li>
 </b:loop>
 </ul>
 <b:else/> <!-- normal blog profile -->
 <b:if cond='data:photo.url != &quot;&quot;'>
 <a expr:href='data:userUrl'><img class='profile-img' expr:alt='data:photo.alt' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/></a>
 </b:if>
 <dl class='profile-datablock'>
 <dt class='profile-data'>
 <a class='profile-name-link g-profile' expr:href='data:userUrl' expr:style='&quot;background-image: url(&quot; + data:profileLogo + &quot;);&quot;' rel='author'>
 <data:displayname/>
 </a>
 <b:if cond='data:hasgoogleprofile'>
 <br/>
 <div class='g-follow' data-annotation='bubble' data-height='20' expr:data-href='data:userUrl'/>
 </b:if>
 </dt>
 <b:if cond='data:showlocation == &quot;true&quot;'>
 <dd class='profile-data'><data:location/></dd>
 </b:if>
 <b:if cond='data:aboutme != &quot;&quot;'><dd class='profile-textblock'><data:aboutme/></dd></b:if>
 </dl>
 <a class='profile-link' expr:href='data:userUrl' rel='author'><data:viewProfileMsg/></a>
 </b:if>
 <b:include name='quickedit'/>
 </div>
</b:if> // Add this line
</b:includable> </b:widget>

By the Above Codes., we can Display and Hide Widgets in Sidebar on Blogger

 

About the author 

Imran Uddin


{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}