Display/hide widget on specific pages in Blogger

When you add a widget (or a gadget as Blogger would call it) to your blog, by default the widget would appear on all pages –homepage, index, archive, post and static pages. But what if you want a certain widget to appear only on a certain page or pages, can it be done? In other words can you select on which page/pages the widget would or would not appear?  The answer is yes you can -by using Blogger conditional tags.

Note: This trick doesn't work with Labels, Archive and Followers gadgets. For these gadgets you want to use the CSS's display none method.

Let us proceed,

 

1. Find your widget or section Id

To address a widget or a section in HTML, you need to know its Id. Here’s how to find a widget or section Id.

 

2. Locate the widget code in HTML

  1. Go to Dashboard > Design > Edit HTML.
  2. Check the  Expand Widget Templates check box on top right of the HTML window.
  3. Find your widget in the HTML by using Ctrl+F and entering the widget Id in the search box.

Your widget code might look like this. It may be a little different, but it’s okay. Just pay attention to the highlighted lines. Widget content is contained in between those two lines -in "includable" section.

<b:widget id='WidgetID' locked='false' title='Widget title' type='HTML'>
<b:includable id='main'>  
    <b:if cond='data:title != &quot;&quot;'> 
    <h2 class='title'><data:title/></h2> 
  </b:if> 
  <div class='widget-content'> 
    <data:content/> 
  </div> 
<b:include name='quickedit'/> 
</b:includable> 
</b:widget>

 

3. Choose the appropriate conditional tag

I listed some conditional tags in another post -Targeting specific pages with conditional tag. Copy your desired tag from there and apply it here.

 

4. Apply the tag

Paste the tag (from step 3) immediately after <b:includable id='main'> and the code line 11 to 15 immediately before </b:includable>, as shown below.

<b:widget id='WidgetID' locked='false' title='Widget title' type='HTML'>
<b:includable id='main'> 
PUT CONDITIONAL TAG HERE  
  <b:if cond='data:title != &quot;&quot;'> 
    <h2 class='title'><data:title/></h2> 
  </b:if> 
  <div class='widget-content'> 
    <data:content/> 
  </div> 
<b:include name='quickedit'/> 
<b:else/>
<style type='text/css'>
#WidgetID {display:none;}/*to hide empty widget box*/
</style>
</b:if> 
</b:includable> 
</b:widget>

Replace WidgetID in line 13 with the widget ID from code line 1.

The code will check whether the condition is true or false:

  • If the result is true, it executes (and display) the widget’s content.
  • If the result is false, it skips the content and hide the widget.
    You need to hide the widget because in most templates the content-less widget will still appear -as an empty box.

 

5. Save and view

Click Save Template button and view your blog.

 

That’s all to it. Enjoy!

 

Update Nov 2010
Revised code to prevent empty widget box from appearing on other pages.

 

Technorati Tags: ,

88 comments to "Display/hide widget on specific pages in Blogger"

fitri oh fitri February 25, 2010 at 11:00 PM    

wei, xreti la. haha






http://fitridzulkifli.blogspot.com

Greenlava February 27, 2010 at 11:07 AM    

@fitri oh fitri
Ape yang tak reti nyer?

gxg March 16, 2010 at 5:05 AM    

Very nice tip! I actually figured it out myself, but I didn't know the constants for static pages & other.
But isn't the condition for b and d the same?

Greenlava March 16, 2010 at 3:07 PM    

@gxg
Hey thanks for pointing that out. I corrected it.

varun.g April 23, 2010 at 2:28 AM    

I bookmarked your blog.Nice.some of them are really rubbish.beating about the bush.you made it simple thanks

ryansael May 23, 2010 at 12:07 PM    

wow, many thanks very useful post!

Greenlava May 23, 2010 at 2:27 PM    

@ryansael
Welcome, do enjoy you visit and subscribe to stay updated.

عرفان خیراندیش (حرف حساب) June 5, 2010 at 1:17 AM    

Hi
Every thing you do you do it perfect. Thanks

Greenlava June 6, 2010 at 4:32 PM    

@عرفان خیراندیش (حرف حساب)
You're welcome

Korin July 25, 2010 at 3:44 PM    

I hope that the writer is reading this. I need to have my ads show only on static pages and post pages. I can't seem to get it working, please help!

Greenlava July 25, 2010 at 8:17 PM    

@Korin
Use this:
[b:if cond='data:blog.pageType == "item"']
WIDGET CONTENT HERE
[b:else/]
[b:if cond='data:blog.pageType == "static_page"']
WIDGET CONTENT HERE
[b:else/]
[/b:if]
[/b:if]

WIDGET CONTENT is the codes from line 4 to 9 in step 3.

[Dani] August 1, 2010 at 10:05 AM    

Hey there!
I'm was hoping to be able to add the Blogger Labels widget and the Archives widget to a static page (preferably with no other widgets on it but those two), but it will not allow me to do so. I tried the followers widget with the same outcome. Does it have to be an HTML widget, or can this code work for other widgets?

Dani

Greenlava August 1, 2010 at 7:57 PM    

@[Dani]
Apparently this hack doesn't work with Labels, Archive and Followers widgets.
Maybe you want to try another method.

Cracksevens August 12, 2010 at 11:37 AM    

WAHH!!! tq2!! @Greenlava..leh x tgk2 kan blog aq nh..www.cracksevens.co.cc
aq nak centerkan header aq tuh..camne ek?

Greenlava August 12, 2010 at 12:52 PM    

@Cracksevens
Go to Design > Template Designer > Advanced > Add CSS and add this:
.header-inner img {margin: 0 auto !important;}
.header-inner {text-align:center !important;}

Cracksevens August 13, 2010 at 12:52 AM    

THANK YOUUUUUUUU!!!!!

Cracksevens August 19, 2010 at 11:15 PM    

sori greenlava..out topic skit..aq nye blog bile g kat post mane2..xkuar title post tu kat title bar tu..camne ek?

Greenlava August 20, 2010 at 2:53 PM    

@Cracksevens
Nampak elok jer

Cracksevens August 20, 2010 at 4:47 PM    

hah..sori..aq tukar template tros..

adam September 17, 2010 at 11:27 PM    

how do you remove the squares where the widget used to be? it gets hidden ok but there is a rectangle or square where it would normally appear?

Zeehunter September 22, 2010 at 3:09 PM    

Man Imba dude.
I am u r fan man whoever wrote this blog.
It worked
Thanks Thanks Thanks
http://zeehunter.blogspot.com

Greenlava September 22, 2010 at 4:23 PM    

@Zeehunter
A true fan subscribes, follows, retweets and shares :)

Charlotte October 11, 2010 at 12:28 AM    

I have made style changes to the static pages. Now I want the .main on each of the static pages to be different. I put .main as clear in the static page html. Now how do I change the .main on each page?

Greenlava October 11, 2010 at 10:12 AM    

@Charlotte
To apply styles to individual static pages, you just need to add a style tag on top of each page content. You do this in post editor HTML mode, like this:
[style]
.main {CSS PROPERTIES IN HERE}
[/style]
YOUR STATIC PAGE CONTENT HERE

Welcome October 19, 2010 at 12:30 AM    

Hi,

I have used this code and it has worked really well. The only problem i have came across is that there is an emtpy box appearing at the top of my other pages as well. Do you know why this happens. Is there a way to get rid of it.

You can have a look at : www.emoviesedinburgh.blogspot.com to see what i mean.

Thank

Ricky

Greenlava October 20, 2010 at 9:22 AM    

@Welcome
Try putting this code after [body]

[style]
#"BlogList1 {display:none;}
[/style]

Yana January 9, 2011 at 12:13 PM    

a very cool post... very useful!
you are amazing!

Riz2011,  February 22, 2011 at 12:57 PM    

Hi Greenlava,

boleh tolong tak macamana nak HIDE OutBrain Star Rating widget dari page navigation result? pada main page ok tapi bila klik kat page 2 atau next OutBrain Star Rating widget ni keluar lak. saya nak widget ni pada post je

Engineered to the MAX February 22, 2011 at 10:02 PM    

So I'm trying to only include this on my individual article pages that are reached when a reader clicks on an article title. I figured the way I would do this is by using "if=main page than do nothing else do something" logic. But I'm running into problems. This worked, for a single article:

[b:widget id='HTML2' locked='false' title='Floating Social Media Buttons' type='HTML']
[b:includable id='main']
[b:if cond='data:blog.url == "http://engineeredtothemax.blogspot.com/"']
BLAH for don't show
[b:else/]
BLAH for show
[/b:if]
[/b:includable]
[/b:widget]

I then tried to add an or statement to the if clause, and it generated a test page, but when I went to the actual page, it didn't show up anywhere:

[b:if cond='data:blog.url == "http://engineeredtothemax.blogspot.com/"||"http://engineeredtothemax.blogspot.com/p/engineered-denver-sports.html"']
BLAH for don't show
[b:else/]
BLAH for show
[/b:if]
[/b:includable]
[/b:widget]

Then I decided to try the if, elseif, else tree to include another page that I'd be hidden on, but that ended the same way as the or statement:

[b:if cond='data:blog.url == "http://engineeredtothemax.blogspot.com/"']
BLAH for don't show
[b:elseif cond='data:blog.url == "http://engineeredtothemax.blogspot.com/p/engineered-denver-sports.html"']
BLAH for don't show
[b:else/]
BLAH for show
[/b:elseif]
[/b:if]
[/b:includable]
[/b:widget]

Any suggestions, even though this isn't truly related to this article?

What is related, is that I get a white box across the center of my page. How do I get rid of that?

Greenlava February 22, 2011 at 10:22 PM    

@Riz2011
Rasanya awak sekarang menggunakan condition ini:
[b:if cond='data:blog.url != data:blog.homepageUrl']

sila gantikan dengan yang ini:
[b:if cond='data:blog.pageType == "item"']

Greenlava February 22, 2011 at 11:02 PM    

@Engineered to the MAX
1. To fix the floating button widget width, remove this:
[center][p style="font-family: tahoma,arial; font-size: 12px; width: 55px; margin: 0pt;">Share the brilliance[/p][/center]

2. I guess what you want to do is display the widget only on post pages.
If that's the case, try this:
[b:includable id='main']
[b:if cond='data:blog.pageType == "item"']
BLAH for show
[/b:if]
[/b:includable]

lighttraveler March 4, 2011 at 2:40 AM    

I have a labels page and I want the labels to show up only in the labels page, how do I hide it from the rest of my pages.

[b:widget id='Label1' locked='false' title='Labels' type='Label']
[b:includable id='main']
[b:if cond='data:title']
[h2]
[/b:widget]

http://www.quicktattletails.com/p/labels.html

Any help would be very much appreciated!

Greenlava March 4, 2011 at 11:44 AM    

@lighttraveler
[b:widget id='Label1' locked='false' title='Labels' type='Label']
[b:includable id='main']
[b:if cond='data:blog.url == "http://www.quicktattletails.com/p/labels.html"']
.
.
[/b:if]
[/b:includable]
[/b:widget]

lighttraveler March 4, 2011 at 7:04 PM    

It didn't work, any other suggestions?

Greenlava March 4, 2011 at 10:35 PM    

@lighttraveler
It should work, if you entered the code correctly that is.
Why don't you post the code on my Facebook page.
starting from [b:widget id='Label1' locked='false' title='Labels' type='Label']
until
[/b:widget]

I'll add the conditional and repost there.

Art Attack April 9, 2011 at 3:32 PM    

hi
is there a way to hide an image in a post from "post page" but NOT from "main page" ?

thank you

Greenlava April 11, 2011 at 9:54 AM    

@Art Attack
First, give the image an ID.
Then conditionally hide the image (ID) using CSS's display none method tutorial. In your case replace the static page conditional with post page conditional.

Noname April 14, 2011 at 6:36 PM    

was it possible to show followers widget on homepage only?? Everytime i tried to add [b:if cond='data:blog.url == data:blog.homepageUrl'] it'll return to normal again like haven't been edited before...

Greenlava April 15, 2011 at 10:19 PM    

@Noname
For Followers widget use CSS's display none method.

Harvey44 May 29, 2011 at 7:44 PM    

This worked well for me thank you Greenlava.

I realized that I not only want the hidden widget to show up on home page, but on the individual post pages. I only want to hide them on static pages.

How to do this? Can I change he conditional code to say "hid widget on static pages (only) instead of show it on the home page?

Harvey44 May 30, 2011 at 10:49 AM    

I figured it out! Change == to != and change the homepage.URL to "static_page".

Greenlava May 30, 2011 at 10:55 AM    

@Harvey44
Use static page conditional + "not equal" operator:

[b:if cond='data:blog.pageType != "static_page"']

it will show the widget only on pages other than static pages.

Custo-Minz June 9, 2011 at 2:03 AM    

I am very new to this but I am trying to remove my sidebars from all stand alone and post pages. I have tried other methods of removing the sidebar, they didn't work for me. Therefore I am attempting to try this, but I am having one problem, I don't know exactly where to put conditional tags. This is because my coding seems to be slightly different

(Below is an example)








(/div>


(div id='backlinks-container'>
(div expr:id='data:widget.instanceId + "_backlinks-container"'>



(/div>
(/div>
(/div>








(h2 class='title'>

Please help, if I need to provide any other information please let me know.

Greenlava June 11, 2011 at 12:58 AM    

@Custo-Minz
Follow this tutorial:
Apply different layout/styling to static pages
to hide the sidebars on static pages.

And to hide them on post pages, repeat the same steps but this time use this conditional tag:
[b:if cond='data:blog.pageType == "item"']

Prayag Verma July 3, 2011 at 11:06 PM    

thanks a lot

kamaunyrroh July 15, 2011 at 4:01 PM    

This post is understandeable but, what if I want to put a picture on a certain page. Does this illustration work for me.

Greenlava July 17, 2011 at 6:36 PM    

@kamaunyrroh
This method should work on anything, as long as it lies in a widget (except Label, Archives and Followers of course).

Marc Snyder July 29, 2011 at 3:22 AM    

Hi Greenlava,

What I'm trying to do is (I think) a mix of what you refer to in your answers 31 and 44. I want the floating bar on posts (with individual statistics for each post) but I don’t want it to appear on my static or landing pages. Can you help?

MS

Greenlava July 31, 2011 at 7:26 PM    

@Marc Snyder
I think answer 31 alone is enough to achieve what you've described. Have you tried it?

Anonymous,  August 9, 2011 at 5:24 AM    

Hello,

I cannot figure out why hiding the empty box it is not working (the rest works, the widget is only on the homepage, but the other pages have a space left behind):

[b:widget id='Text1' locked='false' title='' type='Text']
[b:includable id='main']
[b:if cond='data:blog.url == data:blog.homepageUrl']
[!-- only display title if it's non-empty --]
[b:if cond='data:title != ""']
[h2 class='title'][data:title/][/h2]
[/b:if]
[div class='widget-content']
[data:content/]
[/div]

[b:include name='quickedit'/]
[b:else/]
[style type='text/css']
#Text1 {display:none;} /*to hide empty widget box*/
[/style]
[/b:if]
[/b:includable]
[/b:widget]

Many thanks!

Greenlava August 11, 2011 at 1:42 PM    

@Anonymous
The code looks perfect to me.
Maybe the space is something else.

Ryan August 22, 2011 at 12:22 PM    

This is great because it will allow my blog to be more interactive.

Anonymous,  October 3, 2011 at 12:31 PM    

same as post #25: "I have used this code and it has worked really well. The only problem i have came across is that there is an emtpy box appearing at the top of my other pages as well."

your response:

Try putting this code after [body]

[style]
#"BlogList1 {display:none;}
[/style]


where's [body] ?

:)

Greenlava October 3, 2011 at 4:46 PM    

@Anonymous
That was before the code update in Nov 2010.
The current code hides the empty box in Step 4 code line 12~1).

Anonymous,  October 4, 2011 at 4:36 AM    

Thank you Greenlava but I still have the empty widget (or marge) into all others pages than the home page. but maybe I have too much widgets (27).

If you have a time to look at my blog: http://moto-links.blogspot.com/

Thank you again

Greenlava October 5, 2011 at 5:29 PM    

@Anonymous
Replace "WidgetID" (in #WidgetID) with your own widget ID.

Jose December 19, 2011 at 5:16 PM    

I am trying to hide one widget in a static page but it is not working at all. The code in the if and else section is being displayed in all the pages.
Could you help?

[b:widget id='html9' locked='false' type='html']
[b:includable id='main']
[b:if cond='data:blog.url == "http://90mn90d-en.blogspot.com/p/quienes-somos.html"']

[p]DONAR QUIENES[/p]
[b:else]
[iframe width="250" height="199" src="http://www.youtube.com/embed/STryg59skt8" frameborder="0" allowfullscreen][/iframe]
[p]DONAR[/p]
[/b:else]
[/b:if]
[/b:includable]
[/b:widget]

Nukeufo89's Blog December 19, 2011 at 8:58 PM    

tak ada contoh ke? saya nak tahu apa hasilnya tutorial ni...

Greenlava December 20, 2011 at 2:03 PM    

@Jose
So you want to hide the video from that static page...try this:
[b:widget id='html9' locked='false' type='html']
[b:includable id='main']
[b:if cond='data:blog.url == "http://90mn90d-en.blogspot.com/p/quienes-somos.html"']
[p]DONAR QUIENES[/p]
[b:else/]
[iframe width="250" height="199" src="http://www.youtube.com/embed/STryg59skt8" frameborder="0" allowfullscreen="true"][/iframe]
[p]DONAR[/p]
[/b:if]
[/b:includable]
[/b:widget]

Greenlava December 20, 2011 at 2:11 PM    

@Nukeufo89's Blog
Contoh ada dalam blog ni.
Tengok widget Recent Posts di sidebar. Cuba awak pergi ke homepage, widget ni takde kat sana sebab saya dah apply trick ni (untuk buat widget ni keluar dalam post pages sahaja).

Analyst February 6, 2012 at 2:38 PM    

I want to block slider on certain pages. Its code is in template. Can you help me to figure it out for Indian-Share-Tips.Com

Regards

Greenlava February 6, 2012 at 7:45 PM    

@Analyst
This tutorial is not applicable to your slider because it isn't a widget (as the slider is hard-coded into the template HTML).
You want to follow another tutorial: Targeting specific pages/URLs with conditional tags

Day Milovich February 21, 2012 at 6:59 PM    

how to display widget only in special label? e.g. i have a label "facebook" and i want "this widget" display only in posting page label "facebook". how to? thanks!

Kelly February 25, 2012 at 6:26 AM    

I'm not sure if you've answered this before, but how do you put archives on a static page (and then remove it from the other pages? Thanks!

Greenlava February 25, 2012 at 3:54 PM    

@Kelly
1. Create a page and get the URL.
2. Apply this conditional to the Archive widget:
[b:if cond='data:blog.url == "PUT_URL_HERE"']

Online Clothing study March 19, 2012 at 2:44 PM    

thank you for this guide.

Hello,

Is there a way to apply a conditional tag to a conditional tag?

I added this Read Only code to my site to compress the posts. I added the condition to not compress the post if it is the first post on the page, but I want to make it so the "First Post" condition is applied to ONLY the homepage, so that on the Labels and Archives pages ALL of the posts are compressed. Is that possible?

Thanks so much!!!

Anonymous,  March 31, 2012 at 10:36 PM    

The tip for hiding the widget (step 4) is GREAAAAAAAAAAAAAAT !!!

Thanks a lot !!! (and hello from France ;-))

Greenlava April 2, 2012 at 12:50 AM    

@Curtain Up Cookie Design
Sure that's possible. Here it is:
[b:if cond='data:blog.url == data:blog.homepageUrl']
[b:if cond='data:post.isFirstPost']
PUT READ ONLY CODE HERE
[/b:if]
[/b:if]

Bikky May 28, 2012 at 9:59 AM    

Hot to Hide Widget Item page only using conditional tag, not css.

Bikky May 30, 2012 at 12:37 PM    

<b:if cond='data:blog.url == &quot;/p/privacy-policy.html&quot;'>
<style type='text/css'>.post-header, #comments, #PopularPosts1, #HTML7, #BlogArchive1, #HTML10 {display:none}</style>
</b:if>
<b:if cond='data:blog.url == &quot;/p/contact-form.html&quot;'>
<style type='text/css'>.post-header, #comments, #PopularPosts1, #HTML7, #BlogArchive1, #HTML10 {display:none}</style>
</b:if>
<b:if cond='data:blog.url == &quot;/p/disclaimer.html&quot;'>
<style type='text/css'>.post-header, #comments, #PopularPosts1, #HTML7, #BlogArchive1, #HTML10 {display:none}</style>
</b:if>

Bikky May 30, 2012 at 12:37 PM    

Have you any idea to minify this code.. please help me..

Greenlava June 1, 2012 at 3:20 PM    

@Bikky
Not much can be done to minify it.
However, there is better way of applying CSS to individual page. I wrote about it here in section III: Apply different layout/styling to static pages.

Blogger Biasa June 8, 2012 at 2:23 PM    

Thank you very much for sharing this useful blogging tips, if anyone want to get listed on my blog directory please visit my blog

Harald July 27, 2012 at 1:58 AM    

Hi,
great site with a lot of help.
I'm already successfull in hiding the sidebar etc. on a static page. But now I like to hide the same on one label site (not on all !)
Is that possible ?
My blog: http://lazyharrytest.blogspot.de
and the site: http://lazyharrytest.blogspot.de/search/label/Maps

Ananyaa Ravi July 27, 2012 at 3:19 PM    

Hey Greenlava,
another issue: so I want my twitter feed to appear only on this page:
http://tfi-alumni-impact.blogspot.in/p/mouthpiece.html

My code looks like this:-

<b:widget id='HTML4' locked='false' title='Twitter' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == &quot;http://tfi-alumni-impact.blogspot.in/p/mouthpiece.html&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
<b:else/>
<style type='text/css'>
#HTML4 {display:none;}/*to hide empty widget box*/
</style>
</b:if>
</b:includable>
</b:widget>

As you saw on the page, the twitter feed isn't appearing on ANY page :(
What went wrong?
Thanks again and sorry for all the trouble!

Greenlava July 31, 2012 at 2:19 AM    

@Harald
Yes that's possible. Use this conditional tag:
<b:if cond='data:blog.url == "http://lazyharrytest.blogspot.de/search/label/Maps"'>

Harald July 31, 2012 at 3:32 AM    

Thx,

I've tried that, but it doesn't work. Then I tried ist with blogspot.com instead of blogspot.de, and to my surprise it worked,although the blog has a .de ending, dont't understand that.

Blogger Widget July 31, 2012 at 1:15 PM    

It works for me! You have awesome articles on Blogger.

Greenlava August 1, 2012 at 7:10 PM    

@Ananyaa Ravi
Try replacing the .in country domain with .com like Harald did in comment #78.

Evita September 10, 2012 at 10:10 AM    

I just want to say thank you. Finally after many hours trying different things I found your site and my blog from blogger is now having widgets only on home page. Thank you so much.

Aman Deep September 29, 2012 at 2:59 AM    

you are simply Awesome! Thanks for your great posts

Mirza Sharz October 4, 2012 at 12:07 AM    

Very nice and useful tips for all bloggers who want to hide a widget in specific page. Thank you for sharing

jayr January 17, 2013 at 10:29 AM    

thanks mate, ive already hide one of my widget on my homepage.

Tricahyo Abadi March 25, 2013 at 3:36 PM    

Great!!! Thank you so much! You're awesome! Others still miss your 11-15 command.

kawsar April 9, 2013 at 12:34 AM    

thanks helped

aman verma May 16, 2013 at 4:25 AM    

Its amazing man...Truly deserves my comment..
You made everything simple..:)

Rachel Nguyen July 23, 2013 at 4:41 PM    

Concise and helpful. Thanks!

We love to hear from you! Leave us a comment.

To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool. Then paste the escaped code here. For personalized help, you can HIRE ME.

Click to go to top Click to comment