September 4, 2006

Multi-style labels widget for Blogger Beta

Multi-style labels widget is my first complete widget for Blogger Beta. It supports 2 custom styles (zoom style!, menu style) and the default list style provided by Blogger. The idea is to allow your blog's visitors to choose the style that they like instead of you fixing one particular style. I am also introducing zoom style that displays labels with font size proportionate to their usage! (sorta like a cloud but not exactly).

Interested in a hands-on experience of how this works? Check out the Multi-style labels widget in my sidebar. There are three icons one for each style - just click any icon and you will see the labels in that style. I have set zoom style as the default style.

- Icon for list style
- Icon for menu style
- Icon for zoom style

Excited about this? Try it in your blog. First, goto Template->Page elements tab and remove your label element IF you have one. Then, goto Edit HTML tab (no need to expand widgets) and identify the start of the sidebar section by looking for this line.

<b:section class='sidebar' id='sidebar' preferred='yes'>

Insert the code from here after that line (right-click, save it and copy/paste). Once you have inserted, you could goto Page elements tab and move this new Labels element. If you don't want the combo, you could use the zoom style alone by inserting the widget code from here.

I hope this widget will encourage many bloggers to switch to Beta and take the hit of labelling all their posts. This also proves how effectively we could combine Javascript with Bloggerscript (the new template language :)) and develop some cool widgets!
at

91 comments:

  1. Greg9/04/2006 6:48 PM

    Hey - way to go, Ramani! This is very cool and I particularly like the icons.

    Next challenge: nested posts that expand/collapse under each label ...

    ReplyDelete
  2. Unknown9/04/2006 6:58 PM

    Thanks Greg. Unfortunately, the labels widget doesn't have the list of posts as data. Pete from Blogger said that they will look into supporting this.

    ReplyDelete
  3. Priya9/04/2006 7:01 PM

    If I cope the my code to show where to insert, it show error when posting comments.

    Just confused where to copy now. If I cope inside the place you said, it says more than 1 widget.
    Can you please be clear where to insert the code. Sorry, I am not a techie to be expert.

    ReplyDelete
  4. Unknown9/04/2006 7:21 PM

    Priya, I think you have another label widget in your template. use the layout editor and remove it before inserting this code.

    ReplyDelete
  5. Anonymous9/05/2006 1:02 AM

    Hi Ramani, this code is really great. But, I can't open the xml you had provided, I appreciate it if you will post here it to me. I just don't understand, what to do next if I get the xml file? Should I host it, oh I'm sorry I don't have any idea because I did not see inside the xml files.

    I want to ask some questions, I already asked avatar about this but he did not reply me yet. Anyway, can we still apply the recent comments on the sidebar? And also, the commenters on post. You may check to old blog so that you will understand what I am talking about.

    Thanks...Raquel

    ReplyDelete
  6. Vivek Sanghi9/05/2006 2:00 AM

    Hey Ramani, that was another cool hack. Learnt a bit more about sidebar widgets and how their code looks different in expanded widget view in blogger. I was wondering if we can put this stuff into a posts as well. For example, if a post displays lot of HTML code the code can be put in such that a reader will have to click on the icon to expand it and view it. Otherwise it loads up as collapsed by default. get my drift??

    ReplyDelete
  7. Vivek Sanghi9/05/2006 5:48 AM

    I have added URL for google translate in my blog. check it out here

    ReplyDelete
  8. Vivek Sanghi9/05/2006 6:16 AM

    Hey man I was trying to use this code to create some thing similar for blog archives. I dunno javascript and could under the code for archives given in the template. I know one thing that cloud style() would not make sense for archives. Can you modify this to have some thing similar for archives i.e. plain links, hierarchy and drop-down (or menu).

    ReplyDelete
  9. Evaristo9/05/2006 6:21 AM

    Amazing. I like the cloud style!!!

    I think I'll implement it in my blog.

    Do you know anything about the bug (I think it's a bug) with the new feed with the last comments in the blog? I would like to use it in combination with the feeds widget to display the last comments in the side bar, but the feed shows the FIRST 25 comments in my blog and not the LAST 25 comments.

    ReplyDelete
  10. Unknown9/05/2006 10:05 AM

    raquel, I cannot show the XML code here because IE tries to interpret it. but i have updated the instructions to be clear. you don't have to host it anywhere. just read the instructions again and follow it.

    raquel, evaristo, comment feed doesn't work properly yet. will let you know once it works and then you can show recent comments in sidebar.

    ReplyDelete
  11. Unknown9/05/2006 10:09 AM

    vivek, i changed the extension of the file to .txt. now it won't show collapsed. and yes, i am planning to come up with multistyle for archives too!

    ReplyDelete
  12. Chaim9/05/2006 10:24 AM

    I did it on my blog, tweaked the images a bit to match my template. It looks awesome. Thanks. I mean ... wow .. I can't wait for more of these.

    One other thing, what style does it default as when someone comes to the page for the first time. How do I make that default.

    ReplyDelete
  13. Unknown9/05/2006 11:13 AM

    chaim, thanks. it defaults to the zoom style (i renamed cloud to zoom). unless you want another style to be default...

    ReplyDelete
  14. Oberon9/05/2006 11:26 AM

    ......i just get lost.....it's complicated.

    ReplyDelete
  15. Unknown9/05/2006 11:36 AM

    oberon, if you tell me where exactly you got lost, I could help to find your way :)

    ReplyDelete
  16. Priya9/05/2006 12:09 PM

    Congrats Ramanai. A way to go!!!!

    Do you still have time to explain me in detail thru' email??

    ReplyDelete
  17. Vivek Sanghi9/05/2006 12:35 PM

    Hey man congrats on the blog of note thinggy! Good stuff!

    I am adding the social bookmarking stuff of yours and my page into Blogger hacks wiki. Will give you the link. Do review and edit it.

    ReplyDelete
  18. Anonymous9/05/2006 4:48 PM

    Thanks Greg!!!!

    ReplyDelete
  19. Chad9/05/2006 11:24 PM

    This is very cool. I'm trying to manipulate the TITLE code for the same effect as this hack: http://www.techlifeweb.com/2006/07/changing-way-blogger-presents-title.html Any suggestions?

    ReplyDelete
  20. High Power Rocketry9/06/2006 4:53 AM

    Are you a hacker?

    ReplyDelete
  21. Greg9/06/2006 7:24 AM

    sweet tip. thanks! Gonna try it right now!

    ReplyDelete
  22. Unknown9/06/2006 3:13 PM

    Alex, I am a hacker in good sense :) Chad, will check it out when i get time.

    ReplyDelete
  23. Unknown9/06/2006 9:22 PM

    Wow! That was awesome man. I really liked the cloud thing and well... congrats for making it to the Blogs of note. BTW I see that u still have the annoying Navbar on the top. I have a small, clean and easyu hack for that. Here's the link:
    remove the beta navbar

    ReplyDelete
  24. Unknown9/06/2006 11:39 PM

    apnerve, thanks. i believe, according to Blogger terms, you are not supposed to remove the navbar. i respect their terms and so I won't remove it. moreover, people can use it for searching my blog.

    ReplyDelete
  25. Soumyadip9/08/2006 9:25 AM

    I was desperately looking for some help regarding Blogger beta templates. I think I've landed at the right place. Thanks a ton for all the gyaan.

    ReplyDelete
  26. Anonymous9/09/2006 9:29 AM

    Great stuff thanks :)

    One little request though:
    Would it be possible to code it so that it shows the list first instead of the clouds?

    If not never mind. It's great anyway.

    thamks

    Loup

    ReplyDelete
  27. Caylynn9/09/2006 9:43 AM

    Thank you so much for this piece of code. :) I've added it to my blog, and it works wonderfully. :)

    Thanks again! :)

    ReplyDelete
  28. Unknown9/09/2006 9:47 AM

    Loup, yes it is possible. Find these lines at the end of my code.

    // set default to zoom style
    zoomStyle();

    Change zoomStyle() to listStyle or menuStyle(), whichever you like.

    ReplyDelete
  29. Anonymous9/09/2006 10:01 AM

    Thanks a million!

    I'm on my way to change it.

    Thanks again

    Loup

    ReplyDelete
  30. Loup Dargent9/11/2006 12:25 AM

    It's me again :)

    I seem to be unable to find the code you use for your nifty archive display.

    Any chance of getting the code?

    Thanks in advance.

    Loup

    ReplyDelete
  31. Anonymous9/11/2006 1:18 PM

    i like it! i made some changes to your code to change the title to "Categories" and got rid of some spaces. i also changed to default setting and made the "?" link to my site's FAQ page.

    ReplyDelete
  32. Unknown9/11/2006 2:34 PM

    Loup, my archive display is nothing but the Hierarchy style that Blogger provides. Just goto your Page elements tab, edit the Blog archive element and change style to Hierarchy.

    Bravery, thanks for trying this

    ReplyDelete
  33. Anonymous9/11/2006 3:29 PM

    Thanks for the pointer :)

    Loup

    ReplyDelete
  34. Anonymous9/17/2006 10:37 PM

    Hi Ramani -
    I really like your zoom style (nice job!) - how do I do just the zoom without the other options? I like this over the cloud style - looks neater on my blog.

    ReplyDelete
  35. Unknown9/18/2006 10:10 AM

    Kate,

    You could use the zoom style alone by inserting the widget code from here

    ReplyDelete
  36. Anonymous9/18/2006 11:26 AM

    Works perfectly, thanks!

    ReplyDelete
  37. Anonymous9/20/2006 6:43 PM

    Hi Ramani, Thanks for the hack

    Anyway you can find a hack to reverse the Post title and Blog title in the Item (post) Page. I tried with:

    <b:if cond='data:blog.pageType == "item"'> <title><data:post.title/> - <data:blog.title/></title>
    <b:else/> <title><data:blog.pageTitle/></title>
    </b:if>

    But for some reason its like the value post.title is not initialized yet in the page and I get a 404 for each post title. Only blog.pageTitle can be recognized at the top of the page.

    Thanks in advance.

    ReplyDelete
  38. SQT9/22/2006 12:48 AM

    I'm having an odd problem with my labels and I've tried re-pasting all the code, but can't fix it.

    I only have 4 categories on the labels, but for some reason only 2, in addition to home, seem to be regularly recognized. I have a "books" category and a "movie" category on my labels, but only the "books" one seems to get recognized.

    If I go to my settings and click on the "labels" tab to format it, it shows that I have 6 posts under the category of "books" and 1 for "movies." But I only have 4 under "books" and 3 under "movies." Does that make sense?

    But the weird thing is, if I click on the movie tab, all the correct posts show up. But the tabs are not in the order of frequency because my label widget (or whatever should 'recognize' my label titles) isn't working correctly.

    Do you know what part of the code might be messing this up?

    Any help would be really appreciated.

    ReplyDelete
  39. Unknown9/22/2006 10:12 AM

    SQT,

    You are talking about label tabs and not this widget, right? Your labels seem to be messed up. Is there a labels tab under settings? I don't have one. If you can send me your template through email, I will check if you have copied label tabs code properly.

    ReplyDelete
  40. SQT9/22/2006 2:16 PM

    Do you want me to send you the whole template?

    ReplyDelete
  41. Unknown9/22/2006 2:25 PM

    yes, SQT.

    ReplyDelete
  42. LOUI$$9/27/2006 12:23 AM

    great ramani!!!i m a newbie in blogging!!i m a business student but i can play with this hack!!thanks a lot for your great hack!!

    ReplyDelete
  43. Slow Food10/10/2006 11:25 AM

    Hi Ramani...I am old guy (over 50!) and find your hacks very easy to follow...thanks very much...I am using your multi labels hack but want to create another drop down menu for series of links...how can this be done with this new Blogger Beta...again many thanks for sharing.

    ReplyDelete
  44. Kelly Neuman10/13/2006 7:51 AM

    Ramani how do you just had the drop down menu for the labels?

    ReplyDelete
  45. Unknown10/13/2006 8:27 AM

    Author,

    Check out this earlier post

    ReplyDelete
  46. Gadfly10/15/2006 12:30 PM

    Thanks, Ramani, but not sure I can use this.

    There's a fix now available to do Haloscan, including trackbacks, in Beta. BUT, you HAVE to have "expand widgets" selected to do this, and I don't know if I would lose that if I deselected that, and I'm afraid I would.

    For those of you who are interested in that:
    http://socraticgadfly.blogspot.com/2006/10/haloscan-with-trackbacks-on-beta.html

    Now, I also have a question. Is there any way to do a collapsible/expandable list of my tags (I refuse to use the Google word "labels)>

    What I'm talking about is something similar to how Beta handles archives for months prior to the current one, with the clickable triangle to expand or collapse each month's list.

    I'd like to do something similar, by letters of the alphabet, for my tags. Anything you know of?

    ReplyDelete
  47. Unknown10/15/2006 2:16 PM

    Gadfly, not many have so many labels like you, I guess. So, I don't think there's any hack to do what you are asking for. It's doable with some effort though.

    ReplyDelete
  48. JChevais10/17/2006 7:34 AM

    Dang. I can't see anything on that link. I'm looking for a drop down menu, pure and simple for my labels....

    ReplyDelete
  49. Unknown10/17/2006 9:21 AM

    jchevais, try my earlier hack then.

    http://hackosphere.blogspot.com/2006/08/drop-down-labels-blogger-beta-hack.html

    ReplyDelete
  50. Deepa10/23/2006 4:12 AM

    Hi..
    I tried pasting u r code but when i save.. i get the message
    [[[[[Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The element type "b:includable" must be terminated by the matching end-tag ]]]]
    What could i be missing?

    ReplyDelete
  51. Anonymous10/23/2006 9:36 AM

    Hi. I adated on of your hacks to my blog and am interested in the dropdown list opton for Labels but rather then just have a single line dropdown I would prefer to display a scrolling list box with a fixed user defined number of lines. This allows for the user to see part of the list (useful of you use alabetical sorting)..

    ReplyDelete
  52. Unknown10/23/2006 10:52 AM

    Deepa, I think you have left out some lines. Please take care to copy the whole thing. It should work.

    Oped, that maybe useful if there are many labels. Can you add your wish to this post in Hans' blog?

    http://beautifulbeta.blogspot.com/2006/10/whish-list.html

    ReplyDelete
  53. Anonymous10/26/2006 5:16 AM

    Am I missing something here. Where is the hack... It saus go to the sidebar section and insert code here but what is the code?

    ReplyDelete
  54. Unknown10/26/2006 11:11 AM

    Ukrme, The word 'here' is the hyperlink to the code.

    ReplyDelete
  55. J.G. Howard11/10/2006 1:24 PM

    Could you point me in the right direction? I just got Blogger Beta today, and I don't get what you are talking about.

    I don't see any Page elements tab in templates. Is it because I'm using a custom template?

    Where is the definitive guide to Blogger beta? I'm sure I'm missing out on all the new features.

    ReplyDelete
  56. J.G. Howard11/10/2006 1:27 PM

    Could you point me in the right direction? I'm using a custom template so Im not seeing any of these features you speak of like page elements, widgets, etc.

    Where is the definitive guide to working with Beta?

    Thanks, John
    john.g.howard@gmail.com

    ReplyDelete
  57. Unknown11/10/2006 1:36 PM

    Howard, I think Layout editor (Page elements tab) may not work with custom template. All my hacks are for Blogger Beta templates only.

    ReplyDelete
  58. Anonymous11/15/2006 12:56 PM

    Looks cool. I haven't tried this yet but this might be useful -

    http://help.blogger.com/bin/answer.py?answer=53219&topic=9084

    ReplyDelete
  59. Unknown11/15/2006 1:09 PM

    Rajesh, I already have a widget that uses the new feature that you have mentioned. It's here.

    Random message widget

    ReplyDelete
  60. brandon11/15/2006 8:39 PM

    Hiya. My name is mud. I've switched me blog to the beta thing. But I use my own layout/scripts/css so I can't seem to get the labels to display like I'd like them to. Is it true that you have to use some kind of new template to make labels work properly? I've added labels to many old posts just fine but now I'm left with two problems which I'm too thick to figure out:

    1. How the heck can I display a list of the labels on my sidebar,and

    2. How the heck can I make sure the label is on the same line as my post date and "post a comment" link, rather than an inch above it, sitting up there like an orphan?

    Thanks in advance, I shall check back shortly, and then again.

    ReplyDelete
  61. Unknown11/15/2006 9:19 PM

    Brandon,

    If you use one of the Blogger beta standard templates, you can add a Label page element by going to Template->Page element tab.

    ReplyDelete
  62. Bill W.1/02/2007 5:13 PM

    Can't get Multi or Zoom code to work for 'thetrekstop.' Could you take a glance at my code and tell me what's missing in order for your HTML to work?

    ReplyDelete
  63. Unknown1/02/2007 8:13 PM

    Bill, which blog is this issue in? i can't seem to access your profile.

    ReplyDelete
  64. Bill W.1/03/2007 5:39 AM

    Ramani - Sorry, it's www.trekstop.blogspot.com. I don't see any new blog code for labels to begin with.

    ReplyDelete
  65. Unknown1/03/2007 8:33 AM

    Bill, have you converted from classic to new template? this hack will work only with new template. If you have, send me your template. I will take a look later in the evening.

    ReplyDelete
  66. Bill W.1/03/2007 10:53 AM

    Ramami - I converted to Beta but I have a hacked-up old or classic template. I'm still not happy with Bloggers stiff, new stuff.
    My template: http://www2.blogger.com/template-edit.g?blogID=16741528

    ReplyDelete
  67. Unknown1/03/2007 11:13 AM

    This widget is only for the new template, Bill.

    ReplyDelete
  68. Anonymous1/07/2007 12:56 AM

    Is it possible to have same text color as in blog posts in drop down menu?.Default is black.I want to have it as green.I am not sure about old codings for text colors in beta version.

    ReplyDelete
  69. Jer1/09/2007 8:48 AM

    This is great, thank you.

    Questions
    1. can I make zoom the default?
    2. how do I make the labels show up in a paragraph form as opposed to a long list that takes up real estate?

    jer979.blogspot.com

    ReplyDelete
  70. Unknown1/09/2007 9:20 AM

    Jeremy,

    I believe zoom is the default. Otherwise, you can call zoomStyle() instead of listStyle() in the code.

    Also, check out phydeaux3's label cloud if you like.

    http://phydeaux3.blogspot.com

    ReplyDelete
  71. Tessa1/10/2007 7:49 AM

    I'm wondering if you might know if there might be something I could do so that if I have posts labeled, for example, "psychoanalysis" and "psychotherapy" I could have a single category for them in the sidebar, e.g. "psychoanalysis and psychotherapy"?
    In other words is there a way to create a list of categories for the sidebar that groups the labels I have used for my posts? I've seen this on non-Blogger sites, e.g.
    http://http://drx.typepad.com/psychotherapyblog/

    ReplyDelete
  72. ben2/08/2007 9:17 AM

    I couldn't get the code. I click to open the txt but no codes appear.

    Is there another way for me to get the codes?

    ReplyDelete
  73. Unknown2/08/2007 8:50 PM

    Admin, as I mentioned in the post "right-click, save it and copy/paste"/

    ReplyDelete
  74. Beckyb2/09/2007 11:54 AM

    I agree with the last post - I clicked on "HERE" to get the code and there is no code there - any ideas?!?!

    ReplyDelete
  75. Unknown2/09/2007 12:31 PM

    Becky,

    What is the error that you are getting when you click it? Or is it just empty. it works fine for me.

    ReplyDelete
  76. Anonymous2/28/2007 10:42 AM

    Hey, Ramani, when I first got this widget for my old blog, I think you had set the default to drop-down menu style, and I really liked that. Now the default is the zoom view. How can I set the default to drop-down menu?

    - Nandini

    ReplyDelete
  77. Unknown2/28/2007 7:50 PM

    Nandhini,

    Just find these two lines in the code
    // set default to zoom style
    zoomStyle();

    and change the function call to menuStyle();

    ReplyDelete
  78. Anonymous3/18/2007 12:01 PM

    do u have some hacks for widget?
    it would be awesome if you could tell me or post about how to show a particular widget in just the home page of the blog and not on the individual Post url.

    ReplyDelete
  79. SimRacing.biz3/23/2007 9:35 AM

    Hi,
    i've found some js error "syntax error javascript void".
    I've changed (one for every href line)

    a href='javascript:void'

    to

    href='javascript:void(0);'

    Now IE and FF java console, dont report errors.

    ReplyDelete
  80. Amit4/09/2007 11:32 PM

    Hi Ramani,

    Thanks a lot for this awesome hack.
    I have a request for a hack - display posts in alphabetical order for a specified label (or labels) using a drop-down list.
    Is that possible to do? I hope you consider it.

    Thanks.
    -Amit

    ReplyDelete
  81. Blogger4/12/2007 8:30 PM

    Hi Ramani,
    what would be the code to have the "menu" style alone?

    ReplyDelete
  82. Unknown4/14/2007 6:34 PM

    Hollywood,

    If you just need the menu style, you can get the code from this other hack.

    http://hackosphere.blogspot.com/2006/08/drop-down-labels-blogger-beta-hack.html

    ReplyDelete
  83. Anonymous6/04/2007 9:45 AM

    Perhaps I am stupid, but I do not see the three examples you mention on your blog.

    ReplyDelete
  84. Unknown6/04/2007 9:00 PM

    Garry,

    I don't have that widget anymore in my sidebar. But you can take the code and give it a try.

    ReplyDelete
  85. Real Life Sarah7/05/2007 4:10 PM

    I can't see the code when I click the link. I just see a picture. Is it still there?

    ReplyDelete
  86. Unknown7/05/2007 4:16 PM

    Singforhim,

    As mentioned in the post, can you right-click and save it as a file?

    ReplyDelete
  87. Gene Tewksbury8/03/2007 9:27 AM

    I was unable to get this to work. It shows up just fine within my blog. The drop downs work, etc... however, it does not actually show any labels .. All my posts are labeled right there in the blogger interface as they should be. but no labels show up in the widget.

    Any ideas.

    here is the blog (though I've removed the widget now). http://www.bluegelmedia.com/blog/

    ReplyDelete
  88. Khatia Caroline12/11/2007 7:12 AM

    thank you

    ReplyDelete
  89. Khatia Caroline12/11/2007 7:14 AM

    but you to do that by opening page opens "select a label" style?

    ReplyDelete
  90. Silvia12/11/2007 10:12 AM

    When I click to get the code, all I see are the three symbols. I can save the image but don't see any code. Am I doing something wrong?

    ReplyDelete
  91. Anonymous7/17/2008 7:03 PM

    Nice... posting... and i really like this blog...


    thank's

    ReplyDelete

Dear Visitor,

All the hacks in this blog are proven to work. If some hack doesn't work for you, please re-read the instructions carefully and re-check the code.

-Ramani