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 styleExcited 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!
91 comments:
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 ...
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.
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.
Priya, I think you have another label widget in your template. use the layout editor and remove it before inserting this code.
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
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??
I have added URL for google translate in my blog. check it out here
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).
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.
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.
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!
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.
chaim, thanks. it defaults to the zoom style (i renamed cloud to zoom). unless you want another style to be default...
......i just get lost.....it's complicated.
oberon, if you tell me where exactly you got lost, I could help to find your way :)
Congrats Ramanai. A way to go!!!!
Do you still have time to explain me in detail thru' email??
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.
Thanks Greg!!!!
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?
Are you a hacker?
sweet tip. thanks! Gonna try it right now!
Alex, I am a hacker in good sense :) Chad, will check it out when i get time.
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
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.
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.
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
Thank you so much for this piece of code. :) I've added it to my blog, and it works wonderfully. :)
Thanks again! :)
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.
Thanks a million!
I'm on my way to change it.
Thanks again
Loup
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
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.
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
Thanks for the pointer :)
Loup
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.
Kate,
You could use the zoom style alone by inserting the widget code from here
Works perfectly, thanks!
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.
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.
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.
Do you want me to send you the whole template?
yes, SQT.
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!!
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.
Ramani how do you just had the drop down menu for the labels?
Author,
Check out this earlier post
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?
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.
Dang. I can't see anything on that link. I'm looking for a drop down menu, pure and simple for my labels....
jchevais, try my earlier hack then.
http://hackosphere.blogspot.com/2006/08/drop-down-labels-blogger-beta-hack.html
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?
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)..
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
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?
Ukrme, The word 'here' is the hyperlink to the code.
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.
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
Howard, I think Layout editor (Page elements tab) may not work with custom template. All my hacks are for Blogger Beta templates only.
Looks cool. I haven't tried this yet but this might be useful -
http://help.blogger.com/bin/answer.py?answer=53219&topic=9084
Rajesh, I already have a widget that uses the new feature that you have mentioned. It's here.
Random message widget
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.
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.
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?
Bill, which blog is this issue in? i can't seem to access your profile.
Ramani - Sorry, it's www.trekstop.blogspot.com. I don't see any new blog code for labels to begin with.
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.
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
This widget is only for the new template, Bill.
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.
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
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
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/
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?
Admin, as I mentioned in the post "right-click, save it and copy/paste"/
I agree with the last post - I clicked on "HERE" to get the code and there is no code there - any ideas?!?!
Becky,
What is the error that you are getting when you click it? Or is it just empty. it works fine for me.
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
Nandhini,
Just find these two lines in the code
// set default to zoom style
zoomStyle();
and change the function call to menuStyle();
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.
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.
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
Hi Ramani,
what would be the code to have the "menu" style alone?
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
Perhaps I am stupid, but I do not see the three examples you mention on your blog.
Garry,
I don't have that widget anymore in my sidebar. But you can take the code and give it a try.
I can't see the code when I click the link. I just see a picture. Is it still there?
Singforhim,
As mentioned in the post, can you right-click and save it as a file?
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/
thank you
but you to do that by opening page opens "select a label" style?
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?
Nice... posting... and i really like this blog...
thank's
Post a Comment