My Roller Tag Cloud

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_

Comments:

Thanks for information .

Posted by Ciupercarii on January 29, 2009 at 01:20 AM CET #

Awesome guide, thanks so much! :)

Posted by Dave on February 05, 2009 at 02: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 02:18 AM CET #

Thanks. Works well.

Posted by Lutz on August 05, 2009 at 02:44 PM CEST #

Im trying to fing a cloud tag in html. Im only finding it for wordpress. Can anyone help? Thanks

Posted by madseason on January 07, 2010 at 12:09 PM CET #

I need this in html not xml. Any help?

Posted by Sunup on January 22, 2010 at 11:31 PM CET #

I applies above, but all shows in my tag cloud is "all".

I have the tag plugin enabled and I am adding tags to my entries.

Posted by Scott on February 24, 2011 at 07:47 AM CET #

Post a Comment:
Comments are closed for this entry.
About

Search

Categories
Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today