How to Make a Tag Cloud for Movable Type Blogs

Como eres nuevo en Comentarios en Profesor Blog, te recomendamos que te suscribas a nuestro feed RSS. No te pierdas ningún artículo: Cada uno te sorprenderá! Muchas gracias por tu visita!

BloggerTips wrote a very nice tutorial on how to make a tag cloud for Movable Type blogs.

1. Create a new page for your site for the tag cloud. Click here for instructions on how to do this. I called our tag cloud page tagcloud.html but it doesn’t matter what it’s called (and doesn’t have to have a .php extension).

2. Clear the body of the new page.

3. Paste the following code into the body of your tag cloud page (where you’d like the tag cloud to appear) -change “(” for “<”:

(!– Start Tag Cloud –)
(p id=”cloud”> (/p)
(!– End Tag Cloud –)

This publishes your site’s categories in a row that wraps whenever it reaches the end of the line. Each category is hyperlinked to the appropriate archive page.

The div id=”cloud” tag allows you to format the tag cloud using CSS.

class=”tag< $MTCategoryCount$> adds a CSS class to each tag that’s unique to the number of posts in each category. When published, this converts to class=”tag4″ for a category with four posts.

Okay, that covers the work on the page. Now for a few additions to your site’s style sheet. If you save and republish the page, it should build your tag cloud with no formatting.

4. Go to Templates and open styles-site.css.

5. Add the following code to the bottom of the style sheet:

/* Start Tag Cloud CSS */

#cloud {padding:1px; line-height:30px;text-align:center;}
#cloud a {text-decoration:none;padding:0px;}

a.tag1{
font-size:12px;
}
a.tag2, a.tag3 {
font-size:13px;
font-weight:200;
}

a.tag4 ,a.tag5, a.tag6 {
font-size:16px;
font-weight:300;
}

a.tag7, .tag8, a.tag9 {
font-size:20px;
font-weight:300;
}

a.tag10, a.tag11, a.tag12 {
font-size:24px;
font-weight:300;
}

a.tag13, a.tag14, a.tag15 {
font-size:28px;
font-weight:400;
}

a.tag16, a.tag17, a.tag18 {
font-size:30px;
font-weight:400;
}

a.tag19, a.tag20, a.tag21 {
font-size:32px;
font-weight:500;
}

a.tag22, a.tag23, a.tag24 {
font-size:34px;
font-weight:500;
}

a.tag25, a.tag26, a.tag27 {
font-size:36px;
font-weight:900;
}

a.tag28, a.tag29, a.tag30 {
font-size:38px;
font-weight:900;
}
/* End Tag Cloud CSS */

6. Save and rebuild your style sheet.

7. Refresh your tag cloud. It should now be formatted.

The CSS tags listed above gradually increase the font site, (and some include an increase in font weight as well) as the number associated with posts in a category increases. The font sizes and post numbers associated with different sizes can be adjusted here, changing the look of your tag cloud. It may take some experimentation to find a format that is suitable for the number of categories used in your site, and your post volumes to various categories.

8. Link to your tag cloud from your site’s templates.

9. Remove the categories section from you site’s templates.

10. Done.

- Si te gustó el artículo, deja una marca social (usando el botón “Compártelo” aquí abajo) y enseñaselo al mundo. Todos te lo agradecerán, ¡No lo dudes! -

Compártelo