Showing Headlines by Labels

Please click on the title to go to the archived page.

33 comments:

Nefuis said...

Hi Hoctro
very nice hack, thank you very much, i found another limitation beside the "3 words max in labels", it only reads english labels.
well, anyways, thanks again.

咖啡鱼 said...

it's a pity that it doesn't read chinese labels.

Hoctro said...

Guys, please see my explanations in the update.

kilgorsky said...

Awesome hack. I'll implement it this weekend. Thank you for the great work.

Hans said...

Hi Hoctro, this is another great application of the json-feed! May I suggest that you make it even more easy to implement? In the hack you presented here your user has to add an array of his/her labels, but you could retrieve them from the feed itself too. You will find them in json.feed.entry.category.term. You could scan the feed for all labels, store them in an array, and add the entry-numbers to the array as well. Then you could read out the array, and display label by label all the feed entries. Or, extracting the labels from the 25 most recent posts from the general feed this way, you could then make a call to the label-feeds to retrieve as many posts as possible. The disadvantage of all this would be that labels that have not been used in your 25 latest posts will be missing in the feed. Hope this will give you some more ideas.

Hoctro said...

@Kilgorsky: thanks!

@Hans: my past experience with labels tells me that I should let the user decides what to put on his or her contents. For example, I would showcase my work with things such as "killer hacks", "custom widgets", etc. and leave the blah blah stuff out of the listing.

Actually I'd like to educate my readers and let them do some of the work too, and I don't think they mind that.

Cheers,

Ramani said...

I knew somebody will come up with something nice with JSON and labels. There's one more powerful feature of JSON feeds that is yet to be exploited. I won't tell what it is ;)

Hoctro said...

@Ramani: It's always nice to hear a kudos from you. You are guilty of launching my Beta hacking career this far :) Without your enthousiasm of promoting the label hack, I probably would hacking some other platforms like Wordpress, or none at all.

Have a wonderful day!

Khong Co Ai said...

and how to display the content of a specific category?
Fr exemple, if someone visit the "hack" category of your blog, so in the sidebar all the posts archived in this categori are listed.

Escaper said...

Thanks Hactro,)

I cannot find a post to write about showing random post, so i decided to write here. Is there a way to show a random post from old posts as a first post or above the first post? It can change daily or when the page refresh. How can we do that. I need your help.

Cheers.

Hoctro said...

@Escaper: I think the best thing I could do is to make a random out of contents list, then provide the link. It's not possible to view 2 different posts at the same time, unless they're created one after another. I'll keep that in mind.

Hoctro said...

KCa: that's one of my to-do list hacks. It'll replace my recent "Related Articles" hack. I'm talking about similar ones sharing the same label(s)

If you're looking for the one showing all abbreviated posts in a label query, I had that one as my first hack already:

http://hoctro.blogspot.com/2006/09/tweaking-new-blogger-archived-or.html

Phil said...

Hi there Hoctro. I noticed that the only way I could get the contents to work was to insert the code in the (b:section class='main') portion of the template to get it to appear in the center column. If I wanted it to be in the left sidebar I had to paste the code there. And it didn't drag and drop. Did I misunderstand? Also, can you remove the posts from the main page and have only the table of contents?

Thanks for tolerating a rookies many questions.

Phil

Phil said...

Hi Hoctro, I really like the Contents by Category hack. I have a question about using it though. If I remove this section of code: "b:section class='main' id='main' showaddelement='no'>
"b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'>" and insert the table of contents, will I still be able to pull up posts by clicking on them. I am a real rookie so if the question is foolish, I apologize. Merry Christmas and Happy New Year. - Phil

Singpolyma said...

Wow, this is great! I don't know how it will render with all my manymany tags, but I just might try it out once I get switched! :)

A note about external JS files -- I use them sometimes for two reasons:

1) It's faster. The browser caches the JS and so when loading other pages on the same blog is does not have to reload the JS
2) It's easier to fix bugs. I fix the JS include, everyone gets fixed. That simple.

Singpolyma said...

RE Unicode and Special chars: You're generating URLs from JavaScript by concentrating in the raw data. Wouldn't running encodeURIComponent on it fix it?

Alex said...

Hoctro:
i wonder if there are some methods to show more than 5 items from the feeds that not belong to blogspot.for example,from the feed "http://www.google.com/reader/public/atom/user/08820855645183326272/label/taoles".

Ted said...

NEW HACK: RELATED ARTICLES BY SUB-CATEGORY (using JSON)

A lot of people are wishing that Blogger had Categories and Sub-Categories. Well, thru this clever adaptation of Hoctro's hack it can be done! Here's how I did it:

Firstly, I have only four or five main categories (actually labels), such as People, Authors, Music, Photos.

These main categories are hard coded, (first letter is capitalised) at the top of my page on the header menu. Clicking on one of these brings up a standard label search.

Then, I assigned OTHER LABELS, (all in lowercase) to be used as sub-categories; example: hemingway, steinbeck, rowling (note, these do NOT appear on my header menu).

Now, when someone views the full post (an item page), at the bottom of the post, as usual they will see the labels assigned to that post; Author, hemingway (note the capitalisation).

Now comes the fun part! Wouldn't it be nice to SHOW ALL RELATED POSTS for hemingway only (because you have just finished reading a blog article about him)? What's the sense of showing someone the entire Author label search again?

I have modified the 'Contents by Category' hack to do this. It now parses the 'data:label.name' and passes a match onto the javascript/JSON code.

Example (sorry, this is incomplete as I don't know how to post the exact code):

b:if cond='data:label.name == "hemingway"'

var labels = ["hemingway"];


A series of b:if in a loop will take care of all of my other sub-categories. Note that through this hack only sub-categories will be displayed as RELATED ARTICLES.

The user would see:

Labels: Articles, hemingway

RELATED ARTICLES:

hemingway
- For Whom The Bell Tolls (1940)
- The Old Man and the Sea (1952)
- The Snows of Kilimanjaro (1952)

It also works for MULTIPLE sub-categories. Let's say that the original post had these labels: Authors, hemingway, usa

Then the RELATED ARTICLES list would generate a second SUB-CATEGORY listing blog articles relating to other American authors!

usa
- hemingway
- thoreau
- king

This hack was accomplished basically by changing the 'Contents by Category' hack from a widget to an INCLUDABLE, and moving it to the blog-posts section of the template where the label parsing is done.

HOCTRO - IF YOU'RE INTERESTED, I WILL SEND YOU MY XML TEMPLATE AND YOU CAN STREAMLINE THE CODE BETTER THAN ME, WRITE UP USER INSTRUCTIONS AND MAKE IT AVAILABLE TO EVERYONE!

You can try it out on my blog to get an idea how it works:

http://madaboutasia.blogspot.com

Ted Ollikkala
Singapore

djchallis said...

hey hoctro
my appreciation first for being cool enough to come up with this genius idea and then let us all know.
i'm someone with barely any programming experience, tho i just about managed to follow your intructions to install this one. however, i have three quick questions:
do i need the update code, and where do i put it?
is there any way to change the size of the "contents by catagory" text?
on my blog the "contents by catagory" sign appears, but the labels and links beneath are invisible until highlighted - do you know why?

thanks!

Hoctro said...

djchallis:
#1. You need to follow exactly what the tutorial says.

#2. You need to look for CSS's "h2" rule and change its font height value.

#3. Maybe some of CSS rules have texts as white, you need to change that.

If you show me your blog, and tell me exactly what you would like to see for question #2 & #3, i might be able to tell you where to fix in your CSS code.

Cheers,

Walter said...

Hi Hoctro. I'm using the "related posts" option on three of my blogs. Very nice. However, I submitted a sitemap for the most recent one I created to Google - now Google is giving me the following error not found (404):
http://beagle.dog-gonnit.com/feedReaderJson

I may be getting the same thing on the other blogs, but I probably did not notice because they both have plenty of pages indexed. This one was noticeable because it's the only link currently listed.

Is there a nice clean way to avoid this error/issue?

Thanks,
Walter

Hoctro said...

Walter,

This hack only works on blogger blogs, and I see you're referencing to a non-blooger one. I think that's the problem. There's no other way around this (yet.)

Walter said...

No, it's a Blogger blog. It has it's own domain name, but it's hosted by Blogger using ghs.google.

Hoctro said...

Walter,

I was able to bring your blog in to read your latest posts and labels, so I don't know how you have that error message.

"I submitted a sitemap for the most recent one I created to Google - now Google is giving me the following error not found (404):
http://beagle.dog-gonnit.com/feedReaderJson"

I never submit to google so I cannot answer your question.

Rexted said...

Hoctro.. I am also experiencing the same problem with google bot. I am having problem in here according to them. Do you suggest any

http://www.techathand.blogspot.com/feedReaderJson

spain dad said...

Hoctro...is it possible to modify this code so that only one article is listed under each label?

madyoung said...

i've cut and pasted the code repeatly, but can't get it to work as advertised. I really like the idea of this code!

usmc81@gmail.com said...

Very nice hack, well done!

mo said...

nice widget

i am trying to change the list tile style

by list title i mean the name of the label which im actualy enlisting, which is displayed in black and is slightly bigger than the list itself
just above the list.

how do i change this.

Pat & John said...

Very nice widget Hoctro! I'd been looking for a way to organize recipes for the family cookbook. Do you know of a way I can force the categories (labels) to always display in alphabetical order?

This hack works great until you add a new post and then it moves the corresponding category to the top of the list. For example, if the first category is "Appetizer" and you add a post with the label "Soup", "Soup" will now be listed first, followed by "Appetizer".

I'd like to find a way to keep the categories static.

honeybear o_O said...

Hi! Hoctro! Thank you for the "Contents by Category" code.

Is there any way to organize the entries if some entries use characters rather than the Roman alphabet (i.e. Chinese, Japanese, Korean, Indian, etc)? I was just wondering.

By the way, regarding your update...
Do I have to add it after the similar div with data2006 or replace it altogether with the new one?

When I replace it, I lose the 'the content by category' list. The same thing happens when I add the new div after the data2006 div.

I hope you can advise me on how to incorporate the new div to the hack code.

Moohay.com said...

@Rexted, @Walter. To add Google Sitemap when your blog feeds are redirected to FeedBurner, you must use these links:

http://yourblog.blogspot.com/atom.xml?redirect=false
http://yourblog.blogspot.com/rss.xml?redirect=false

That's OK.

Mr. Nhan
TTB.com

Mike Frisch said...

I was wondering if there was any way to limit the number of posts displayed per label. Is there any way to only display...say... the most recent 3?

Also, I see there is an update. Where do I insert/replace the new code?

Thanks! Great hack!