« Home | Generate RSS Feeds for Any Web Page » | Make Gmail your Default E-mail Program » | Free Advertising with Billion Dollar Exit » | Facebook Hack: Remove Feeds from Your Profile » | Copyscape: Find out who's Quoting your Blog » | Send Unlimited Email Attachments with Pando » | How to Save Bandwidth Webhosting » | Use Gmail Generate Unlimited E-mail Addresses » | Gmail Search Operators: Find E-mail More Efficient... » | Subscribe to Digital Alchemy »

Friday, September 08, 2006

Blogger Hack: Create Categories in your Blog


The lack of categories is one of the most glaring omissions in Blogger's functionality, but luckily there are a few lines of code you can put in your blog's template to manually create categories. The downside is that it is time-consuming because you have to manually enter links to your posts into the template each time you want to update your categories. [Thanks to A Consuming Experience]. If you want a faster, but less elegant, method, skip to the bottom.

Example:
Two code segments need to be inserted into your blog template. The first doesn't need to be modified. Just insert it. I inserted it just before the </head> tag. You can quickly find the </head> tag by using your browser's find function. (The code needs to be somewhere between <head> and </head>)

First segment:

<style type="text/css">
.texthidden {display:inline}
.shown {display:block}
</style>

<script type="text/javascript">
document.write('<style>.texthidden {display:none} </style>');
</script>

<script type="text/Javascript">
function expandcollapse (postid) {
whichpost = document.getElementById(postid);
if (whichpost.className=="shown") {
whichpost.className="texthidden";
}
else {
whichpost.className="shown";
}
}
</script>

The second segment you can put anywhere in your sidebar (insert it anywhere after you see <div id="sideBar">). I chose to put it after the blog member profile tag (<$BlogMemberProfile$>).

Here's the second segment with sample code:

<div style="width:100%; text-align:left;">
<h6><p><li>Categories</li></h6>

<li>
<ul><a href="javascript:void(0);" onclick="expandcollapse('gmail')"> [+/-] Gmail Hacks</a></ul>
<ul class="texthidden" id="gmail">
<li><a href="http://21st.blogspot.com/2006/09/use-gmail-generate-unlimited-e-mail.html">Use Gmail Generate Unlimited E-mail Addresses</a></li>
<li><a href="http://21st.blogspot.com/2006/09/make-gmail-your-default-e-mail-program.html">Make Gmail your Default E-mail Program</a></li>
</ul>
</li>

</style></div></p>

See the result on my sidebar. The important parts are highlighted. For the words highlighted in red, just insert a descriptive word or phrase. The part in blue is what people see as your category title. The part in purple is the link to your post, and the part in green is the post title. To create more categories just copy the middle section of the code (between <h6><p><li>Categories</li></h6> and </style></div></p>) and replace the text.

A less elegant, but faster, option: Use del.icio.us to tag your posts and insert links to your tags into your sidebar. Your tags will just be your categories. Create a new section, "Categories", in your sidebar and place your del.icio.us tag links there. It doesn't look as nice, but it saves you from needing to go into your template every time a new post needs to be categorized.

Labels:

Send to a Friend!       Subscribe!      

    Stumble Upon Toolbar    

Comment Archive

Reader Comments:


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 "p" must be terminated by the matching end-tag "

".
Help, What does this mean?


Previous Posts

« Home