Hi,
here are some code snippets that show how I implemented the tag cloud on this blog.
Step 1: Log in to Roller, go to Design-Theme and select 'Custom Theme' for your blog.
Step 2: Go to Design-Stylesheet and add to the end of the CSS code:
/* Tag Cloud -----------------------------------------------*/
.tagcloud { font-size: 130%; light-height: 90%; word-spacing: 3pt;
text-align: center;
margin-top: 13px }
a.tag { border-style: none }
a.tag.s1 { color: #a3b8cb; font-size: 70%; letter-spacing: 1px }
a.tag.s2 { color: #a3b8cb; font-size: 90% }
a.tag.s3 { color: #5382a1; font-size: 100% }
a.tag.s4 { color: #5382a1; font-size: 120% }
a.tag.s5 { color: #35556b; font-size: 140%; letter-spacing: -1px }
Step 3: Go to Design-Templates, open the 'sidebar' template and add to an appropriate position:
<!-- TAGCLOUD -->
<div class="navsect">
<div class="tagcloud">
#set($mytags = $model.weblog.getPopularTags(-1, 100))
#foreach ($tag in $mytags)
#if ($tag.count > 1)
<a class="tag s${tag.intensity}"
href="$url.tag($tag.name)"
title="$tag.count">$tag.name</a>
#end
#end
<a href="$url.home">(all)</a>
</div>
</div>
The surrounding navsect-div depends on your general theme. The tagcloud-div is the link to the special font style above.
Tags show up in the tag cloud as soon as they are used twice.
Step 4: The footer for each blog article should also contain the tags. For me this is coded in the '_day' template (3rd line from the bottom):
<div class="entryfooter">
<p>
$utils.formatDate($entry.pubTime, "dd MMM yyyy")
| <a href="$url.entry($entry.anchor)">Permalink</a>
#if ($utils.isUserAuthorizedToAuthor($entry.website))
| <a href="$url.editEntry($entry.anchor)">$text.get("macro.weblog.entrypermalink.edit")</a>
#end
#set($commentCount = $entry.commentCount)
#if($entry.commentsStillAllowed || $commentCount > 0)
#set($link = "$url.comments($entry.anchor)" )
| <a href="$link" class="commentsLink">$text.get("macro.weblog.comments")[$commentCount]</a>
#end
| Tags: #foreach($tag in $entry.tags) <a href="$url.tag($tag.name)" title="$tag.count">$tag.name</a> #end
</p>
</div>
Step 5: Tag your articles. Use the Tags field above the edit field when you create an article. All tags are yours. Build your own vocabulary that makes sense to you –– by adding popular tags you can drive some traffic to your site.
Step 6: Enjoy. Let me know if this was useful for you, and share a link to your blog with the new tag cloud.
-Matthias
PS_
- GullFOSS tag cloud updated
- design@sun tag cloud updated
- tag clouds for sweet, the Sun internal microblogging service
- Think Thin as well





Thanks for information .
Posted by Ciupercarii on January 29, 2009 at 09:20 AM CET #
Awesome guide, thanks so much! :)
Posted by Dave on February 05, 2009 at 10:16 AM CET #
ps. I like the touch of having different shades and text width for popular tags, not just different font weight :)
Posted by Dave on February 05, 2009 at 10:18 AM CET #