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.
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.
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 == "item"'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <b:if cond='data:team == "true"'> <!-- 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='"background-image: url(" + data:i.profileLogo + ");"'><data:i.display-name/></a></li> </b:loop> </ul> <b:else/> <!-- normal blog profile --> <b:if cond='data:photo.url != ""'> <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='"background-image: url(" + data:profileLogo + ");"' 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 == "true"'> <dd class='profile-data'><data:location/></dd> </b:if> <b:if cond='data:aboutme != ""'><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 == "item"'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <b:if cond='data:team == "true"'> <!-- 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='"background-image: url(" + data:i.profileLogo + ");"'><data:i.display-name/></a></li> </b:loop> </ul> <b:else/> <!-- normal blog profile --> <b:if cond='data:photo.url != ""'> <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='"background-image: url(" + data:profileLogo + ");"' 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 == "true"'> <dd class='profile-data'><data:location/></dd> </b:if> <b:if cond='data:aboutme != ""'><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 == "item"'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <b:if cond='data:team == "true"'> <!-- 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='"background-image: url(" + data:i.profileLogo + ");"'><data:i.display-name/></a></li> </b:loop> </ul> <b:else/> <!-- normal blog profile --> <b:if cond='data:photo.url != ""'> <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='"background-image: url(" + data:profileLogo + ");"' 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 == "true"'> <dd class='profile-data'><data:location/></dd> </b:if> <b:if cond='data:aboutme != ""'><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 == "item"'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <b:if cond='data:team == "true"'> <!-- 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='"background-image: url(" + data:i.profileLogo + ");"'><data:i.display-name/></a></li> </b:loop> </ul> <b:else/> <!-- normal blog profile --> <b:if cond='data:photo.url != ""'> <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='"background-image: url(" + data:profileLogo + ");"' 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 == "true"'> <dd class='profile-data'><data:location/></dd> </b:if> <b:if cond='data:aboutme != ""'><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 == "item"'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <b:if cond='data:team == "true"'> <!-- 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='"background-image: url(" + data:i.profileLogo + ");"'><data:i.display-name/></a></li> </b:loop> </ul> <b:else/> <!-- normal blog profile --> <b:if cond='data:photo.url != ""'> <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='"background-image: url(" + data:profileLogo + ");"' 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 == "true"'> <dd class='profile-data'><data:location/></dd> </b:if> <b:if cond='data:aboutme != ""'><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
