Customize blogger’s layout with labels

Here is a fun little thing I figured out recently. I’ve long been a fan of using labels in blogger to organize posts and make them easier to find. But, you can use the labels to customize the appearance of the blog depending on which one you’ve chosen. It requires a bit of javascript, but it’s not especially difficult. For an example, look to uccburlington.blogspot.com. Notice how the leader text reads differently depending on which label you choose.

The trick with the javascript is to look at the url header for the blog. If it sees a particular label, apply a particular style or block of text.

To add it to blogger, log in and customize the layout:

 

Add a gadget. Specifically an html/javascript gadget.

Now copy in this code:

<script>
    if(window.location.href.indexOf("Announcements") > -1) {
    document.write("<h1>Announcements</h1>");
    }
</script>

The if statement checks the url for the word corresponding to your label (note: It is case sensitive, so Announcement and announcement are different). If it find its, it executes the code below. In this case, it writes the line “Announcements” in an h1 header format. If you are feeling adventurous you can delve into the realm of javascript to dictate styles, colors, and other things as well, but I’ll leave that alone for now.