Tuesday, 14 April 2009

CREATE YOUR OWN TAG/LABEL CLOUD


The future's so bright, I gotta wear shades!




Copyright-free image from Tack-o-Rama




Do you hate how your Labels look? All straggly and a list that goes on forever? You want to be thorough, you want to label your posts properly so that others can find them... but...

You need a label cloud!


This does take a little bit of code, but it isn't that hard and YES you can do it! Just follow the instructions exactly.

Before you start

BEFORE you start, though, go to Layout > Edit Html > Download Full Template. This saves your template to your Desktop, and it can be uploaded again, no damage done, if you made a complete hash of things - so no worries!

Let's go

Go to Layout > Edit HTML

Open a new web page, then go here for the instructions for the label cloud as you'll need to go back & forth between the two pages.

Do exactly as in the instructions. To make it easy on yourself, click CTRL + F on your keyboard to open up the Find: box (a white box which will sit just above your bottom toolbar, immediately above your Start button). Copy&paste the first piece of code you need to find into this box, and it will highlight in the HTML box. Follow the instructions then go to the next section, etc etc.

When you have entered everything, you pretty much have your tag cloud sorted. You now need to alter the size by typing var maxFontSize into that Find box, so it highlights, then change the size if you want to (my max is set at 20 but my minimum is set at 12 as I like my fonts bigger so they are easier to read).

In the same section you'll see the colour codes: var maxColor

Here is where you change the set colours to the ones YOU want. The max colour is the most linked colour (the link will also show as the largest typeface) and the min colour is the link least typed in (and will show as the smallest typeface). The colours and sizes will sort themselves out as to how many times you type that particular link as a label for your post.

You need to choose two contrasting colours, then the size/colour range will vary between the two. The bigger the contrast, the more range of colour will show.

Open up another web page and click the link to choose your colours from the hexadecimal colour chart codes

Scroll down the page, and you will see the colours have a title at the top of each box, eg: RED is #CC0000 (this is how the colour would appear in your Fonts&Colours, in Layouts, when setting up your blog colours) but for the html code you are writing in your Label Cloud, you will use the three sets of numbers below, with a comma separating each colour (no spaces).

So var maxColor codes for RED would be typed in as 204,0,0

When you have finished, click Preview to see how it looks. Hate it? Want another go? Click Clear Edits, and all the code will be removed and you can start again. Click Save Template, and you're done... go and admire!

Clicked Save Template and you didn't mean to... well, you Downloaded Full Template before you started, so just reload it.

Hope you enjoyed this little tutorial! I love tag clouds!

post signature

your photo name

2 comments:

  1. First off Susie I have utilized your tutorials far more than ANY blog on the web....I have learned so much from you it is unbelievable! I doubt you will recall my first blog but my current holds almost ALL of your tutorials..love it. Now........I just did the above tutorial and now I have 2 label clouds..I have obviously failed somewhere but can't figure out where? Suggestions?
    Thanks in advance!
    Kathie
    http://kathleessnippitsncricuts.blogspot.com
    kathlee154atgmaildotcom

    ReplyDelete
  2. Kathlee - bless you for the compliment!

    RE the label cloud - I think this is because I wrote the tutorial before Blogger changed to the new Template Designer, so the coding has changed somewhat. In your normal Labels facility (in Templates) you can now click on the ordinary labels or the label cloud option, and you also have the option of having the number of posts per category show (or not). I'd advise you remove one or the other (if the Blogger one, you'll be able to do this in Design:Page Elements view - just delete the widget).

    Hope this helps! And thanks for using my tutorials. Hugs etc...

    ReplyDelete

I absolutely love to receive comments!

But please note - I DO check for spam, and I moderate all comments - any spam is deleted at source.