Dominio: codigosblog.com.br
Chave: af255c39c6cbf2ba03ac5b531649215539d8d61a
Hora do cache: 1500545940
Vida do cache: 1500589140
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Blogs,
SEO e Monetização.

Hospedagem - 728 x 90

Postagens

Nuvem de Tags usando os Marcadores

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:

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.

Vamos ao trabalho… (recomendo que faça backup sempre antes de começar qualquer modificação)

– 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!

– Entre em “Layout” -> “Editar HTML”, procure (Ctrl + f) por:

]]></b:skin>

- 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}

- 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

- Deixe a caixa de: “Expandir modelos de widgetsDESMARCADA! E procure:

<b:widget id='Label1' locked='false' title='Nuvem de Tags' type='Label'/>

- 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>

- 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.



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

47 Comentários

  1. janine ribeiro disse:

    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.

  2. Rascunho Geo © disse:

    Olá,

    Quando você diz:

    4º – Procure: e cole o seguinte código ANTES:

    Procurar o que? Esbarrei nesta etapa.

    Obrigado.

  3. toxicsquall disse:

    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

  4. duduzinho disse:

    Gostei deste tutorial.
    Mas acho que tem um jeito bem mais fácil de colocar nuvem de tags..

    Valeu Paulo 😀

  5. Paulo Estevão disse:

    Pessoal arrumei o post!!!!! Desculpe! Agora está tudo ok!

  6. janine ribeiro disse:

    MUITO OBRIGADA!!! DEU SUPER CERTO VLW;)

  7. brasilcritical disse:

    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!

  8. Gastar pra Que disse:

    Opa! Valeu , já estou usando, fica leve o gadget, já tinha tentado de outras formas mas demorava muito pra carregar… agora sim !
    Obrigado!

  9. Robinho-xbass disse:

    é 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.

  10. Games Para Celular disse:

    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.

  11. Danitza disse:

    O processo é muito simples… Mas minhas tags não aparecem.

  12. Eset Nod Master disse:

    beleza pura, funcionando!

  13. Paulo Estevão disse:

    Pessoal, não tem erro, é só seguir direitinho o tuto.
    ;))

  14. Thaís A. disse:

    DEU CERTO 😀
    Só queria saber como faz pra mudar as cores, se é que dá..

  15. Elisa disse:

    Obrigada!
    Já estou utilizando e ficou bem legal.
    Como faço para mudar a fonte e as cores?
    Abraços.

  16. → Viиìciuh'S Ŧ ҉ disse:

    Muito Obrigado!
    Meu blog ficou incrível!!

    http://www.salamandrasnoparaiso.blogspot.com

  17. Blog do Tavares disse:

    Bem fácil com esse tutorial.

    Muito obrigado.

    Abraços

  18. Blog do Tavares disse:

    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

  19. Paulo Estevão disse:

    #Elisa…
    Tem que saber de Js para trocar as cores.
    abraços

  20. Joaquimtiago Bill disse:

    Não encontrei o último código do 5º passo, o que eu faço?
    Valeu!

  21. didicarmo disse:

    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

  22. Paulo Estevão disse:

    @Joaquimtiago,

    Não encontrou porque você não seguiu o tutorial direito ou seu template não é do novo blogger.

  23. Wilamis R. disse:

    Fiz tudo certinho, apareceram todos os códigos, mais não apareceu a nuvem de tag =/ o que será que aconteceu?

    Vlw. (y)

  24. casadospassaros disse:

    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

  25. Lu Valdivia disse:

    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. 🙂

  26. Débora Lauton disse:

    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é…

  27. Paulo Estevão disse:

    @Débora,
    provavelmente você colocou o script no lugar errado.
    =[

  28. PDV Ativo disse:

    Paulo mais uma vez parabens por mais um post de sucesso!!! é só seguir direitinho que dá certo…abraços

  29. franquiaempresa.com disse:

    Ficou ótimo no meu blog, quem quiser conferir fique a vontade.

  30. bllogados disse:

    Otimo Post. Ja coloquei em meu blog!!!

  31. Lucas disse:

    Gostaria de agradecer,pois fiz do jeito indicado e deu tudo certo,adeus marcadores comuns =D
    ótimo post!

  32. Luciano Cunha disse:

    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.

  33. Paulo Estevão disse:

    @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.

  34. Bárbara Fernanda disse:

    eu não consigo encontrar no HTML isso aqui:

    do item 5º pleeese, ajuda *–*

  35. Paulo Estevão disse:

    @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

  36. PCD e cia disse:

    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

  37. tallesazigon disse:

    muito obrigado, esse blog ajuda-me muito, é um serviço de utilidade pública

  38. F. Porcelli disse:

    Obrigado.
    Único guia bem detalhado que encontrei e que funcionou!!

  39. JPR disse:

    Muito obrigado! At[e q enfim achei um lugar q explique bem!

  40. Leandro Martins disse:

    Cara…. testado e aprovado! Valeu pela validosa dica. Abraço!

  41. Bons Filmes Grátis disse:

    ótima dica, gostei!!!
    Vejam no meu blog como ficou: http://www.bonsfilmesgratis.blogspot.com

  42. Paulo Mathias disse:

    Muito bom coloquei no meu blog funcionou certinho

    http://www.blogbbb11.com

  43. O Ingênuo delirante disse:

    Excelente cara!!!! Funcionou perfeitamente!!

  44. Administrador disse:

    HEhE. VLW, cara deu certo aki. t+

  45. Laion Souza disse:

    Olá, fiz tudo conforme você disse.
    Porém a nuvem dede marcadores não ,
    apareceu no meu blog.
    poderia me ajudar aguardo respostas.

  46. Paulo Estevão disse:

    Você usa marcadores em suas postagens? ^^

Para enviar seu comentário, preencha os campos abaixo:

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.