May 22, 2006
22.5.06 | Posted by
Avatar X
You knew this was coming, and here at Bloggeratto we aim to please.
This hack in particular was meant as something else when it started. I got the chance to see it evolve from its original function to what it is now, and believe me the results could not be better. Then it evolved to what is today, reaching a point where it could be released so everyone who wants to use it can.
Aditya gave me the honor of introducing it to you, and that is what I'm gonna do. So, I give you: The ABC (Asynchronous/Aditya's Blogger Categories) Index.
With this hack, you can have a category index in your blog the same way you can now have the Native Search in your blog. This is developed from that same principle.
So, lets get started with what you are waiting for: the implementation of it. Begin by putting the following chunk of code in your <head> area:
<script src="http://del.icio.us/feeds/json/tags/username?sort=freq" type="text/javascript"></script>
And this between <script> ... </script> tags:
/* `````````````` TAGS DISPLAYING `````````````````` */
/*
/* Asynchronous/Aditya's Blogger Categories Index by Aditya Mukherjee (www.aditya-mukherjee.com) */
var tagn="";
var user="";
function tags_s(tagname){
tagn=tagname;
var tag=document.createElement('script');
var url="http://del.icio.us/feeds/json/"+user+"/"+tagname+"?callback=write_tags&count=100";
tag.src=url;
tag.type="text/javascript";
tag.id = "app-tags";
document.getElementsByTagName('head')[0].appendChild(tag);
}
function write_tags(tag){
document.getElementById('cont').style.display="block";
document.all.cont.className="show";
document.getElementById('cont').innerHTML="<div align=\"right\"><a href=\"http://del.icio.us/rss/"+user+"/"+tagn+"\"><img src=\"http://photos1.blogger.com/blogger/2472/807/1600/feed-icon-16x16.png\" style=\"border:none\" align=\"right\" \/><\/a> <b>Subscribe To "+tagn+"<\/b><\/div><br /><br />";
var elem=document.getElementById('cont');
var i=0;
while(tag[i]){
var head=document.createElement('a');
head.innerHTML=tag[i].d;
head.title=tag[i].d;
head.href=tag[i].u;
head.id="cat-title";
var desc=document.createElement('span');
desc.innerHTML=tag[i].n;
if(tag[i].n){
elem.appendChild(head);
elem.appendChild(document.createElement('br'));
document.getElementById('cont').appendChild(desc);
elem.appendChild(document.createElement('br'));
var k=0;
var t=document.createElement('span');
t.innerHTML="<span id=\"filed\">Filed Under:<\/span> ";
t.id="cat-t";
while(tag[i].t[k]){
t.innerHTML+=tag[i].t[k]+"\t";
k++;
}
elem.appendChild(t);
elem.appendChild(document.createElement('br'));
elem.appendChild(document.createElement('br'));
}
i++;
}
var rem=document.getElementById('app-tags');
rem.parentNode.removeChild(rem);
}
/* ```````````````` END OF TAG DISPLAY ```````````````````` */
Remember to fill out the two variables marked in red. Those will decide who's account you pull the categories out of!, That done, add this piece of code where you want the categories to appear as listings:
<div id="tags">
<ul id="taglink">
<script>
for(var i in Delicious.tags){
document.write("<li onclick=\"javascript:tags_s(\'"+i+"\');\" \/><a>"+i+" ("+Delicious.tags[i]+")<\/a><br \/>");
}
</script>
</ul>
</div>
Finally, add this bit of code where you want your category results to be displayed:
<div id="cont"></div><br />
That pretty much does it. As always, you can change the ID's and other little details to suit your needs, although make sure you make the same changes in the function up there. Now Allow me to explain the hack a little more to you, of what it is exactly doing in your blog:
The hack works by calling all your categories from del.icio.us to start with, and printing them out in a list with the number of posts in that particular category next to it. Each category is a link, which calls the function that makes an asynchronous call to del.icio.us' brilliant JSON feed for the posts listed under that tag. The details from that feed is written down in the final container tag, and displayed for your categorising and using pleasure!.
The dynamic script tag which was written, is subsequently deleted, so that there aren't tons of <script> tags lined up in your <head>. For furthur usage and styling notes, visit his post at The Last Word.
See! That is the stuff. Now you can have this excellent implementation of categories in your blog, and also enjoy tagging and folksonomy at the same time, all thanks to another Astounding Solo job of Aditya.
If you have any question, comment or suggestion, you can leave a comment here or at Aditya's blog, we read and answer each message/comment.
Enjoy!
Credits
Idea, code and implementation: Aditya
This hack in particular was meant as something else when it started. I got the chance to see it evolve from its original function to what it is now, and believe me the results could not be better. Then it evolved to what is today, reaching a point where it could be released so everyone who wants to use it can.
Aditya gave me the honor of introducing it to you, and that is what I'm gonna do. So, I give you: The ABC (Asynchronous/Aditya's Blogger Categories) Index.
With this hack, you can have a category index in your blog the same way you can now have the Native Search in your blog. This is developed from that same principle.
So, lets get started with what you are waiting for: the implementation of it. Begin by putting the following chunk of code in your <head> area:
<script src="http://del.icio.us/feeds/json/tags/username?sort=freq" type="text/javascript"></script>
And this between <script> ... </script> tags:
/* `````````````` TAGS DISPLAYING `````````````````` */
/*
/* Asynchronous/Aditya's Blogger Categories Index by Aditya Mukherjee (www.aditya-mukherjee.com) */
var tagn="";
var user="";
function tags_s(tagname){
tagn=tagname;
var tag=document.createElement('script');
var url="http://del.icio.us/feeds/json/"+user+"/"+tagname+"?callback=write_tags&count=100";
tag.src=url;
tag.type="text/javascript";
tag.id = "app-tags";
document.getElementsByTagName('head')[0].appendChild(tag);
}
function write_tags(tag){
document.getElementById('cont').style.display="block";
document.all.cont.className="show";
document.getElementById('cont').innerHTML="<div align=\"right\"><a href=\"http://del.icio.us/rss/"+user+"/"+tagn+"\"><img src=\"http://photos1.blogger.com/blogger/2472/807/1600/feed-icon-16x16.png\" style=\"border:none\" align=\"right\" \/><\/a> <b>Subscribe To "+tagn+"<\/b><\/div><br /><br />";
var elem=document.getElementById('cont');
var i=0;
while(tag[i]){
var head=document.createElement('a');
head.innerHTML=tag[i].d;
head.title=tag[i].d;
head.href=tag[i].u;
head.id="cat-title";
var desc=document.createElement('span');
desc.innerHTML=tag[i].n;
if(tag[i].n){
elem.appendChild(head);
elem.appendChild(document.createElement('br'));
document.getElementById('cont').appendChild(desc);
elem.appendChild(document.createElement('br'));
var k=0;
var t=document.createElement('span');
t.innerHTML="<span id=\"filed\">Filed Under:<\/span> ";
t.id="cat-t";
while(tag[i].t[k]){
t.innerHTML+=tag[i].t[k]+"\t";
k++;
}
elem.appendChild(t);
elem.appendChild(document.createElement('br'));
elem.appendChild(document.createElement('br'));
}
i++;
}
var rem=document.getElementById('app-tags');
rem.parentNode.removeChild(rem);
}
/* ```````````````` END OF TAG DISPLAY ```````````````````` */
Remember to fill out the two variables marked in red. Those will decide who's account you pull the categories out of!, That done, add this piece of code where you want the categories to appear as listings:
<div id="tags">
<ul id="taglink">
<script>
for(var i in Delicious.tags){
document.write("<li onclick=\"javascript:tags_s(\'"+i+"\');\" \/><a>"+i+" ("+Delicious.tags[i]+")<\/a><br \/>");
}
</script>
</ul>
</div>
Finally, add this bit of code where you want your category results to be displayed:
<div id="cont"></div><br />
That pretty much does it. As always, you can change the ID's and other little details to suit your needs, although make sure you make the same changes in the function up there. Now Allow me to explain the hack a little more to you, of what it is exactly doing in your blog:
The hack works by calling all your categories from del.icio.us to start with, and printing them out in a list with the number of posts in that particular category next to it. Each category is a link, which calls the function that makes an asynchronous call to del.icio.us' brilliant JSON feed for the posts listed under that tag. The details from that feed is written down in the final container tag, and displayed for your categorising and using pleasure!.
The dynamic script tag which was written, is subsequently deleted, so that there aren't tons of <script> tags lined up in your <head>. For furthur usage and styling notes, visit his post at The Last Word.
See! That is the stuff. Now you can have this excellent implementation of categories in your blog, and also enjoy tagging and folksonomy at the same time, all thanks to another Astounding Solo job of Aditya.
If you have any question, comment or suggestion, you can leave a comment here or at Aditya's blog, we read and answer each message/comment.
Enjoy!
Credits
Idea, code and implementation: Aditya
Subscribe
Posts
Comments
9 comments:
Interesting implementation. It's not made by me but other then that it's great. hahaha It made me think of my original motivation to create categories in blogger.
I just couldn't find cool postings that I knew where in a blog. On some blogs I've spend around 20 min trying to find an old post. That means I would never find it if I visited for the first time. I would read about the new born baby, that sure is news worthy but it doesn't interest me enough to go read some other posts.
This practically means that the real innovations and ideas to rescue or evolve our planet are stuffed away some spot on page 500. :( We have to dig true 100 "George bush is an idiot" postings to find a political opinion on the site. And worse of all it's making spam blogs work! AHHHH
Even driven by database and a content management system it can take much to long to find anything. We don't need today's story that much, we want to read their most interesting things first. And interest is different for all of us.
the blog is a known format, it's easy to navigate. It would be so cool if we would be able to help move the "more interesting" content closer to the reader. I don't really care who made the script, as long as it works it's cool. :-) It means more free speech.
Imagine you see something like "affiliate marketing (55)", then can leave a blog in less then 5 seconds. That would PWNN :D
Ranting again gabs?
hehehe, i know you mean that is would really rock that we could all have the content that is relevant as the blog not only first priority but as a navigation in the site. the real problem here is about personal criteria and how could you make the gui to collaborate with a blog to facilitate this way of thinking.
glad to be of service Panda Cookie.
Tell me when you have it up.
Awesome hack! I just may use it in my own blog. :)
May? Hacks were meant to be used friend, not admired! :P
ehm, it's OOT i know :p but how did you managed to post <'script'> in blogger, every time i tried to post it, it says that those tags are not allowed
aahh, even in the comment i received those msg :p
both you and aditya are great blog hackers ;) nice readin' your posts :)
gratitude from indonesia :D
@Efendi: ehm, it's OOT i know :p but how did you managed to post <'script'> in blogger, every time i tried to post it, it says that those tags are not allowed
aahh, even in the comment i received those msg :p
both you and aditya are great blog hackers ;) nice readin' your posts :)
gratitude from indonesia :D
Thanks Efendi, i apreciate your words and please continue to read us, there is much to come. and as a excuse to introduce aditya, he will answer your question.
You honour me Avatar! :)
Hey Effendi! If I've got your question correctly, you're trying to write <script> in a post? To do that ... use &-l-t-; without the hyphens for a <, and &-g-t-; for a >!
If you're trying to put a <script> in a post, check the box which says 'ignore the errors' when it pops up.
If I haven't answered it correctly, slap me and ask again! :P
omg ! i forgot those basics :p stupid me, i'm thinkin' there a hack or some css or some js or somethin' thx for pointing that out :)
your blog is really good too :) both of you :)
and thx for the quick reply :)
@Efendi: omg ! i forgot those basics :p stupid me, i'm thinkin' there a hack or some css or some js or somethin' thx for pointing that out :)
your blog is really good too :) both of you :)
and thx for the quick reply :)
No problem, that is what we do here, and in name of Aditya and Mine. you are welcome all the way from India and Mexico.
Post a Comment
Welcome To Bloggeratto. In here you can post any kind of comment you want. Seriously, Go ahead.