Assuming you use this tool, or one of its ancestors and relatives, or doing it manually yourself, posts in your blog with one or more tags will get this bit of HTML appended to the post (provided it has been tagged with "Blogger" and "CSS", the Del.icio.us account used is Ohayou, and the anchor tag used is "ecmanaut" -- yours will differ):
<div class="tags">Categories:<ul><li><a href="http://del.icio.us/ohayou/ecmanaut+Blogger" rel="tag">Blogger</a></li> <li><a href="http://del.icio.us/ohayou/ecmanaut+CSS" rel="tag">CSS</a></li></ul></div>
A bit terse, yes, but there is good reasoning behind it. First, people won't read the HTML of your post, so the lack of newlines and additional whitespace will not bother anyone. Second, if it had had any newlines between tags, that would introduce extra
<br> tags on blogs that use the Blogger convenience setting to substitute newlines for HTML line break tags, and that might complicate styling this list the way you want it to look. Without any special CSS treatment of yours, this might look a bit like this in your blog (if you use the same basic page template I do, anyway):Categories:
The first thing you might want to change about the above is the way it adds a line break between every tag instead of listing them all on one line. Find the place in your page template that reads
<style type="text/css"> and add this bit of CSS right afterward:div.tags ul { display:inline; padding:5px; }
div.tags li { display:inline; }The first line makes the first tag line up with the "Categories:" text, the second makes consecutive tags line up right along with the previos tag. The explicit padding in the example might not be needed, depending on what other CSS is at play, but if you experience something looking like a tab between the label and first tag, you want it. Similarly, if there is way too much space between tags, you might need to adjust the
li line in the same fashion.But we might want to add some nice little icon label next to each tag, that differentiates them from all the other bullet lists on your blog. These are Del.icio.us tags, after all; how about showing the Del.icio.us tag icon instead? That could look like this (feel free to copy their image and put it somewhere else, if you don't want to feed them any data about your visitors, the amount of traffic your blog gets, and so on):
div.tags ul { display:inline; }
div.tags li { padding-left:14px; margin-left:8px; background: url('http://del.icio.us/static/img/delicious.small.gif') no-repeat 0 3px; display:inline; }The padding and margin adds a few pixels to the left of each tag for the icon, and the background specification fills the space with the icon. The
3px figure at the end might need adjusting; it's how far down (in pixels) the icon should be in relation to the top of the list item and this will vary slightly with the size of the font you use. Three pixels works for my setup; yours might require more or less; try it out and see if you are happy with the results, and change accordingly otherwise.You can of course add lots of other things too using CSS, and this is not trying to be a tutorial on all the possibilities on offer, but it's a head start, anyway. Good luck with your own styling!
Q: I have a blog based on the TicTac template, just like yours; how did you get your tags formatted like the text in the TicTac post footer?
A: I did it like this, altering the
.post-footer sections to also apply to my div.tags tag list. If you don't want your tags capitalized, do not copy the text-transform:capitalize; bit..post-footer,div.tags {
margin: 0;
padding: 0 0 0 14px;
font-size: 88%;
color: #999;
background:url(http://www.blogblog.com/tictac_blue/tictac_grey.gif) no-repeat 0 8px;
}
.post-body div.tags { margin:1em 0 0; }
div.tags ul { display:inline; margin-left:0; }
div.tags li { display:inline; margin-left:8px; text-transform:capitalize; }
.tags li {
background:url('http://del.icio.us/static/img/delicious.small.gif') no-repeat 0 3px;
}