» Códigos, Dicas, Templates, Tutoriais para deixar o seu blog do seu jeito!

Marcadores na forma de Nuvem de Tags - Label Clouds


Este é um recurso interessante que você pode colocar na sidebar do seu blog.

Não se esqueça que seus posts precisam ter marcadores que os classificam, aí de acordo com a freqüência de postagens de um mesmo marcador no seu blog, este marcador aparecerá maior ou menor na nuvem de tags.
Clique em continue lendo para aprender a colocar a Nuvem de Tags no seu blog:

» Essas configurações demandam algum conhecimento em códigos HTML e CSS. Portanto:
♥ Sempre tente antes num blogue de testes.
♥ Salve o seu template antes de começar, clicando em Baixar modelo completo.
♥ Leia o tutorial até o fim e tenha certeza de ter entendido.
1º Encontre a linha:
]]></b:skin>
2º Adicione ACIMA dela a seguinte configuração do CSS:
/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:$textcolor;}
/*se seu blog não tiver a variável textcolor→substitua por um código de cor. Ex:#000000(preto)*/
#labelCloud .label-cloud li:before{content:"" !important}
Este código vai definir a aparência da sua nuvem de tags. Por exemplo se você quer mudar a cor dos links, alinhamento, etc.
3º Copie e cole o código Javascript entre as tags: ]]></b:skin> e </head>
Ficando assim:
]]></b:skin>
<script type='text/javascript'>
// Label Cloud User Variables
var lcBlogURL = 'http://YOURBLOG.blogspot.com';
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>


</head>

Não se esqueça:

►Substitua YOURBLOG em 'http://YOURBLOG.blogspot.com' pelo nome do endereço do seu blog.

4º Certifique-se que o comando Expand Widget Templates, na tela de edição do template, canto superior direito, esteja DESMARCADA.
Pois se ela estiver marcada o código
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

vai se expandir, então você vai ter que adicionar o próximo código do ínicio ao fim, ou seja, até a tag

</b:widget>
estar finalizada.

Portanto é mais fácil deixar a Expand Widget Templates desmarcada e procurar pelo comando:

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

e substituí-lo completamente por:

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Não mude nada a partir desse ponto -----------------
function s(a,b,i,x){
if(a>b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}

var ta=0
var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = "<data:label.name/>";
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
tz = labelCount.length-1;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
for (var i=0;3 > i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = lcBlogURL+'/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>

<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>

5º Clique em preview para ver o resultado.
Se der algum problema clique em desfazer as alterações (LIMPAR EDIÇÕES) e refaça os passos.

Assim a widget marcadores será na forma de Nuvem de Tags o que é: Muito bonito e útil pois sinaliza aos mecanismos de busca a suas palavras chaves mais importantes.

Atualização:17/06/09-17:14h

Fonte:Phydeaux3 com auxílio da tradução Verdinhas
Marcadores na forma de Nuvem de Tags - Label Clouds Marcadores na forma de Nuvem de Tags - Label Clouds Reviewed by Áurea on 4/27/2008 Rating: 5

24 comentários:

  1. não consegui usar. Deu o seguinte problema:

    Não foi possível salvar o modelo. Corrija o erro abaixo e envie o seu modelo novamente.
    Declaração de variável inválida na skin da página: A variável está sendo utilizada, mas não foi definida. Entrada: sidebartextcolor

    pode me ajudar?
    obrigado

    ResponderExcluir
  2. Diogo,

    Substitua sidebartextcolor por um código de cor, por exemplo o preto:#000000.
    Aí dará certo. Isto aconteceu porque seu blog não tem a variável sidebartextcolor pré-definida.
    Áurea

    ResponderExcluir
  3. mto bom!!!
    procurava isso ha mto tempo.
    valeu mesmo!

    ResponderExcluir
  4. parabéns, pela dica mt boa!
    eu testei e funcionou +/-, no firefox aparece numa boa mas no ie nem a pau.

    aconteceu com vcs?! qm algum hacker pra corrigir?!

    ResponderExcluir
  5. Finalmente consegui. Depois de passar por vários blogs, este deu certo. E graças a dica de colocar a cor do texto.

    Obrigado

    Abraços

    ResponderExcluir
  6. É a quinta vez que eu tento
    aparece esse mesmo erro ai de cima: " Declaração de variável inválida na skin da página: A variável está sendo utilizada, mas não foi definida. Entrada: textcolor"

    onde exatamente no codigo eu tenho que mudar a cor??

    ResponderExcluir
  7. aaaaaaaaaaaaaaaaah!! consegui!!!
    \o/ ..dançinha da vitória*

    ;)

    Para quem está empacado como eu substitua na segunda parte do código: [($)textcolor ] por um codigo de cor. * na segunda linha de baixo para cima .

    ResponderExcluir
  8. É isso aí Ya,
    Obrigada pela ajuda!

    ResponderExcluir
  9. ei pessoal..eu consegui..mas ta azul e preto...onde muda as cores? queria colocar rosa

    beijos e agradesço a ajuda

    ResponderExcluir
  10. Olá Lyssa,
    Veja o código CSS:
    /* Label Cloud Styles----------------*/
    Na linha:
    #labelCloud a{text-decoration:none;}
    Esta linha indica os links da labelcloud.

    Coloque o código: color:#FF6FCF;

    Ficando assim: #labelCloud a{text-decoration:none;color:#FF6FCF;}

    color:#FF6FCF; → Este é um tom de rosa, mas você pode alterar por sites com códigos de cores ou programas.

    Se não der certo vá testando e veja em qual linha vai dar colocando o código color.

    Fuce no seu CSS.

    Até mais,

    Áurea

    ResponderExcluir
  11. Áurea,

    Tenho um nuvem de tags no blog Passageiro do Mundo, tentei colocar no blog Passagem Cultural e não consegue, dá o erro da TEXTColor que foi citado acima, mas, não entendi o que devo e onde devo substituir para dar certo.

    Tem como você me ajudar?

    ResponderExcluir
  12. Marcos Freitas,
    Substitua o $textcolor por um código de cor.
    Simples assim.

    ResponderExcluir
  13. Infelizmente não deu certo, o código foi aceito, mas as tags não aparecem e o explorer marca que a página tem erros.

    ResponderExcluir
  14. Prezados,
    A Nuvem de Tag aparece, mas, como disse a Lyssa, em Azul sobre Preto.
    Gostaria de trocar para Amarelo sobre Preto.
    Fiz as alterações sugeridas pela Áurea(que desde já agradeço), mas não deu certo.
    Coloquei o código "color:#ffff66;" em todas as linhas, e a Nuvem não mudou de cor.
    Alguém pode me dar uma dica de onde estou errando???
    Abraços e Obrigado.

    ResponderExcluir
  15. Oi Aurea, eu coloquei o código e não deu erro nenhum, mas qdo visualizo o blog, não aparece a nuvem de tags, aparece os marcadores normais, o que será que está acontecendo, pode me ajudar? Bjinhos.

    ResponderExcluir
  16. Amigos,
    Alterem as cores do arquivo java nestas linhas em negrito:
    var maxFontSize = 20;
    var maxColor = [0,0,255];
    var minFontSize = 10;
    var minColor = [0,0,0];

    Para isso vocês podem usar o Tray Color. Selecione a cor e copie os códigos R, G, B da cor que deseja usar.

    Use tembám o Tray Color neste Site com várias opções de cores.

    ResponderExcluir
  17. perfeito!
    demorei pra encontrar um tuto que explicasse direitinho os possíveis bugs pra leigos como eu e deu certo!
    valeu!!!
    abs
    cláudia

    ResponderExcluir
  18. Que bom que gostou Cau!
    Ainda bem que deu tudo certo! Fico feliz por isso!

    ResponderExcluir
  19. Rostev Para que você ache o label1 precisa inserir uma gadget de marcadore no seu blog. Só assim achará a linha que procura!

    ResponderExcluir
  20. Paula Vou procurar e logo coloco aqui a dica!

    ResponderExcluir
  21. Olá, querida! Instalei essa nuvem de tags em um blog de testes para usar posteriormente. Deu tudo certinho, só os links q ficavam em preto e azul. Costumo ler sempre TODOS os comentários e descobri o tray color, resolvendo o problema. Obrigado por mais essa dica! Bjs

    ResponderExcluir
  22. VOCÊ É O MELHOR MANO , RSRS VLW MESMO

    ResponderExcluir
  23. Acho que desse jeito fica muito desorganizado, passa uma impressão ruim. Mas é um bom tutorial

    ResponderExcluir

Todos os comentários são lidos e moderados antes da publicação.
Para que seu comentário seja publicado leia a Política de Comentários do Blog no post Regras do Blog

Tecnologia do Blogger.