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!

92 comments:

Greg said...

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 ...

Ramani said...

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.

priya said...

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.

Ramani said...

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

Raquel said...

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

Vivek Sanghi said...

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??

Vivek Sanghi said...

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

Vivek Sanghi said...

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).

Evaristo said...

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.

Ramani said...

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.

Ramani said...

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!

Chaim Rubin said...

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.

Ramani said...

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

Oberon said...

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

Ramani said...

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

priya said...

Congrats Ramanai. A way to go!!!!

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

Vivek Sanghi said...

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.

Rodrigo said...

Thanks Greg!!!!

Chad H said...

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?

Alex said...

Are you a hacker?

TV Guy said...

sweet tip. thanks! Gonna try it right now!

Ramani said...

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

apnerve said...

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

Ramani said...

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.

Soumyadip said...

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.

Loup Dargent said...

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

Caylynn said...

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

Thanks again! :)

Ramani said...

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.

Loup Dargent said...

Thanks a million!

I'm on my way to change it.

Thanks again

Loup

loup.dargent said...

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

Bravery Onions said...

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.

Ramani said...

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

Loup Dargent said...

Thanks for the pointer :)

Loup

Kate said...

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.

Ramani said...

Kate,

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

Kate said...

Works perfectly, thanks!

jp said...

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.

SQT said...

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.

Ramani said...

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.

SQT said...

Do you want me to send you the whole template?

Ramani said...

yes, SQT.

LOUI$$ said...

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!!

Slow Food said...

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.

Author said...

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

Ramani said...

Author,

Check out this earlier post

Gadfly said...

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?

Ramani said...

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.

jchevais said...

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

Ramani said...

jchevais, try my earlier hack then.

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

Deepa said...

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?

OpEd said...

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)..

Ramani said...

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

Deepa said...

Thank you very much

Ukrme said...

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?

Ramani said...

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

J.G. Howard said...

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.

J.G. Howard said...

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

Ramani said...

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

Rajesh J Advani said...

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

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

Ramani said...

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

Random message widget

brandon said...

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.

Ramani said...

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.

Bill W. said...

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?

Ramani said...

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

Bill W. said...

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

Ramani said...

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.

Bill W. said...

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

Ramani said...

This widget is only for the new template, Bill.

ramya said...

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.

Jeremy said...

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

Ramani said...

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

psychoa said...

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/

admin said...

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?

Ramani said...

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

Beckyb said...

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

Ramani said...

Becky,

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

Anonymous said...

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

Ramani said...

Nandhini,

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

and change the function call to menuStyle();

Suicidalsam™ said...

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.

SimRacing.biz said...

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.

Amit said...

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

Holly Wood said...

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

Ramani said...

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

Garry P. said...

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

Ramani said...

Garry,

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

SingForHim 94 @ Real Life said...

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

Ramani said...

Singforhim,

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

Gene - BGM Webmaster said...

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/

Khatia said...

thank you

Khatia said...

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

Silvia said...

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?

agenJobs said...

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


thank's