O Blogger tem um novo recurso para utilização do Widget de Marcadores - veja em Novo Recuro - Nuvem de Tags.
Para colocar estilos veja: Estilos para Marcadores - Label Cloud.
Existem vários tutoriais com nuvens de tags utilizando os marcadores do Blog. No entanto, segundo os especialistas, para que uma tag-cloud atinja seus objetivos, ela não pode conter palavras demais. Para quem possui muitos marcadores no Blog, uma nuvem de tags com os scripts conhecidos acaba se tornando inviável.
O Site Tag Cloud Generator oferece a possibilidade de você criar sua própria nuvem de tags utilizando os links e palavras que desejar.
Eu achei, porém, meio trabalhoso de ser utilizado, então, usando uma idéia semelhante, criei esta maneira de obter o mesmo resultado.
Vamos ao tutorial:
Organização
Primeiro você deve escolher quais os links (seja de posts que deseja destacar, categorias/marcadores, etc).
Anote o endereço de cada link em um bloco de notas e ordene alfabéticamente pelo título que irá colocar (essa é uma sugestão, por ser a mais utilizada - você pode ordenar de outra forma). Exemplo:
Cotidiano :http://nome-do-blog.blogspot.com/search/label/Cotidiano
Fotos :http://nome-do-blog.blogspot.com/search/label/Fotos
Humor :http://nome-do-blog.blogspot.com/search/label/Humor
Viagens :http://nome-do-blog.blogspot.com/search/label/Viagens
Vídeos :http://nome-do-blog.blogspot.com/search/label/Videos
Estabeleça um nível para cada link, dependendo da importância que você queira dar a ele, em ordem decrescente, por exemplo: você quer que a categoria/marcador "Viagens" se destaque menos do que as outras e a categoria/marcador "Vídeos" se destaque mais:
level3 - Cotidiano :http://nome-do-blog.blogspot.com/search/label/Cotidiano
level4 - Fotos :http://nome-do-blog.blogspot.com/search/label/Fotos
level2 - Humor :http://nome-do-blog.blogspot.com/search/label/Humor
level1 - Viagens :http://nome-do-blog.blogspot.com/search/label/Viagens
level5 - Vídeos :http://nome-do-blog.blogspot.com/search/label/Videos
Montando o código para os links
Iremos montar agora o código HTML. Ainda o bloco de notas, vamos identificar nossa nuvem e os links, com uma div id e com span class:
<div id="tagcloud"> <span class="level3"><a href="http://nome-do-blog.blogspot.com/search/label/Cotidiano">Cotidiano</a></span> <span class="level4"><a href="http://nome-do-blog.blogspot.com/search/label/Fotos">Fotos</a></span> <span class="level2"><a href="http://nome-do-blog.blogspot.com/search/label/Humor">Humor</a></span> <span class="level1"><a href="http://nome-do-blog.blogspot.com/search/label/Viagens">Viagens</a></span> <span class="level5"><a href="http://nome-do-blog.blogspot.com/search/label/Videos">Vídeos</a></span> </div>
Na Guia "Layout", em "Elementos de Página", adicione um gadget HTML/JavaScript no local onde você quer colocar sua nuvem de tags (Footer, Sidebar, Main-Wrapper, etc).
Copie o código da nuvem que você montou no bloco de notas e cole no box do Gadget.
Aplicando estilos à nuvem
Você deve decidir agora o tamanho de fonte e as cores que deseja para cada nível, sendo que o nível mais baixo (level1) é a tag que você deseja dar menos destaque e portanto deve ter um tamanho de fonte menor.
Na Guia "Layout" em "Editar HTML", faça uma cópia de seu template, clicando em "Baixar Modelo Completo".
ACIMA da tag
]]></b:skin>, coloque o código para os estilos, seguindo a sugestão abaixo.Sugestão de estilos até 11 níveis :
#tagcloud { /* estilos para o container da tag cloud */
margin: 10px 0 10px 0;
border: 1px solid #808080;
line-height: 30px;
text-align: center;
padding: 4px;
padding-top: 2px;
}
/* estilos para os links */
#tagcloud a { text-decoration: none; }
#tagcloud a:hover { text-decoration: underline; }
/* estilos para cada nível de link */
#tagcloud span.level1 a { font-size: 13px; color: Red; }
#tagcloud span.level2 a { font-size: 15px; color: Light Blue; }
#tagcloud span.level3 a { font-size: 16px; color: Magenta; }
#tagcloud span.level4 a { font-size: 17px; color: Dark Orange; }
#tagcloud span.level5 a { font-size: 18px; color: Royal Blue; }
#tagcloud span.level6 a { font-size: 19px; color: Firebrick; }
#tagcloud span.level7 a { font-size: 20px; color: Forest Green; }
#tagcloud span.level8 a { font-size: 21px; color: Dark Orange; }
#tagcloud span.level9 a { font-size: 22px; color: Royal Blue; }
#tagcloud span.level10 a { font-size: 23px; font-weight: bold; color: Forest Green; }
#tagcloud span.level11 a { font-size: 25px; font-weight: bold; color: Red; }
Modifique as cores e tamanho de fontes conforme sua preferência.
Nuvem de Tags colorida:
Nuvem de Tags Monocromática:
Imagem principal cortesia:
Clip art copyrighted de Bobbie Peachey,
Webclipart.about.com.
Comentários: 21
Bem prático o Tuto heimmmmm!!! Gostei mesmo! e código do site indicado tb achei estranho, pelo menos não usa o Pipes Yahoo...
Fabio: E eu já fiquei cheia de idéias... hehe
Posso colocar uma nuvem com as categorias principais na maioria das páginas e nas páginas de uma determinada categoria principal coloco uma nuvem com as sub-categorias, por exemplo:
Na página da categoria "Tutoriais" faço uma nuvem com as categorias "Hacks", "Menus", "Widgets", etc..
Na página da categoria "Hacks" faço uma nuvem com "Header", "Footer", "Posts", etc..
Vou testar no BloggerSPhera.. ;)
Bjs
Muito bom Rô!
Ótimo recurso para personalização das categorias, e melhor ainda suas idéias criativas. Vai funcionar com certeza!
Rô, consegui fazer esse também!
Obrigada
Bjoooos
Muito bacana isso, depois vou colocar no meu blog.
abraços
Gostei do seu tuto, irei tentar fazer um para colocar no meu futuro blog. Abraço!
Gantes: Estou estudando também uma forma de fazer a nuvem mais automática, porém selecionando as categorias. Se der certo, compartilho com vocês.
Claudinha: De nada! :)
Canal Photoshop e Kaminhodobem: A primeira edição da nuvem dá um pouco de trabalho. Mas depois, a manutenção é tranquila. :)
Abraços!
Obrigado
estou fazendo ajeitando um novo layout!!
agora é so decidir onde elas irão ficar
Me ajuda? como diciono mais de uma TAG olha como fica uma URL quando tento adicionar mais de um Label em um mesmo link
( http://centralfitness.blogspot.com/search/label/Dieta%20Nutrição%20Suplementos )
tem sugestão?
centralfitness: Cada categoria/marcador/label do Blogger abre em uma página própria. Não há possibilidade de fazer um único link para abrir duas páginas diferentes simultaneamente.
Minha sugestão nesse caso é que você crie uma terceira categoria/marcador com os posts que deseja para esse link.
Abração!
Rô, não dá pra fazer com que o tamanho do marcador seja maior ou menor dependendo de sua freqüência no blog? Tipo: a palavra "x" é maior, porque é o assunto mais tratado no blog em relação à palavra "y", etc. (Desculpe! Olha eu complicando ainda mais, né?!)
Oi, Rô... Eu de novo.
Para o meu blog, acho que a nuvem monocromática vai ficar mais legal! (vide http://ecosdoverbo.blogspot.com)
Mas, se eu entendi bem, você não disse como faz.
Ou disse?
Carlinhos, como esse nuvem é manual, é possível fazer isso se você alterar manualmente o tamanho das fontes. Ou seja, essa nuvem não usa nenhum script que faça contagens. É você quem determina tudo, tamanho de fontes, cores, localização das palavras, etc.
Da mesma forma, para uma nuvem monocromática, é só mudar no código as cores para tons de preto, grafite, cinza, etc.
Abração!
Boa dica! Mas eu gostaria de saber como colocar uma nuvem de tags animada, do tipo que as palavras se movimentam quando vc passa o mouse...
Olá L.Henrique! Você pode encontrar um tutorial em português a respeito da nuvem animada no blog Web Dois Ponto Zero.
Um abraço!
A nuvem de tags manual vai de contra no que se diz ser uma nuvem de tags ... mas para quem quiser apenas deixar os links do site de uma forma mais bonita , ou apenas para enfeitar é uma pedida =D
bom... ve se volta logo.. n aguento mais procuirar coisas novas em um site que ja vi tudo XD
!
Back !!!!
Ricardo Luiz publicou um post sobre.. O sonho dessa noite...
Vlw pela dica... já incluí no "recordamentos"!
Oi Ro, este artigo foi muito util para mim, eu o adaptei e fiz umas firulas interessantes.
veja o artigo Nuvem de tags aleatoria para Blogger
Artigo ótimo, blog ótimo. as mulheres blogueiras do Brasil estão se superando.
Vlw
Excelente indicação companheira! Foi direto ao assunto. Muito agradecido. Em especial pela indicação do site gerador de nuvem de tags.
Ricardo, tielsam e Alexandre: Obrigada! :)
Um abraço, pessoal!
É possível fazer esta nuvem de tags colorida no formato daquelas nuvens de tags que se movem feito uma bola quando se move o mouse??
Ola caro wilson, existe uma nuvem de tags em flash animada como você descreveu acima para o blogger, veja o artigo Nuvem de tag para o blogger em flash. Acho q você ira gostar.
Alias, Rô seu blog melhorou e muito com o novo visual, deve ter tido um trabalhão. Seu blog é 10
Postar um comentário
Para deixar o link da sua última postagem coloque este código:
Feed dos Comentários<em><strong>Seu nome</strong> publicou um post sobre.. <a href="seu-link-do-último-post">Título do Post</a></em>
Quando você estiver testando algum hack e tiver dúvidas sobre ele, informe:
1 - O endereço do blog onde você está testando (ou instalando o hack);
2 - O navegador que você está usando (Firefox, Opera, IExplorer, etc).
Leia sobre a política de Comentários!
Eu gosto de conhecer meus leitores! Se você usar OpenId ou perfil fechado, assine o comentário com seu nome e me deixará muito contente!
Bem-vindos e obrigada pela visita!
Blog This!