Banana Stew


Wednesday, December 20, 2006

FTTX News Template

Upon request, I have posted the template used in my Blogger Beta blog (see details here). I haven't worked on it in a while, but perhaps it will be of use to others.

Click here for the FTTX News template.



Labels: ,

6:39 AM |0 comments | Backlinks


Thursday, September 07, 2006

Tagclouds in Blogger Beta - another way

This previous post showed a very clever way to display your list of tags as a tagcloud in Blogger Beta. However, it had the small flaw that it doesn't actually work with the current bug-ridden Beta.

Here's another method - not quite as clever, but not too bad - that actually works right now. It uses the "expr:" operator in Beta.

First, define a series of styles with gradually increasing font size, color shading, or whatever. Give them all the same name, but end them all with a number that will equal the number of posts associated with that label. For example:

.common-link-1 {font-size:85%;}
.common-link-2 {font-size:86%;}
.common-link-3 {font-size:87%;}
.common-link-4 {font-size:88%;}
.common-link-5 {font-size:89%;}
.common-link-6 {font-size:90%;}
.common-link-7 {font-size:91%;}
.common-link-8 {font-size:92%;}
.common-link-9 {font-size:93%;}
.common-link-10 {font-size:94%;}
.common-link-11 {font-size:95%;}
etc.
The downside of this particular method is that you're going to have to define one of those for each and every number that you expect to see in <data:label.count>.

The upside is that your tag code is very compact.

<b:loop values='data:labels' var='label'>
...<span expr:class='"common-link-" + data:label.count'>
....<b:if cond='data:blog.url == data:label.url'> (<data:label.count/>)
......<data:label.name/>
....<b:else/>
......<a expr:href='data:label.url'><data:label.name/>(<data:label.count/>)</a>
....</b:if>
....</span>
</b:loop>


The expr: operator concatenates the number of posts to the span class. Slick, no? Here's my example in operation.




Labels:

4:44 PM |3 comments | Backlinks


Tagclouds in Blogger Beta - almost

After spending some time deconstructing the new Blogger Beta language, I thought I'd try a bit of hacking. In particular, I'd like the categories/labels to show up as a cloud instead of the default ordered list.

Some things I'd like the cloud to do (as opposed to what the standard template does):
  • Change the font size and/or color so that more frequest posts stand out
  • Show up as a block of text instead of a long list
  • Include the number of posts in the formatting style instead of in ugly black text
Here's the default text for displaying the list of labels:

<ul>
.<b:loop values='data:labels' var='label'>
..<li>
..<b:if cond='data:blog.url == data:label.url'>
....<data:label.name/>
...<b:else/>
....<a expr:href='data:label.url'><data:label.name/></a>
...</b:if>
...(<data:label.count/>)
..</li>
.</b:loop>
</ul>


(Ignore the leading periods. I've included them only because Blogger automatically ignores spaces.)

The if-then structure here checks to see if the current page is a tag page. If so, then that particular tag is not printed out as a hyperlink (no need to link to the current page). That's a nice construct, so we'll leave it in.

The first thing to delete is all of the <ul> and <li> tags, as those are what is creating the ordered list.

The next step is to move the line (<data:label.count/>), which prints out the number of posts assosicated with a line in the nasty black, next to the lines that print out the labels [e.g. <data:label.name/>)]. Be sure to include spaces so that things aren't all crammed together.

If you stop there, you'll have a nice "cloud", but no formatting changes based on the number of posts. If that's what you're interested in, here's the code.

.<b:loop values='data:labels' var='label'>
..<b:if cond='data:blog.url == data:label.url'>
....<data:label.name/> (<data:label.count/>)
...<b:else/>
....<a expr:href='data:label.url'><data:label.name/> (<data:label.count/>)</a>
...</b:if>
.</b:loop>


To make the fonts and/or sizes change, you'll need to define different styles in your style sheet. In this example, I've defined one style only - for the more common posts to be 25% larger than the other labels. This goes in your header with the other styles.


.common-link {font-size:125%;}


Now, an if-then contruct can be added around the code above so that if the number of posts is less than some threshold (say 10 posts), then it's printed as normal. If the number of posts is greater than the threshold, then use the new style. Cascading several if-then staments will allow a variety of thresholds.

.<b:loop values='data:labels' var='label'>

<b:if cond='data:label.count > 10'>
.<span class='common-link'>

..<b:if cond='data:blog.url == data:label.url'>
....<data:label.name/> (<data:label.count/>)
...<b:else/>
....<a expr:href='data:label.url'><data:label.name/> (<data:label.count/>)</a>
...</b:if>

.</span>
<b:else/>

..<b:if cond='data:blog.url == data:label.url'>
....<data:label.name/> (<data:label.count/>)
...<b:else/>
....<a expr:href='data:label.url'><data:label.name/> (<data:label.count/>)</a>
...</b:if>

</b:if>

.</b:loop>


Note that you have to include all of the code for printing out links inside each if-then-else section. This is because the code does not allow a link to close outside of a section. If that doesn't make sense to you, don't worry about it - just use the code as posted.

However, there is a problem. Currently, the greater than (>) conditional does not appear to be working with Blogger Beta. When you use the code as written above, your labels widget will not appear. Hopefully Blogger's working on this.

In the meantime, the code above will work with equal to (==) and not equal to (!=), so theoretically you could write a long series of if-thens with a lot of equal to statements, but I wouldn't suggest it.

[Update] Here's another way that actually works in the current version of Blogger Beta.



Labels:

11:22 AM |0 comments | Backlinks


Thursday, August 31, 2006

Deconstructing Blogger Beta HTML Template Editing

I've been trying out Blogger Beta with a test blog at http://fttxnews.blogspot.com. Today, Blogger turned on the ability to edit the raw templates. It's a new and wonderful world of strange tags and interesting operators.

For my own benefit, and perhaps the benifit of a few others, here's a deconstruction of my new Beta template.

[Update 09/01 around 2:30pm] This page has been (1) slashdotted and (2) innundated with comments that it is too hard to read. I have posted a large font version at http://www.wilkinsons.com/Bananna/BetaCodeLargeType.htm for those who are having trouble reading this. You'll have to return here to post, though. Also, please link to this post directly, not to the large font version. That one might be moving around a bit.

Latest update: 9/5/2006

This post is very, very long, so I've hidden it behind a cloak of invisibility (may not work on all browsers). Click here to reveal the gory details.




Labels: ,

11:09 AM |35 comments | Backlinks