Blogger: Making widgets appear only on post pages or homepage or archive pages

I like to keep my home page clean. The homepage Widgets like recent posts, LinkWithin, etc are some unwanted clutter. You can see here that both recent pages widget and body has the same content. Related posts widget is just unwanted.

homepage

You can just remove this this easily using conditional tags. It’s basically an if:else parser. Sort of like PHP but you can’t use Boolean expression (AND, OR, and stuff)

As of now, Blogger has introduced conditional tags for post pages, index pages, archive pages and static pages. That means, you can program widgets (or codes) in the such a way that they show up ONLY on the index page or ONLY on the archive page or ONLY on the post pages.

So, you ask what else can I do with this option. The uses are literally endless.

Now, I’m going to show how to do it onRelated post widget (LinkWithin). You can use it on any other widget. This can be a little tricky for non – programmers. So, please go through this very carefully. If you still can’t get the hang of it. Please comment.

1) First, you need to know the widget ID of your widget. To find it just Go to Blogger Dashboard –> Layout –> Page element. Click on Edit.

linkwithin

2) You can find the Widget ID here. (Mine is HTML9)

widgetcode

3) Now, Go to Blogger Dashboard –> Layout –> Edit HTML

4) Check “Expand Widget Templates”.

5) Find (Ctrl + F) your Widget ID (Eg: HTML9)

6) Add  this just after the b:includable tag (normally )

If you want to show the widget only on the blog post pages:

If you want to show the widget <strong>only</strong> on the <strong>index page or homepage:</strong>

If you want to show the widget only on the archive pages:

If you want to show the widget <strong>only</strong> on the <strong>a certain url:</strong>

If you want to show the widget only on the new static pages (about me, contact etc):

7) Now, add

before the

tag.

Finally, you should have something like this:

<a href="http://suhastech.com/wp-content/uploads/images/includable2.png"><img style="display: inline; border-width: 0px;" title="includable" src="http://suhastech.com/wp-content/uploads/images/includable_thumb.png" alt="includable" width="639" height="109" border="0" /></a>

8 ) Click on Save Template and it’d done.

<a href="http://suhastech.com/blogger/blogger-making-widgets-appear-only-on-post-pages-or-homepage-or-archive-pages/comment-page-1/#comment-297">Marina</a> pointed out that, if you want to hide a widget in a particular page, you can use <strong>“!=” </strong>instead of <strong>“==”</strong>
<blockquote><strong>Apparently “==” means include and “!=” means don’t include.</strong></blockquote>
<strong>Troubleshooting:</strong>

<a href="http://suhastech.com/blogger/blogger-making-widgets-appear-only-on-post-pages-or-homepage-or-archive-pages/comment-page-1/#comment-145" target="_self">AbdulGafoor</a> described a problem. Sometimes, if you define CSS rules for your widgets and use this hack to hide a particular widget. You’ll find an empty space, that’s it. To fix it, you can add this code between the conditional tags.

#WidgetID1{display:none;}

Add the code before </head> tag just after ‘]]>’


So lazy that he can't even fill this column out.

  • Durkin

    these tags are very useful, thanks very much!

  • Rock

    This looks like it could be the answer to one of my long-standing problems, of removing clutter.

    I prefer a single column layout, but I want my blog readers to have access to my Archives, Recent Posts, Profile, etc.

    What I have done is to create pages using the new Blogger Pages facility, which I have labelled:

    Profile
    Recent Posts
    Archives
    Twitter

    These are now arranged in a tab form just underneath my header.

    What I would like to happen is this:

    I create a Recent Posts widget, but I want it NOT to appear on my main blog page, ONLY when a reader clicks the Recent Posts static page link.

    I can't pretend I fully understand the conditional statements above, or even which one I should use.

    If you could let me know which one is the one to use, (if indeed it can do what I want it to do), I would be grateful.

    My blog is at:

    http://rock-vacirca.blogspot.com/

    Rock

  • Rock

    I did try the last example you gave, to show on static pages only (I would prefer a particular static page, not all), but the Archive still shows on the blog, and on all static pages too. Here is the modified Archive widget code I used:

    ……..

    Any help appreciated,

    Rock

  • Suhas

    A particular static page? Thats easy.. Don't think of it as a static page, think of it as a normal page URL.

    So, if you want to show a widget ONLY on the recent post static page..Use this tag

    {b:if cond='data:blog.pageType == "http://rock-vacirca.blogspot.com/p/recent-posts.html"&#39;}
    Just replace {} with <>

    I think you have already figured that out..

    In my opinion, instead of going through this procedure, you can always paste the recent post HTML code in the Recent post static page (I mean the content).

    Hope your problem is solved,
    Suhas

  • Sheridan Fairfield-Wills Dickson

    hi – thanks for these, but i want to add a widget to my static page in a different position. I've hidden the side bar, but want the labels widget to show in the middle / body of the page, whereas it shows on the left column on my posts page. I was hoping I could either adjust the HTML on the static page, or add an include but also tell it to position itself in the middle of the static page template. Any ideas?

  • Jennifer

    Using this code on a variety of my widgets also helped decrease my upload speed since EVERYTHING isn't loaded on all my blog pages.

  • @Will… you want show the widget in the middle of the body (i mean the blogpost?)?

    That’s kinda impossible to implement …

    If you want to show to just below the blogspot. You can add another labels widget, drag it to the bottom.. and use the

    <b:if cond='data:blog.pageType == "static_page"'>

    tag..

    That was what you were looking for?

  • AbdulGafoor

    The method described here has a major flaw. If you add conditional tags inside includable tag, it will sure show/hide the contents of the widget. But if the CSS has some generic rules to modify appearance of the widget, it will also apply to the widget of which the contents are hidden, resulting an empty box or whatever the CSS rules are set for.

    Though Blogger help say that we can use pageType attribute for widget tags, Blogger has got a bug which strips off pageType attribute every time we save the modified template. So, that’ll not work as well.

    Only solution left is to use conditional tags inside Head element. i.e., where all CSS rules are defined. I have done it in http://nasreenanp.blogspot.com. Let me show you the code I included within Head element just after ‘]]>‘. You can figure out the rest. 🙂

    #Text1{display:none;}

  • N

    Hi there. Great post, extremely useful.
    I just have one problem : for some reason, every bit of b:if code works, except the one for specific urls.
    I want to show the blogroll only on one specific page (links) (since I don’t know how to insert a widget directly into a post/page), but it just won’t work for some reason (now it is set as to appear only on static pages and works like a charm).
    Any idea why ?
    Thanks for your time and help.

  • @abdul .. awesome idea….Thanks for pointing it out..
    IMO, b:if tag is server side. So, if the b:if tag is not satisfied, it will not be loaded into the browser.

    But, if you use just the CSS code.. The widget will load up into the browser every time but, will not show up. Hence, increasing the loading time.

    So, the solution would be to use this method + Use the conditional tag for the CSS rules. Will update the OP when I get some time.

    Off to school now,
    Suhas

  • Marina

    Hi – I was looking to hide a widget from my static pages…don’t know about code but managed to merge yours with that from another help site to get this:

    Apparently “==” means include and “!=” means don’t include. It’s perfect now. Thanks!

  • @Marina …. Thanks a lot 🙂 … I’ll add that to my post, right away!

  • ed

    THANK YOU VERY MUCH! Finally! Yes it works. I finally managed to get rid of the clutter on the post pages. I’ll finally be able to add whatever I want to on the homepage without it ‘cluttering’ the post pages. Now i just have to figure out how to get rid of the sidebar in the post pages as well. Again, thanks a lot:)

    I’ll be including a ‘credit’ page after i’m finished. I’ll be sure to include your site amongst a few others that have provided clear and concise aid.

    Cheers!

    ed

  • Thank you … 🙂

  • Thank U very much its working!

  • HDw

    If I wish to show some widgets only on labels pages is there a line code like this one {b:if cond=’data:blog.pageType == “static_page”‘}

    ?

  • @HDw .. As of now, there’s nothing as such… *waiting for future updates*

  • turktut

    hi i’m having adding HTML/javascript in blogger static pages,the codes i’ve added dont work after published,but in preview,there is no problem,how can i add html/javascript in my blogger static pages?

  • this code… #WidgetID1{display:none;} hides the widget completely… not just the empty bar. how do you hide just the empty bar. you can check out my website to see the bars. there’s one on my front-main page and two on every other page that you browse through.

    also how do you show certain widgets on the Labels listing page… for example, someone clicks through the label “eBooks” on my blog and i want to hide the Twitter widget and show the Archives widget. as it is, the Twitter widget still shows instead of the Archives widget, even though i have the coding hacked to be the opposite.

  • Al

    Hi,

    I used the example you gave Rock and here is the code. However, it doesn’t work. Did I misplace it, or is there anything obviously wrong? I would like to have the Recent posts show only on a page names blog, in this way my website looks more like a website which also has a blog…







    Thank you very much in advance,

    Daita

  • Thanks Dude it is pretty helpful. thanks for sharing awesome tut.

  • Al

    Hi,

    I tried again on a different widget and it worked. Thanks so much!

    Al

    [b:widget id=’LinkList1′ locked=’false’ title=’Links’ type=’LinkList’]
    [b:includable id=’main’]
    [b:if cond=’data:blog.url == “http://myblog.blogspot.com/p/links.html”‘]
    [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]
    [/div]
    [b:include name=’quickedit’/]
    [b:else/]
    [style type=’text/css’]
    #LinkList1{display:none;}/*to hide empty widget box*/
    [/style]
    [/b:if]

    [/b:includable]
    [/b:widget]

  • Wow it really works! Thanks a lot!!!! 😀

  • José Ángel

    Gracias!!

  • Pingback: All in one SEO Pack for Blogger / Blogspot platform | Suhas Tech()

  • thanks for this suhas! great guide !

  • Joeh

    Doesn’t work on any of my templates, not a single one. 

  • Carol Lee

    Sorry I need help. I really can’t do it. I cant find the words you mentioned. this is what is reflecting in my html on linkwithin.  what I want to happen is for it to appear at the end of my post and not to show in the summary of posts on my home pag
      var linkwithin_site_id = 626611;

    Hope you can help me
    http://www.ladyoutdoor.blogspot.com

  • if only wanted to show it on the home page and post pages and NOT static pages?

  • T-Breakz Admin

    I’ve managed to remove the related posts from showing in the frontpage but now i need to also hide it in certain posts. is there a way to do it?

  • Kaydeeput

    Thank you for providing this information. I’m a total dunce when it comes to HTML code … or any code, for that matter. I successfully got the widgets to disappear from everything except the main page, and I got rid of the sidebar on all but the main page. Here’s my problem, though: When you hit the “older” button, the widgets are gone, but the sidebar is still there. How do I get the code situated so the archived blogs are coded the same (no widgets, no sidebar) as the main/home page. Thanks a ton.

  • Myblogzo2

    THANKS DUDE, REALLY IT’S WORKING FINE. THANKS A LOT.

    BUT THERE IS A LOT OF CHANGES HAPPENED TO THE BLOGGER SETTINGS,

  • yasir butt

    i need complete sitemap like index for my blog posts. there are more than 4000 posts, i can’t get it via any proper means.
    help me create a sitemap code so that i can create a page with posts categorized by labels.
    my blog here: http://www.mobilemoviesite.com
    hope you help me resolve this mess.
    Best Regards

  • Arjunsolanki110

    i only found my sollution at here
    just keep it up
    thanks for your sharing such valuable info

  • M Ridhowi

    Nice Post ,, I try and it work 🙂

  • This is a great help but what I’m confused on is if I’m applying the code so the gadget only displays on my home page, how do I remove the space that gadget would leave so there is not a big gap on my other pages? I just can’t get this figured out so any help would be apprecaited!

  • Hello! I simplу want to giѵe yοu a big thumbs uρ for the ехсellent informatiοn you haνe got right hегe оn this pοst. І’ll be returning to your site for more soon.

© 2010 Suhas Tech. All rights reserved.
Proudly powered by Wordpress.