Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Tuesday, October 11, 2011

Blogger Label Specific Gadget


I can't think of a better title for this post. This is what the tutorial does. Say you have a gadget, and you want the gadget to be displayed only on post pages that have a particular label. The gadget won't be shown in any other pages- this includes your homepage, static pages and other post pages that don't have the said label. This question was asked by blog reader Ranjan. Sorry for the delay buddy.

Step 1:

Go to Dashboard - Layout - Add a Gadget - and add the gadget like you normally would.


Step 2:

Identify the gadget's unique ID. Click here to learn how you can identify your gadget's ID. For the sake of this tutorial, I'm going to be using the gadget ID #Text1.


Step 3:

Go to Dashboard - Template - Edit HTML - Expand Widget Templates - Find for </b:skin> - Paste the following code directly below </b:skin>:
<b:if cond='data:blog.url != &quot;http://yoboy-testblog7.blogspot.com/search/label/texthide&quot;'>
<style>
#Text1{
display: none;
}
</style>
</b:if> 
Replace the address in Line 1 in the code above with the address of your label page. You can get the address of your label page by clicking on your label. It goes without saying that this is the label that you will be using to 'show' your gadget. I'll be using the label 'texthide' because I haven't had my coffee and I can't think of anything smart right now.

Also, replace the ID in Line 3 above with the ID of your gadget.


Step 4:

Find for <b:loop values='data:post.labels' var='label'> - paste the following lines directly below it:
<b:if cond='data:blog.pageType != &quot;index&quot;'>
            <b:if cond='data:label.name == &quot;texthide&quot;'>
             <style>
              #Text1{
              display: block !important;
              }
             </style>
            </b:if>
          </b:if>
In Line 2, replace 'texthide' with the name of your label. And don't forget to change the Gadget ID in Line 4 above with that of yours.


My apologies if you find the tutorial messy. I tried hard not to bring Javascript in. So yeap, the tweak above is completely HTML-based. And I haven't really had the time to check for bugs thoroughly. Let me know if you find any.

44 comments:

  1. O boy, it works. You have made it so simple YoBoy. Thanks a ton. This can be used in various ways and change the blog to a website. Cheers for the wonderful work!!

    ReplyDelete
  2. One more thing YoBoy - the tutorial is working wonderfully. But one prob, the gadget/gadgets disappear from the 'Page Elements' section in 'Edit Layout' after working on 'HTML'. The gadget shows in the website/blog though without any problem. But if I want to edit the content in the gadget, I can't find it on 'Page Elements' section.

    ReplyDelete
  3. @Ranjan: Well, that is expected as the gadget is conditionally hid. If you're going to be changing the content of the gadget all the time, I suggest you bookmark the 'Edit' address for the gadget. After Step 1, click Edit on the gadget, and copy and bookmark the address to your browser. Then proceed with Step 2, 3 and 4. The next time you want to edit this gadget, access the bookmark.

    Another way is to go to your label-specific post-pages where the gadget is visible, and click on the 'Quick Edit' icon to edit the gadget.

    Cheers.

    ReplyDelete
  4. Cool. Thanks for a prompt reply. Can we use the same method for sidebar gadgets? It seems only 'main' gadgets work and not sidebar ones.

    By the way, I am going to put your site logo in the 'Our Partners' section. Hope that's ok. Take care.

    ReplyDelete
  5. @Ranjan: I don't mind at all. And as for the gadget, it does not matter where you place it - sidebars will work as well. See my test page. I've moved my text gadget to my sidebar (I hope the blog remains the same when you check it):

    http://yoboy-testblog7.blogspot.com

    Just make sure the gadget is properly addressed by its ID, and things will work out.

    ReplyDelete
  6. Yoboy: I have been looking for a solution for gadget for labelled pages, since so long. Glad that I found this post. But I am not able to find the tag anywhere?

    Am I overlooking anything?
    Any help would be appreciated, thanks

    ReplyDelete
    Replies
    1. Hi Gayathri,

      By 'tag', were you referring to your Gadget's ID? If yes, you must have completed Step 1, which means your gadget should be visible on your main page now. Let me know which gadget you're trying to address, and I'll help you identify the ID of your gadget.

      Cheers!

      Delete
    2. Yoboy: I am still trying to find the solution.

      I am sorry, I guess there has been some error in my post earlier. It was supposed to be "I am not able to find b:loop values='data:post.labels' var='label this tag anywhere ?

      Any idea what am I doing wrong?

      Delete
    3. Hi Gayathri,

      When you go to Dashboard - Template - Edit HTML - Proceed, before you look for that line, did you check on the box next to 'Expand Widget Templates'? The box needs to be checked for deep HTML lines to be visible.

      Delete
  7. Of course... Expanded the widget.. still i am not able to find the tag..

    ReplyDelete
    Replies
    1. You mind if I take a look at your template? Go to Dashboard - Template - Backup/Restore - Download Full Template - Save the resulting xml file somewhere in your computer. Then go to www.rapidshare.com and upload your xml file there. You will be given a link. Come back to this thread and leave your link here.

      Delete
    2. Would appreciate if you can look into this. http://www.4shared.com/document/_zIvqSrU/Musings_over_Nothing.html
      My blog is at http://musings-over-nothing.blogspot.in/

      Thanks a ton..

      Delete
    3. Couldn't download the file. The link is password protected..

      Delete
  8. Hi Yoga,
    Here is a trick question for you =))

    If there are 2 or more labels in a post, in label view we see that post only in the first label ( alphabetically)
    Is it possible to see the second label on the list with the same post. OR can we make a second label dynamic view ( below the header bar - recent - label - second label) and see the second labels on the posts here.??

    I hope I was able to describe what I wanted

    Many thanks!

    ReplyDelete
    Replies
    1. Hi there,

      I got what you mean. This issue has been long addressed, unfortunately, nothing has been done bout it so far - not sure if the Blogger team is planning to do anything about it..

      Unfortunately, this is not something that we can fix on our own. CSS tweaks don't allow us to add extra links to the template, and as such, we can't add the 'second label' link to the series of options as well. Looks like we're gonna have to wait till Blogger does something about it.

      Delete
    2. Hi Yoga,
      Thank you anyway ( I wasn't aware that I have sent you this msg via my work account ) ...

      Well we have to wait the Blogger team to decide then..
      have a great weekend..

      Many thanks,

      Delete
    3. Ha.. That explains a lot :P Yeah, lets keep out fingers crossed :)

      Delete
  9. Hi, awesome tutroial I'm also user of blogger platform thanks for this tutorial

    ReplyDelete
  10. I can't find . I found this . And it shows 4 times.

    ReplyDelete
    Replies
    1. Are you using the Integrated Search Function from your new HTML Editor?

      Delete
    2. Yes, I used that, couldn't find, so I tried looking for smaller part of the code, but there's no code that looks like yours. Also I had expanded all my codes fully when searching.

      Delete
    3. What's your blog's address?

      Delete
  11. Any solution for "how to hide a gadget on specific label"?

    ReplyDelete
    Replies
    1. In Step 3, replace 'none' with 'block'. And in Step 4, replace 'block' with 'none'.

      Cheers.

      Delete
  12. Hey Dude! Thanks a Lot!!!!! Seriously this was just what i was looking for, you are a freaking life saver!!!! :D

    ReplyDelete
  13. Just donated you 0.50 USD, not much but if i click on an ad you'll get less since i'm living in bucharest and here the ad clicks can give you 2 cents or 5 cents tops. First donation of my life just so you know :D Thanks again dude!

    ReplyDelete
    Replies
    1. Hi Jose,

      Appreciate the tip, thanks! :) Means alot..

      Cheers mate!

      Delete
  14. Hi Yoga!

    Your tricks about dynamic view are awesome...!

    Just wanted to know can we not show the FB Likebox , FB Pop Likebox in or a FB like box below the post??

    Is there any way Kindly suggest me..
    Thanx!

    ReplyDelete
    Replies
    1. To be honest I've been looking for a way for a very long time, and I have not come across any. All Javascript mod that I've tried ended up crashing my test templates.. We're gonna have to wait a little longer on this one..

      Delete
  15. Is it possible to do this with two gadgets?

    ReplyDelete
    Replies
    1. Yeap sure, just repeat the steps twice - one set of code for each gadget :)

      Delete
  16. Is there any way to do the opposite and block a widget from posts with a specific label?

    ReplyDelete
    Replies
    1. Hi Jess,

      In step 4, instead of 'block', use 'none' instead:

      display: none !important;

      Delete
  17. Hi Yoga. Nice tutorial. Little off topic. Can we have the label specific widget right under the post title? Between the title and the blog post. It's like the social share buttons..

    ReplyDelete
    Replies
    1. Hi there,

      If you can find a widget that you can place between your post title and post, sure you can apply the tweak above to make it label specific. You just gotta add it first to your usual page before making it label-specific.

      Delete
  18. hi yoga
    i have added statcounter gadget to my dynamic views template the way they explained in website but it is not being displayed but if i choose other templates it is showing.please help me

    ReplyDelete
    Replies
    1. Hi Dilip,

      Sorry for the late reply. What template are you using?

      Delete
    2. Please reply to my question..

      Delete
  19. thanks bro, nice article, I had use your trick on my blog....see : http://asyraf0222.blogspot.com

    ReplyDelete
  20. Highly appreciated..
    Could you please tell how can this trick be use for mobile template as well.

    ReplyDelete
    Replies
    1. I haven't actually tried it on a mobile template - will give it a whirl when I get some spare time.

      Delete
  21. This comment has been removed by the author.

    ReplyDelete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.