A widget nuvem de tags é uma das melhores ferramentas de navegação entre as paginas internas de um site. De facil entendimento e visualização, imediatamente nos indica as tags (conteúdo) que são prioridades do site/blog.
O problema das nuvens de tag é que são estáticas, ficam inertes até que seja inserido novos marcadores (tags). E as nuvens animadas, geralmente são em flash, o que não agrada a muitos blogueiros.
Portanto resolvi montar uma nuvem de tags que se modifique a cada carregamento de pagina, e não exija flash (mas exige javascript!). E como nas nuvens reais, sua forma é passageira. Confira o Resultado.
Fazendo sua Nuvem de tags manual aleatória
Para fazer este tutorial fui inspirado pelos seguintes artigos:
Nuvem de tags manual
Com este artigo da Ro (bloggersphera) aprendi a fazer uma nuvem de tags com varias cores e estilos, algo simples, mas que só mente criativa dela é capaz de fazer.
Descrição aleatória abaixo do título no Blogspot
No compulsivo aprendi um recurso em javascript que exibe uma mensagem aleatoriamente dentre varias registradas.
Uni o melhor dos dois mundos e surgiu uma nuvem de tags bonita, leve e aleatória.
Atualize esta pagina atual e cada nova atualização você verá uma imagem diferente abaixo. A nuvem de tags é com texto, mas código é o mesmo.
O código javascript mencionado para exibir as mensagens aleatórias é a seguinte.
<script language="JavaScript">
var quotes=new Array()
quotes[0]='Preencha com a frase engraçada #0'
quotes[1]='Preencha com a frase engraçada #1'
quotes[2]='Preencha com a frase engraçada #2'
var whichquote=Math.floor(Math.random()*(quotes.length))
document.write(quotes[whichquote])
</script>
Basta substituir o texto em vermelho pelo de sua preferência, inclusive pode ser inserido tags HTML. Você pode registrar quantas mensagens desejar, bastando inserir novas linhas com os números, em azul, em ordem crescente.
Iniciando sua nuvem de tags aleatória
No código abaixo é de minha atual nuvem de tags que você pode visualizar no rodapé deste blog (somente paginas individuais). Como possuo poucos artigos lançados e consequentemente poucas tags, minha nuvem foi um pouco limitada na variação de tags.
O código é muito simples. Para cada trecho de código em javascript com o recurso mensagem aleatória, inseri apenas duas tags (url dos marcadores - label), e como inseri 12 trechos em javascript, então temos um total de 24 marcadores que poderão ser exibidos. Veja o código abaixo:
<div id="tagcloud_aleat">
<script language="JavaScript">
var quotes=new Array()
quotes[0]='<a href="http://seusite.com/search/label/google" class="level2">google</a>'
quotes[1]='<a href="http://seusite.com/search/label/qrcode" class="level5">qr code</a>'
var whichquote=Math.floor(Math.random()*(quotes.length))
document.write(quotes[whichquote])
</script>
<script language="JavaScript">
var quotes=new Array()
quotes[0]='<a href="http://seusite.com/search/label/marcadores" class="level3">marcadores</a>'
quotes[1]='<a href="http://seusite.com/search/label/blogger" class="level1">blogger</a>'
var whichquote=Math.floor(Math.random()*(quotes.length))
document.write(quotes[whichquote])
</script>
<script language="JavaScript">
var quotes=new Array()
quotes[0]='<a href="http://seusite.com/search/label/torrent" class="level3">torrent</a>'
quotes[1]='<a href="http://seusite.com/search/label/imagem" class="level2">imagem</a>'
var whichquote=Math.floor(Math.random()*(quotes.length))
document.write(quotes[whichquote])
</script>
<script language="JavaScript">
var quotes=new Array()
quotes[0]='<a href="http://seusite.com/search/label/berserk" class="level1">berserk</a>'
quotes[1]='<a href="http://seusite.com/search/label/anima%C3%A7%C3%A3o" class="level4"></a>'
var whichquote=Math.floor(Math.random()*(quotes.length))
document.write(quotes[whichquote])
</script>
<script language="JavaScript">
var quotes=new Array()
quotes[0]='<a href="http://seusite.com/search/label/humor" class="level2">humor</a>'
quotes[1]='<a href="http://seusite.com/search/label/download" class="level4">download</a>'
var whichquote=Math.floor(Math.random()*(quotes.length))
document.write(quotes[whichquote])
</script>
<script language="JavaScript">
var quotes=new Array()
quotes[0]='<a href="http://seusite.com/search/label/anime" class="level1">anime</a>'
quotes[1]='<a href="http://seusite.com/search/label/fansub" class="level5">feed</a>'
var whichquote=Math.floor(Math.random()*(quotes.length))
document.write(quotes[whichquote])
</script>
<script language="JavaScript">
var quotes=new Array()
quotes[0]=''<a href="http://seusite.com/search/label/firefox" class="level3">firefox</a>'
quotes[1]='<a href="http://seusite.com/search/label/tutorial" class="level2">tutorial</a>'
var whichquote=Math.floor(Math.random()*(quotes.length))
document.write(quotes[whichquote])
</script>
<script language="JavaScript">
var quotes=new Array()
quotes[0]='<a href="http://seusite.com/search/label/manga" class="level2">manga</a>'
quotes[1]='<a href="http://seusite.com/search/label/windows" class="level4">windows</a>'
var whichquote=Math.floor(Math.random()*(quotes.length))
document.write(quotes[whichquote])
</script>
<script language="JavaScript">
var quotes=new Array
()quotes[0]='<a href="http://seusite.com/search/label/codigo" class="level5">codigo</a>'
quotes[1]='<a href="http://seusite.com/search/label/blogspot" class="level1">blogspot</a>'
var whichquote=Math.floor(Math.random()*(quotes.length))
document.write(quotes[whichquote])
</script>
<script language="JavaScript">
var quotes=new Array()
quotes[0]='<a href="http://seusite.com/search/label/tag" class="level4">tag</a>'
quotes[1]='<a href="http://seusite.com/search/label/nuvem" class="level2">nuvem</a>'
var whichquote=Math.floor(Math.random()*(quotes.length))
document.write(quotes[whichquote])
</script>
</div><script language="JavaScript">
var quotes=new Array()
quotes[0]='<a href="http://seusite.com/search/label/video" class="level1">video</a>'
quotes[1]='<a href="http://seusite.com/search/label/favicon" class="level5">favicon</a>'
var whichquote=Math.floor(Math.random()*(quotes.length))
document.write(quotes[whichquote])
</script>
<script language="JavaScript">
var quotes=new Array()
quotes[0]='<a href="http://seusite.com/search/label/death%20note" class="level2">death note</a>'
quotes[1]='<a href="http://seusite.com/search/label/celular" class="level4">celular</a>'
var whichquote=Math.floor(Math.random()*(quotes.length))
document.write(quotes[whichquote])
</script>
<script language="JavaScript">
var quotes=new Array()
quotes[0]='<a href="http://seusite.com/search/label/blogosfera" class="level5">blogosfera</a>'
quotes[1]='<a href="http://seusite.com/search/label/fansub" class="level3">fansub</a>'
var whichquote=Math.floor(Math.random()*(quotes.length))
document.write(quotes[whichquote])
</script>
</div>
Para deixar o estilo de sua nuvem de tags igual a deste blog
Para isso, vá até a Guia "Layout" e "Editar HTML". Faça uma cópia de seu template, clicando em "Baixar Modelo Completo".
E insira o código CSS, ACIMA da tag ]]></b:skin> . Fica a a sugestão abaixo com estilo para até cinco niveis.
/* estilos para a nuvem de tags manual aleatoria */
#tagcloud_aleat {
padding-top: 15px;
min-height: 75px;
text-align: center;
}
/* estilos para os links */
#tagcloud_aleat a { text-decoration: none;padding:5px; font-weight:700; }
#tagcloud_aleat a:hover { text-decoration: underline; }
/* estilos para cada nível de link */
#tagcloud_aleat a.level1 { font-size: 36px; color: #7666C6; }
#tagcloud_aleat a.level2 { font-size: 27px; color: #FF6FFF; }
#tagcloud_aleat a.level3 { font-size: 21px; color: #EB9373; }
#tagcloud_aleat a.level4 { font-size: 16px; color: #007FFF; }
#tagcloud_aleat a.level5 { font-size: 12px; color: #E52B50; }
Modifique as cores e tamanho de fontes conforme sua preferência.
Leia tambem os artigos deste blog que tratam sobre nuvem de tags:
Nuvem de Tags para o blogger
O primeiro artigo a tratar do assunto, a nuvem explicada neste artigo pode ser vista na sidebar deste blog. Eu a considero a melhor widget nuvem de tag dentre todas, por ser automatica e possuir um visual elegante.
Widget Nuvem de tags
Cito e explico como fazer uma nuvem de tags atraves de alguns serviços web, com poucos cliques e sem precisar mexer numa linha de código do Blogger.
Nuvem de Tag para o Blogger em flash
Um nuvem bonita, cheia de movimentos e tambem é alimentada automaticamente pela inclusão de novos marcadores. Recomendadissima.
0 Comentários