How to Show and Hide Widgets in Blogger?

show-hide-widgets in bloggerBlogger Conditional Statements can be used to control the display of HTML elements on certain pages or to set different styles for different Pages. Some questions that are most asked are : How to Show blogger widget on homepage only? How can I show widgets only on sub pages? How can I hide widgets on Static pages? How to show widgets on selected pages in blogger? To answer all these questions today's tutorial will be a delicious one. Its really important to control widget Display in Blogger using Blogger Conditional Statements. Some widgets are meant for homepage only while some makes sense when you show it at your Contact Pages, About Me pages or static pages. So how do we actually set the conditional where to display an HTML element or widget and where to hide it? The trick is really simple. You just need to enclose your widgets in few pieces of conditional statements. So lets jump straight on how to manage widgets on different pages in blogger.

UPDATE Now you can use Conditional tags even for Mobile Devices!

Its often the HTML/JavaScript widget that is widely used for adding your customized widgets to Blogger and its mostly this widget that needs to be easily managed. Since you often paste some widget code inside HTML/JavaScript widgets so the only extra thing that you need to do in order to control widget’s display is to enclose that code between two pieces of code as shown in each control codes below,

Note:
  1. Item Pages Include Posts only
  2. Index Pages Include Homepage and Search/Label Pages

How to Show Widgets/HTML Only On Homepages?

Simply enclose the code inside HTML/JavaScript widget between these conditional lines,

<b:if cond='data:blog.url == data:blog.homepageUrl'>
WIDGET CODE GOES HERE
</b:if>
where WIDGET CODE GOES HERE is the code of the widget you want to show or hide.

How to Hide Widgets On Homepages?

Same procedure here,
<b:if cond='data:blog.pageType == "item"'>
WIDGET CODE GOES HERE
</b:if>

How To Show Widgets Only On Static Pages?

<b:if cond='data:blog.pageType == "static_page"'>
WIDGET CODE GOES HERE
</b:if>

How To Hide Widgets On Static Pages?

<b:if cond='data:blog.pageType != "static_page"'>
WIDGET CODE GOES HERE
</b:if>

How To Show a Widget On a Selected Post Only?

<b:if cond='data:blog.url == "URL OF Selected Post"'>
WIDGET CODE GOES HERE
</b:if>

How To Hide a Widget On a Selected Post?

<b:if cond='data:blog.url != "URL OF Selected Post"'>
WIDGET CODE GOES HERE
</b:if>

How to Show HTML On First Post of Homepage?

If you want to show HTML content on first post of your homepage and not on every post that are displayed on homepage then use the following syntax,
<b:if cond='data:post.isFirstPost'>
WIDGET CODE GOES HERE
</b:if>
Sometimes you would prefer showing a Featured or Latest ribbon image on the first post or you may wish to display some stuff only on first post summary, in that case you can surely enclose the HTML inside the above conditional statement.

How to Show Widget On Index Page?


Index pages include labels/search pages, archive pages and the Homepage.  To show widget or HTML on these pages use the following syntax,
<b:if cond='data:blog.pageType == "index"'>
WIDGET CODE GOES HERE
</b:if>

How to Hide Widget On Index Pages?

Use this code
<b:if cond='data:blog.pageType != "index"'>
WIDGET CODE GOES HERE
</b:if>

How to Show Widget On Search Page?

Search Page in Blogger blogs include all Label Pages and search pages displayed when a user searches a query using the search box.  To show widget or HTML on search pages use the following syntax,
<b:if cond='data:blog.searchLabel'>
WIDGET CODE GOES HERE
</b:if>

How To Control Blogger’s Official Widgets?

The same procedure can be applied to Blogger’s official widgets like About Me, Archives, Poll etc. For controlling that widgets do this,
  1. Go To Blogger > Design > Edit HTML
  2. Backup your template
  3. Check the Expand Widgets Templates Box
  4. Search for the title of the widget you want to control
  5. The code for the widget will look something similar to this one,
<b:widget id='HTML' locked='false' title='WIDGET-TITLE-HERE' type='Profile'>
<b:includable id='main'>
LARGE CHUNK OF WIDGET CODE
</b:includable> </b:widget>
On finding the title in place of WIDGET-TITLE-HERE you will find two similar codes like those I have shown in bolded blue  You just need to add the Controlling codes in the following manner. For example if you wish to show a widget at Homepage only then do this,
<b:widget id='HTML' locked='false' title='WIDGET-TITLE-HERE' type='Profile'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
LARGE CHUNK OF WIDGET CODE
</b:if>
</b:includable> </b:widget>

That’s it. Do the same for applying any controlling code. I hope this was useful :)

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

77 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Thank you for sharing.
    Although it is very simple but very useful!

    ReplyDelete
  2. Well Mohammad it does really works but there is a problem...

    I applied How To Hide Widgets On Static Pages?
    See this page http://samsexy98downloads.blogspot.com/p/table-of-contents.html

    Do you see those four rectangles in the sidebar..Those are the 4 hidden widgets (one rectangle for each)...So it doesn't looks good...

    Isn't there a way to hide the whole sidebar on static pages..???

    ReplyDelete
  3. @Linkfoci
    you are welcomed pal! :>

    @Sam
    Yeh this will occur for all widgets which exists but are hidden. I am afraid I tried a lot but the widgets bodies will still exist.
    And I have not tried it for whole of sidebar. You check and add the control codes below div id="right" and see if it works.

    @beben
    yeh true! :d

    ReplyDelete
  4. Hi Mohammad
    It did worked..The sidebar was completely hidden and there were no rectangles as well but there is a small problem that the Main Content width is still the same as it is when the sidebar is present...:(

    I don't know when blogger will make things simpler...:(

    ReplyDelete
  5. @Sam

    oh wow great boy! and dude its not always Blogger.. You are editing your template for free what else can blogger gift you with.. We should be thankful! :)

    ReplyDelete
  6. Mohammad that was like muuah. thank you young man. {''D

    Rog

    ReplyDelete
  7. @Mohammad
    I think you are right...
    Anyways waiting for your next articles which I think will be on SEO :)

    ReplyDelete
  8. Hello Mohammad :
    thats what i needed the most but when i tried your first step that is to include in Html/Javascript widget and add that two line and betwwen that the widget code,i doesnt work but when i did from "How To Control Blogger’s Official Widgets?" it work but i got a lot from this widget tks a lot and ya iam waiting for your post that how to post reply to comment in different ways like urs..

    ReplyDelete
  9. Thank you! Can you please tell us how to make the blogger blog a forum??

    ReplyDelete
  10. This is perfect! it really helped a great deal in understanding the whole process more easily and clearly. Great job Mohammad!

    ReplyDelete
  11. Welcomed brothers. I am really glad it worked for all of you. :)

    @Munazza
    Thank you so much mam! Its a pleasure to have you here :)

    ReplyDelete
  12. @Ayush

    Sorry I forgot to reply your question. Well pall a forum has a total different meaning and scripted structure. Blogger can offer you to create websites of any sort that shares content but not forums buddy.

    ReplyDelete
  13. Hey Mohammad Is there any code which hides a particular gadget completely from my blog..

    I mean the widget is there but not visible in blog anywhere..
    I want it for my new "Coming Soon" Widget...

    Thank You
    Samsexy98

    ReplyDelete
  14. @ Samsexy

    You can use two b:if codes if you want. But mohammad did not mention how to hide widgets on all post pages.

    ReplyDelete
  15. this is simple tip right.but more useful to me.thanx u verymuch

    http://www.bloggertrix.com/

    ReplyDelete
  16. @Blogger trix
    Looks like you are spamming your link which I don't like it..

    ReplyDelete
  17. nice :)
    but my question is how to make a gadget show only on 2 pages ? i.e. my homepage AND on the older post url

    ReplyDelete
  18. hi
    when i have an image in a post is there a way to show this image only in the main page but NOT in the post page?

    is it possible to do this hack with or something else?

    thanks

    ReplyDelete
  19. Salam.
    i've recently added music player to my blog,instructed to add html page and put direct links of mp3 in that, i did so. now the prob is..i want to hide that widget (direct links one), its shows everywhere :( .. i don't want it to appear anywhere at all.. please help :(

    ReplyDelete
  20. The widget with id HTML1 is not within a section (actual parent element is: b:if.) Every widget should be in a section.

    Error 500

    hello Mohamad,

    I keep getting the same message as above, can you do me a favor please?. I want to hide all widgets on my static page. I wonder, perhaps my template is not compatible with this method.

    Thanks.

    ReplyDelete
  21. hi zai, can i know how to make it on classic template?.. tq

    ReplyDelete
  22. I added widget from wibiya and it show only on homepage ,and i didnt change the code,so what i must do to show it in all pages ? thx

    ReplyDelete
  23. Mohammad
    what i got from the post is that we cant show the widget on the home page and posts page at same time??
    Correct Bro?

    ReplyDelete
    Replies
    1. @ Admin.. (not Mohammad)
      Absolutely wrong.. We can show widgets on the home page and posts page at same time.. To do this, you just have to hide that from static pages and it's done..!!

      hide from 404 pages too if needed
      the code for this is =




      WIDGET CODE

      Delete
    2. Sorry.. It seems code is disabled in comments here..
      Google it to find the same..

      Delete
  24. hi mohammad ! see my blog...http://www.wordpress-guru.tk there is a problem on suggestions page i want to get disappear the date header showing date on the page...what should i do ...plz help!!!...thank you for ur help in advance...

    ReplyDelete
  25. explain in nice another i will read this confuse

    my dobut cleared my blogger tricks..

    thanks brother

    ReplyDelete
  26. It isn't useful.
    IT IS EXREMELY USEFUL!!!
    Nice job,everything I needed is here!
    Thank You.

    ReplyDelete
  27. Thank you very much brother ! this helped me alot !
    My problem was that i added a post summaries code, but on static pages also the post summaries were being displayed, so i wanted to add a code that hide the gadgets being displayed on static pages ! and this worked.. thanks alot. give my blog a visit : http://stramaxon.blogspot.com

    ReplyDelete
  28. AoA Muhammad ! sir i didnot understand Exectly what u said
    i want this Plugin on my site only on post pages
    www.efunnypic.com
    i did exectly what u said
    Go To Blogger > Design
    Choose a HTML/JavaScript widget
    Paste the following code inside it,
    in Edit html it look like this
    div class='clear' id='container'>
    div class='content left'
    b:section class='main' id='main' showaddelement='no'
    b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/
    b:widget id='HTML6' locked='false' title='Floating' type='HTML'/
    /b:section




    /div Plz help me Soon

    ReplyDelete
  29. having a problem that the Main Content width is still the same as it is when the sidebar is present how to change the width of main content please do reply

    ReplyDelete
  30. @samsexy98 Selam Sam, I have succeed to make my sidebar dissapear. You have to remove all the widget for that specific page and then you have to add a html widget. inside the html part add your main wrapper css properties. If you make a difference on that css property it will affect the main wrapper on that specific page.

    <style
    #main-wrapper {
    your main wrapper css properties here.
    For example: change your width: to a bigger number and see the difference for that static page.
    }
    </style

    If you want to check my blog out: http://bestofyt.blogspot.com/
    My Forum page is made with this way :)
    I hope it helps:)

    ReplyDelete
  31. had trying you technique and its works .
    check out other way to show or hide widget in blogger @ http://goo.gl/qi6S4

    Thanks and i hope it helps.

    ReplyDelete
  32. how can I permanently hide it

    ReplyDelete
  33. It's works, thank you!
    Here si my blog blogtrikovialati.blogspot.com

    I hide floating share on my home pages, it's easy when you know it ! :-)

    ReplyDelete
  34. how to show widegets only on post pages ( not selected post i wanyt for all post pages)

    ReplyDelete
  35. Its First Time Mohammad Bhai When Your Blogger Trick Didn't Worked For Me.I wanna Hide Widgets From My Blogger Static Pages But I am not being Succeed.

    ReplyDelete
  36. @narender

    No problem please let me know what you want to hide. I have shared the code for static pages buddy. its under:

    How To Hide Widgets On Static Pages?

    ReplyDelete
  37. i want to Hide everything and only show post and not in all of them on in 1 post
    i mean when people go to this link http://www.4nepali.info/2012/08/all-live-channels.html they only see post not Widgets

    ReplyDelete
  38. Hello Muhammad,
    This is Sarath. I have a doubt. How to hide/remove previous, home and next links in blogger "post pages". Please reply brother.....

    thanks
    Sarath

    ReplyDelete
  39. Update:

    You all asked on how to hide either an entire sidebar or hide widgets only on static pages for that purpose I will publish a post tonight just after three hours. Please find all your answers there. :)

    ReplyDelete
  40. @Mohammad Mustafa Ahmedzai
    How to display a HTML/JavaScript Gadget only on post by admin pages and not on post pages by guest authors? Please Help.

    ReplyDelete
  41. Hello Muhammad ... works for me thanks

    i think it will be very helpful more if you use hide from home page tut ( for speed up your page load )

    or hide widgets from home page still make browser load the widgets ?

    ReplyDelete
  42. Hi Mohammed, I cannot seize to appreciate your good works. Thanks for the tips.
    I want my jQuery slider to appear only on my homepage and I followed your instruction by enclosing the code inside the HTML/JavaScript of the jQuery slider widget with the code you provided for “how to show widget only on homepage”. But the jQuery slider is still appearing in all the pages. What could be the problem?
    9janetbiz.blogspot.com

    ReplyDelete
  43. Hello Admin.
    Can u pls Make it simple, Its hard to understand for beginner blogger. Thanks in Advance.

    I just need to hide/remove blogger post from homepage.

    ReplyDelete
  44. Hey Mustofa, It does not work to my blog. I have tried a lot but not found what is the problem. Please check and let me know... I am waiting replay from you as soon as possible.

    Blog URL: http://www.shinemat.com/

    Thank You.

    ReplyDelete
  45. Hi, Does this still work? I tried and it seems to just print out the conditions as HTML. Thanks!

    ReplyDelete
  46. Hello Brother, I have applied this code to show ads on my home page only, but it does not work. please help me

    ReplyDelete
  47. This comment has been removed by the author.

    ReplyDelete
  48. Hii..!!
    I tries this code, for the specific URL thing.. But it seems that it doesn't work..
    Please tell me what could be possibly wrong, or if the codes have changed instead of

    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    WIDGET CODE GOES HERE
    </b:if>

    ReplyDelete
  49. Dear Mohammad, Please tell me how i increase width of salayuddin ayubi template.

    Please take a look of this url: all the contents going outside the post section. Please help

    ReplyDelete
  50. Brother it also didn't worked for me. Also is there any widget which removes the default comments form and uses facebook comments form.

    ReplyDelete
  51. Dear admin.. I am unable to hide the widget from the sidebar.... you can have a look on www.netpuppet.tk...
    I appreciate your job. but wants to hide the widget..
    I have used your given code but nothing happened... Please help...

    ReplyDelete
  52. hi bro great post but i have a problem i want to show slider in all pages and home page also can u help me in that plzzzzzzzz my blog is worklatest.blogspot.in and the slider name which i want on all pages is Most Watch Video it is a horizontal slider plezzzzzzzzzzzzzzzzzzzzz help mme

    ReplyDelete
  53. It dint work for me, i used the URL for selected page!

    ReplyDelete
    Replies
    1. It didn't work for me either . Did you find a solution ? Thanks , jaime

      Delete
    2. Make sure your URL has this format:

      http://www.yourdomain.com

      It wont work properly if you do not mention the http protocol

      Delete
  54. Thanks for sharing this awesome tricks.......its very useful..
    and very easy to use this information......

    ReplyDelete
  55. Hi, how to hide certain widget only for the mobile?

    ReplyDelete


  56. do i need to put my blog url on homepageUrl?

    ReplyDelete
  57. is there any way to hide some widget's on posts with specific label or posts by specific author??

    ReplyDelete
  58. @ Hi Mr. Mohammad Mustafa Ahmedzai
    I am unable to understand your this article, please help me out how to use it on my blogger

    ReplyDelete
  59. Thank you so much for a very very helful tutorial.

    ReplyDelete
  60. Hi,
    By mistake, i hide all the widgets on my footer.
    How can i un-hide them?

    ReplyDelete
  61. hi,
    how can I show blogger widget in specific country?
    Please share.

    ReplyDelete
  62. This is off topic... Is there any short code for create blogger html sitemap in page like BMAG Template offer.. sorry ....@Mohammad Mustafa
    Ahmedzai

    ReplyDelete
  63. How to add widget on label pages

    ReplyDelete
  64. dear bro

    u r god to me without your tutorial it will be more difficult to design my blog

    ReplyDelete
  65. This comment has been removed by the author.

    ReplyDelete
  66. How to hide Widget On Search Page?

    ReplyDelete