The Priest In Question

Saturday, February 2, 2008

Blog-roll, please...

So I recently got my first bit of blog related email and it was from someone I for whom I have a high amount of respect. He made a request of me, and I've decided to go ahead and do it.

This post is some really jury-rigged Javascript/CSS to make a collapsible blogroll work in Blogspot. I understand you funky Wordpress people actually have plugins and whatnot to make blogroll-ing easy, but us Blogspotters have very little other than a straight-up list to work with. The basic list isn't even that nice looking either.

I'll start by saying that I wrote this mainly to keep myself from completely forgetting how to mess with Javascript and CSS. To that end, I ignored a few shortcuts I could probably have made in order to stick with those two methods of showing/hiding content. This led to a messy but workable solution that I'm happy with myself, but could be complex for others to try to adapt. If you're interested in what's going on in that little sidebar and would like to emulate it, you're welcome to read on.

The Idea
A few weeks back I looked at Trollin's Big List O'Blogs and was irritated that I found myself checking and reading tons of blogs every day (sometimes multiple times per day...) and yet on my own blog, I didn't mention any of them. Now obviously, to correct this, I could just link to every single one of the blogs I read. However, I worked at my school for two and a half years building/maintaining a few very intricate ASP-based websites, so I'm a bit of a stickler for clean-looking pages, so a list of blogs a mile long wasn't sounding great to me.

So does that mean I have to exclude some blogs from my blogroll? No, unacceptable. I couldn't bring myself to read a blog, be entertained by it, and not link to it. It's just not in my character.

I noticed that Kestrel has an awesome little category thing going on in his blogroll. He's got little expandable sections for 5-star blogs, priest blogs, druid blogs, etc. I love it. It's the perfect solution to my problem. I can link to all the blogs I read and not have my sidebar be 12 miles long.

However, Kestrel uses Wordpress and that category thing is probably a plugin. Blogspot is not quite hip to the plugin craze, so I'm going to have to come up with something to make it work. I notice Blogspot allows CSS/Javascript in it's little container-based configuration screen (Blogspotters, you know what I'm talking about. Others... be thankful you don't). With that allowance, along comes...

The Brainstorm
CSS has a nifty little attribute that can be attached to absolutely any object called "display". Many of you that have messed with themes and/or skins have probably seen it. It has more than a few uses, but one of them easiest is simply to hide content by changing the display attribute's value to "none". If "display:none" is set, then whatever is inside that object is invisible on the page.

This is the part where it gets confusing so if you don't want to read about my geeky HTML ramblings, skip the rest of this and jump to the "Solution" section a little ways down. For anyone who enjoys HTML and tricking it into doing fun things, please, read on.

The question is, how do you change the display attribute of the links that you are showing and hiding when the reader opens the page and looks at the blogroll? In comes Javascript. Javascript can get kind of crazy (I know as much if not more than most), but it does have it's uses, and I found one. What Javascript lets me do is write a set of instructions that are performed under certain circumstances (a method, or function).

So now I know how I'm going to show/hide links based on category, but how do I set up categories? Well, at the beginning of the whole thing, I decided I was going to stick with HTML/CSS/Javascript for the entire process of getting this blogroll to work. To that end, there's only one place to store information about a tag, and that's in it's class. The class of a tag is a little definition of what kind of information is held inside the tag. For example, the class of the tag that holds your whole sidebar likely has something to do with "sidebar" and your About Me section is probably in a tag with "About" in it's class. Well, in this case, I'm going to make the classes of my link tags be really weird. I'm going to set up shortened versions of my categories and append them on to the end of the class name for the blogroll so that the Javascript can figure out what categories a link is in. I know that was hard to comprehend, I can't really come up with words to explain it very well. It's easier to understand with an example. In my case, I'm dividing my blogs up into class categories, so my "shortened categories" are like "dru" for druid, "pri" for priest, "lock" for warlock, etc. I also used "star" for recommended reading and "misc" for miscellaneous types. An example of the class name I used is "blogroll-pri-star" for a blog about priests that I happen to recommend as a good blog. Each category is divided by a hyphen so that the Javascript can easily search for the category in the class name.

Okay, so all the long-winded geek-babble is over. I apologize to anyone who was interested in my blogroll but didn't need/want to read any of that. With no further ado, I present

The Solution
All the links in my blogroll are contained inside DIV tags. DIVs are standard wrapper tags that I use to attach the display:hidden and class elements as needed. The standard format for any link in my blogroll is:

<div class="blogrolljs-[categories]">
<a href="[website]">[title of blog]</a>
</div>

For example, my entry for the aforementioned Kestrel's Aerie looks like this:

<div class="blogrolljs-star-pri-hunt-rog">
<a href="http://kestrelsaerie.us">Kestrel's Aerie</a>
</div>

Note the "[categories]" has been replaced with "star-pri-rog-hunt". This means that it's a Recommended Blog that includes Priests, Rogues, and Hunters. It's possible to append as many categories as you want to one link in this manner and the link will show up in each category.

Now, all those category names mean nothing without the buttons that show each category. This is because it's the buttons that actually define the categories and their "shortened" versions. The top row of my buttons looks like this:

<img src="all.png" title="All Blogs" onclick="changeDiv('blogrolljs','All Blogs')"/>
<img src="star.png" title="Recommended Reading" onclick="changeDiv('star','Recommended Reading')"/>
<img src="misc.png" title="Miscellaneous Blogs" onclick="changeDiv('misc','Miscellaneous Blogs')"/>
<img src="dru.png" title="Druid Blogs" onclick="changeDiv('dru','Druid Blogs')"/>
<img src="hunt.png" title="Hunter Blogs" onclick="changeDiv('hunt','Hunter Blogs')"/>
<img src="mage.png" title="Mage Blogs" onclick="changeDiv('mage','Mage Blogs')"/>

They're all basically images. The src attribute works exactly as normal, you put in the location of your image, self-hosted, imagebucket, blogspot-hosted, however you want. The title attribute is the text that comes up if someone hovers their mouse over the image. The onclick attribute is the Javascript. It points to the method called "changeDiv" that I wrote (and will show in a second). Inside the parentheses are two pieces of information. The first is the shortened version of the category that I used in the class names for the links. This has to be exact, and it doesn't include hyphens or anything. The category linked for the "All" button just tells the method to show all the blogs in a long list. Each of the other category buttons will show only the blogs who's class name contains the category listed. The second piece of information is the title for the category. Basically, what it says at the top of the list after you click on it.

The title is filled in by the Javascript into a special Div that I created to hold it. Basically, after the buttons for the categories but before you start listing blogs, include this Div:

<div id="blogroll-title"></div>

It's just an empty Div that the Javascript will automatically fill with the title based on the title given in the button's link.

Last but not least, the actual Javascript code I whipped up to hide/show the links by category.

<script type="text/javascript">
<!--
function changeDiv(name,title)
{
var d = document.getElementsByTagName('DIV');
for(var i=0;i<d.length;i++){
if(d[i].className.indexOf('blogrolljs') != -1){
if(d[i].className.indexOf(name) != -1){
d[i].style.display = '';
}else{
d[i].style.display = 'none';
}
}
}
document.getElementById('blogroll-title').innerHTML=title;
}
-->
</script>

So yeah, that's it. It doesn't look that long (it really isn't), but it does just what it should. It searches through all the Divs on the page, then when it finds a Div that's part of your blog roll it checks to see if it's in the category that's supposed to be shown. If it isn't, it gets hidden. If it is, it gets shown. At the end of the method, it changes the text of the Title Div to be the title that is given to it in the image button.

That about wraps it up. When I was asked to share my blogroll, I didn't originally plan to write this much about it, but I'm a little proud of what I did. More-so since at least one person likes it. =P.

If you have a WoW-blog and want to copy this, you're welcome to. Just put a little note somewhere that says I made it. That's all I ask.

Also, if you want to use it, but this was too in depth geek-wise and not in depth enough how-to-wise, then please tell me in the comments or in an email and I can write up a "How To: Trollin's Blogroll" post with steps you can follow.

EDIT: Woops! Thanks to Perpetuus Mos Guild for catching my error. I completely forgot to mention that you'll want to put something like:

<script type="text/javascript">
<!--
changeDiv('star','Recommended Reading');
-->
</script>

At the end of the blogroll so that when the page loads, it automatically shows one of the categories instead of the whole list.

11 comments:

Pike said...

Woot!

I LOVE how you did your blogroll and I've been curious about how you did it... thanks for sharing!

Horns said...

Thanks for sharing, I'll probably try it soon

Mana Battery Bitch said...

My eyes glazed over pretty quick, but it's clear that it took some tinkering so go you! I certainly know how headache-inducing stubborn codes can be (that's why I no longer bother!). I'll stick to the old and boring over in my little corner, at least for now.

Mana Battery Bitch said...

PS first Absolution piece in place :D :D :D

kestrelsaerie said...

Trollin', that is awesome!! And I'm not just saying it cuz you linked me twice. :D

I would LOVE to see something like that in WP...I just may have to read closer and see if it is adaptable (not sure how WP handles Java stuffs, and I'm no coder). If copy/paste/tinker can do the trick, I may have to see if I can do something similar. (Or post on BlogAzeroth to see if there's a WP coding guru who can do something with it.)

The one thing I might lose, that I kinda like, are the little blurbs for each entry in my blogroll. (Oh, and you're right: It is a plugin.)

Perpetuus Mos Guild said...

Awesome! Thanks so much for sharing. I have one quick question though... I see on your blogroll that it shows your recommended list by default instead of your full list of blogs, could you explain how pretty pretty please?

Trollin' said...

@PMG: Oh woops! I totally meant to include that at the end and must have editted out on accident.

<script type="text/javascript">
<!--
changeDiv('star','Recommended Reading');
-->
</script>

Put that at the end of the blogroll. You can use any category you want. You're just faking someone clicking the button.

BigBearButt said...

Congratulations Trollin, that's an absolutely kickass job!

I think your blogroll is the greatest I've seen, and it's that much better knowing you created it yourself!

You are just awesome!

ren.kat said...

I am continually stunned by the generosity of bloggers. Your solution is downright elegant. I just finished re-designing my website and was looking for something smooth (blogrolling is a must- I get two visits a day if I am lucky. They are usually from Taiwan). -

I have no idea what a WoW blog is. So I will ask my kid to help me.

Thank you so much for sharing.

ren.kat said...

All right. It definitely took me longer than it should have to figure out WoW. My son may never be seen in public with me again. Can I still copy and credit and be all kinds of thankful?

Trollin' said...

Of course you can, though I'm not sure you'll ever see this. I looked for an email on your blog(s) and couldn't find one. You're welcome to copy and credit as you wish. Email me at i.be.trollin (at) gmail (dot) com if you need to.