Nuvem de Tags usando os Marcadores
![](\"http://3.bp.blogspot.com/_N-JWeGTzR30/Shct5NdlJHI/AAAAAAAACB0/60QAol_aSA0/s1600-h/tags.jpg\")
Um recurso interessante para destacar os assuntos mais vistos no seu blog é colocar os marcadores do blog em forma de nuvens de tags. Assim os assuntos mais vistos no seu blog vão ficar em destaque. Veja a imagem abaixo:
![](\"http://1.bp.blogspot.com/_N-JWeGTzR30/Shcod-_od-I/AAAAAAAACBk/EprIqCzfd1I/s1600-h/labelcloud.png\")
Antes de tudo, para esse widget funcionar é necessário que você coloque marcadores nas postagens do seu blog, dessa forma o Blogger vai organizar em categorias todos os posts.
![](\"http://3.bp.blogspot.com/_N-JWeGTzR30/Shcopa8UtaI/AAAAAAAACBs/3lhA1Oo6mrk/s1600-h/adicionar+marcador+blogger.JPG\")
Vamos ao trabalho… (recomendo que faça backup sempre antes de começar qualquer modificação)
1º – Entre em “Layout” -> “Elementos da Página”. Clique em “Adicionar um Gadget”, escolha adicionar “Marcadores”.
No título coloque: “Nuvem de Tags”.
Obs.: Deixe apenas um widget de marcadores!
2º – Entre em “Layout” -> “Editar HTML”, procure (Ctrl + f) por:
]]></b:skin>3º - Cole o seguinte código ANTES:
#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:hover{text-decoration:underline;}
#labelCloud a, #labelCloud li a{text-decoration:none;}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color: #000;} /*para mudar a cor da letra de preto para branco substitua #000 por #FFF*/
#labelCloud .label-cloud li:before{content:\"\" !important}4º - Procure: </head> e cole o seguinte código ANTES:
<script type=\'text/javascript\'>
// Label Cloud User Variables
var lcBlogURL = \'http://LINK DO SEU BLOG.blogspot.com\';
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>
Encontre: http://LINK DO SEU BLOG.blogspot.com, e substitua pelo link do seu blog.
Exemplo: http://meublog.blogspot.com
5º - Deixe a caixa de: “Expandir modelos de widgets” DESMARCADA! E procure:
<b:widget id=\'Label1\' locked=\'false\' title=\'Nuvem de Tags\' type=\'Label\'/>6º - Substitua todo o código por:
<b:widget id=\'Label1\' locked=\'false\' title=\'Nuvem de Tags\' 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\'>
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>
7º - Teste e veja se está tudo certo! Salve.
Essa tutorial é de autoria do Templates Para Você, com pequenas alterações por Códigos Blog.
Um abraço a todos.
só tenho duas coisas a dizer:
primeira: no quarto vc diz PROCURE, mas procurar o que, qual? não entendi.
segundo: não encontro o link do meu blog na caixinha de editar html.
obrigada.
Olá,
Quando você diz:
4º – Procure: e cole o seguinte código ANTES:
Procurar o que? Esbarrei nesta etapa.
Obrigado.
nao deu certo por tem “Procure: e cole o seguinte código ANTES:”
mas nao especifica o q é pra procurar!!http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif
Gostei deste tutorial.
Mas acho que tem um jeito bem mais fácil de colocar nuvem de tags..
Valeu Paulo 😀
Pessoal arrumei o post!!!!! Desculpe! Agora está tudo ok!
MUITO OBRIGADA!!! DEU SUPER CERTO VLW;)
Obrigado pela Luz!
Pra completar:
Os valores “var maxColor = [0,0,255];” e “var minColor = [0,0,0];” podem ser alterados. Ex:
Em “minColor” é a cor minima da contagem da tag, ou seja, se a tag é pouco popular ela vai ficar da cor preta. Você pode alterar o numero “0,0,0” por “255,255,255” que significa a cor branca.
Já em “maxColor” será a cor das tags mais populares, no caso será azul (0,0,255).
As cores estão renderizadas em RBG (Red,Green,Blue), varia de 0,0,0 (preto) a 255,255,255 (branco), ou seja, você pode usar um numero entre 0 e 255.
Flw!
Opa! Valeu , já estou usando, fica leve o gadget, já tinha tentado de outras formas mas demorava muito pra carregar… agora sim !
Obrigado!
é adorei,aê galera o seu pemplate for um template pesado usando, esse nossa quanta direfença,valeu super leve parabens pra quen -u fez os code.
Não funcionou, ele indexa os marcadores, mas, um por linha um sobre o outro centralizados. Estou usando um template seu “Codigos Blog 3.0”
Uma Pena.
O processo é muito simples… Mas minhas tags não aparecem.
beleza pura, funcionando!
Pessoal, não tem erro, é só seguir direitinho o tuto.
;))
DEU CERTO 😀
Só queria saber como faz pra mudar as cores, se é que dá..
Obrigada!
Já estou utilizando e ficou bem legal.
Como faço para mudar a fonte e as cores?
Abraços.
Muito Obrigado!
Meu blog ficou incrível!!
http://www.salamandrasnoparaiso.blogspot.com
Bem fácil com esse tutorial.
Muito obrigado.
Abraços
Eu consegui na primeira vez, mas depois as tags sumiram e agora faço tudo de novo várias vezes e não dá certo.
Abraços
#Elisa…
Tem que saber de Js para trocar as cores.
abraços
Não encontrei o último código do 5º passo, o que eu faço?
Valeu!
não sei porque, mas de primeira a gente não dá muita atenção e erra várias vezes… Mas depois, basta prestar atenção a essas dicas que fica perfeito!!! estou feliz! Obrigado http://www.didicarmo.blospot.com
@Joaquimtiago,
Não encontrou porque você não seguiu o tutorial direito ou seu template não é do novo blogger.
Fiz tudo certinho, apareceram todos os códigos, mais não apareceu a nuvem de tag =/ o que será que aconteceu?
Vlw. (y)
Paulo,
Parabéns pelo Post, pesquisei em vários sites e este codigo seu foi o que achei melhor, por isso estou usando ele.
Abraços
Vinicius Manhanini
Olá, nossa tentei vários métodos para colocar a nuvem de tags no meu blog e finalmente consegui através desse passo-a-passo.
obrigada e parabéns. 🙂
Oi Paulo…
Obrigada pela dica, realmente fica ótimo…
Mas estou com um problema e não consigo resolver… a nuvem aparecer, mas quando clico em um dos marcadores aparece o erro "Bad Request
Error 400", você tem idéia de como posso resolver isso??
Grata,
Dé…
@Débora,
provavelmente você colocou o script no lugar errado.
=[
Paulo mais uma vez parabens por mais um post de sucesso!!! é só seguir direitinho que dá certo…abraços
Ficou ótimo no meu blog, quem quiser conferir fique a vontade.
Otimo Post. Ja coloquei em meu blog!!!
Gostaria de agradecer,pois fiz do jeito indicado e deu tudo certo,adeus marcadores comuns =D
ótimo post!
muito legal o post!!!
só um detalhe: No item 5:
5º – Deixe a caixa de: “Expandir modelos de widgets” DESMARCADA! E procure:
onde vc falar para substituir o widget com title Nuvem de Tags, na verdade o title dele inicial era 'Labels'.
Quem procura no fonte por Nuvens não irá encontrar porque o padrão do Blogger é Labels. É isso, um abraço.
@Luciano,
Está tudo certo sim! Você que não leu o post direito.
Antes do item 5 eu ensinei a modificar o nome, então não tem essa de title inicial.
O padrão do Blogger é Labels sim, porém eu ensinei antes a modificar o nome.
Leia antes.
eu não consigo encontrar no HTML isso aqui:
do item 5º pleeese, ajuda *–*
@Bárbara,
Procure fazer isso direto, entre em Elementos da Página e clique em editar o widget dos marcadores.
Lá tem essa opção agora.
abraços
ola, coloquei no meu blogger e deu tudo certo, so queria saber como faco para trocar as cores, entende, no meu blog esta preto com azul, qro troca, espero respostas…
webmaster: http://www.pcdecia.blogspot.com
muito obrigado, esse blog ajuda-me muito, é um serviço de utilidade pública
Obrigado.
Único guia bem detalhado que encontrei e que funcionou!!
Muito obrigado! At[e q enfim achei um lugar q explique bem!
Cara…. testado e aprovado! Valeu pela validosa dica. Abraço!
ótima dica, gostei!!!
Vejam no meu blog como ficou: http://www.bonsfilmesgratis.blogspot.com
Muito bom coloquei no meu blog funcionou certinho
http://www.blogbbb11.com
Excelente cara!!!! Funcionou perfeitamente!!
HEhE. VLW, cara deu certo aki. t+
Olá, fiz tudo conforme você disse.
Porém a nuvem dede marcadores não ,
apareceu no meu blog.
poderia me ajudar aguardo respostas.
Você usa marcadores em suas postagens? ^^