How To Show And Hide Widgets/Codes In Blogger Specific Pages

Share it Please

"Hide and show gadgets , Specific pages , Post , Pages , Archives , index, widgets , static page , home page"

You have noticed in bgbeginner blog home page many gadgets/widgets not showing. Some Blogger Beginner will be thing about how is it possible. It's a simple piece of code puts between your gadgets or widgets for specific pages. Now we show how to add this codes in your blog template and how is it works in your blog?

How To Show And Hide Widgets/Codes In Blogger Specific Pages

Why needs to hide or show gadgets in your blog

As some of you may have noticed, all the widgets/gadgets you add to your blog, will be displayed on all the pages by default, including the homepage as well. And I'm sure very few know that AdSense could disable your account in case you've put ad units inside the content of your contact or privacy policy pages. Therefore, hiding certain elements inside your blog pages is not only a matter of design, but it is also a requirement.

To hide (or show) widgets in particular posts, static pages, homepage or archive pages, you can use conditional tags.

There are some simple steps to puts these conditional tags to hide and show your gadgets. ( Please Read Carefully and First Backup your blog template) -

Step 1. Go to Blogger's Dashboard > Layout and name the HTML/Javascript gadgets or Official gadgets that you have already added. Doing this, it will be easier for you to identify the widgets that you have in your Blogger's template. Give it a unique title so that it does not match with any of the titles of any other widgets already added.

Step 2. Next Step , Go to Template and click on Edit HTML Button

Step 3. Now Click anywhrere inside the code area and press the CTRL+F Key to open the search box.

Step 4. Find the HTML of your widget by typing the widget's name in the search box - hit Enter.

Now , Let's find out the title for one of my blog widgets is "Site Links". After searching for the widget's name, I will find the similar in my blog template XML File.

<b:widget id='LinkList1' locked='false' title='Site Links' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

This code represents the widget/gadget that I have added in the Page Elements location (Layout).

Step 5. After you've found your widget's code, add the following conditional tags marked with red just below and above to hide the widget from specific pages or posts in Blogger. For instance, in case you want:

How to Show Widgets or HTML/JavaScript Codes

How To Show Widgets Only On Homepage ?

Paste Your desire Widgets html/javascript codes between the below two lines. It would display the gadget only on your website home page. It would also hide the same gadget from all of your statics pages and posts pages and it will only remain on homepage.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
Place your Widget Codes or HTML/JavaScript Codes
</b:if>

<b:widget id='LinkList1' locked='false' title='Site Links' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:if></b:includable>
</b:widget>

How To Show Widgets On Item or Post page ?

Paste your gadget html/javascript between these two lines. It will hide the gadgets from home page and will show the gadgets on all posts and static pages. So to do this just place the code in below given lines.

<b:if cond='data:blog.pageType == "item"'>
Place your Widget Codes or HTML/JavaScript Codes
</b:if>

<b:widget id='LinkList1' locked='false' title='Site Links' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'><b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:if></b:includable>
</b:widget>

How To Show Widgets Only On Static Pages?

If you want to display a widgets only on static pages then paste your desire gadget coding between in the two lines. So just add the gadget code in two lines and then save your template you will see the gadget only on statics pages.

<b:if cond='data:blog.pageType == "static_page"'>
Place your Widget Codes or HTML/JavaScript Codes
</b:if>

<b:widget id='LinkList1' locked='false' title='Site Links' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "static_page"'><b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:if></b:includable>
</b:widget>

How To Show Widgets Only On Particular Pages?

If you want to show some gadget only on your specifics and selected posts. then you may use the following code. enclose your gadget coding between the below these two lines. Remember you must be replace your desire post link with the blue color URL Of Selected Post code.

<b:if cond='data:blog.url == "URL of Particular Post/Page"'>
Place your Widget Codes or HTML/JavaScript Codes
</b:if>

<b:widget id='LinkList1' locked='false' title='Site Links' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:blog.url == "URL of Particular Post/Page"'><b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:if></b:includable>
</b:widget>

How To Display Widgets On Archive Pages ?

Sometime we need to show a widget only on archive page. So to that we will need to add a gadget code between these two lines code. copy gadget code and replace with the widget code goes here

<b:if cond='data:blog.pageType == "archive"'>
Place your Widget Codes or HTML/JavaScript Codes
</b:if>

<b:widget id='LinkList1' locked='false' title='Site Links' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "archive"'><b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:if></b:includable>
</b:widget>

How To Display Widget On Post Pages And Homepage

<b:if cond='data:blog.pageType != "static_page"'>
Place your Widget Codes or HTML/JavaScript Codes
</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType == "item"'>
Place your Widget Codes or HTML/JavaScript Codes
</b:if>
</b:if>

How To Display Widget On Homepage And Static Pages

<b:if cond='data:blog.pageType != "item"'>
Place your Widget Codes or HTML/JavaScript Codes
</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType == "static_page"'>
Place your Widget Codes or HTML/JavaScript Codes
</b:if>
</b:if>

How To Display Widgets On Posts And Static Pages?

<b:if cond='data:blog.pageType != "index"'>
Place your Widget Codes or HTML/JavaScript Codes
</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType == "static_page"'>
Place your Widget Codes or HTML/JavaScript Codes
</b:if>
</b:if>

How to Hide Widgets or HTML/JavaScript Codes

How To Hide Widgets Only On Homepage ?

<b:if cond='data:blog.url != data:blog.homepageUrl'>
Place your Widget Codes or HTML/JavaScript Codes
</b:if>

<b:widget id='LinkList1' locked='false' title='Site Links' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:blog.url != data:blog.homepageUrl'><b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:if></b:includable>
</b:widget>

How To Hide Widgets On Item or Post page ?

<b:if cond='data:blog.pageType != "item"'>
Place your Widget Codes or HTML/JavaScript Codes
</b:if>

<b:widget id='LinkList1' locked='false' title='Site Links' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:blog.pageType != "item"'><b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:if></b:includable>
</b:widget>

How To Hide Widgets Only On Static Pages?

<b:if cond='data:blog.pageType != "static_page"'>
Place your Widget Codes or HTML/JavaScript Codes
</b:if>

<b:widget id='LinkList1' locked='false' title='Site Links' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:blog.pageType != "static_page"'><b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:if></b:includable>
</b:widget>

How To Hide Widgets Only On Particular Pages?

<b:if cond='data:blog.url != "URL of Particular Post/Page"'>
Place your Widget Codes or HTML/JavaScript Codes
</b:if>

<b:widget id='LinkList1' locked='false' title='Site Links' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:blog.url != "URL of Particular Post/Page"'><b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:if></b:includable>
</b:widget>

How To Hide Widgets On Archive Pages ?

<b:if cond='data:blog.pageType != "archive"'>
Place your Widget Codes or HTML/JavaScript Codes
</b:if>

<b:widget id='LinkList1' locked='false' title='Site Links' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:blog.pageType != "archive"'><b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:if></b:includable>
</b:widget>

Note: Pay attention each time you're adding a new address which should end up with .com, otherwise it may not work.

Step 6. After you have added the conditional tags, Save Template and view your blog.

That's it!

Need Help

I hope you have enjoy this post and helpful for your blogging life. It's really improve your blog page speed and hide some unuseful content in specific pages. We hope that this technique will improve your knowledge and will make you able to add any widget in any part of your blog without any hard movement.
May be some people peoblem with adding conditional codes but if you're using again n again then you can easily add this code. Any one of them if getting any problem in implementation and wants quick troubleshooting then the below comment section is only for you to post your queries.

August 14, 2014