Rede Social

Navegação


Links Patrocinados


Links Recomendados


Outros Links


Visitantes

Bem-vindo, visitante ( Entrar | Registrar )


Seja bem vindo visitante!

Olá seja bem vindo ao Verdinhas. Somos uma comunidade jovem e vibrante. Rapidamente estamos nos tornando referência nacional e internacional para webmasters, investidores e empreendedores online - algo singular para língua portuguesa.

Em pouco tempo atingimos a marca de mais de 7.000 usuários registrados e acima de 1.500 visitas únicas diárias. Temos PageRank 3 e estamos entre os 6.000 sites mais visitados e ativos do Brasil e entre os 4.000 em Portugal.

Junte-se a nossa comunidade! NÓS QUEREMOS VOCÊ!


 
Reply to this topicNew Topic
Blogger Beta - Tag Cloud - Label Cloud - Núvem De Tags, Aprenda a fazer uma Núvem de Tags no Blogger Beta
S.Phoenix
post Oct 13 2006, 11:12 AM
Post #1


ex-admin
Ícone do grupo

Grupo: Membro
Posts: 181
Registrado: 16-April 06
Membro N°: 3
País: Outros
Interesse: Dinheiro online
Investidor: Defensivo
iTrader: 0 (0%)
Pontos: $0 Verdinhas
Exibir inventário


Olá Galera,

Vou ensinar vocês a fazer uma núvem de labels.


Primeiro Passo:

Adicione as tags aos seus posts. Se você tiver um blog muito grande isso pode levar tempo.

Labels/Tags, são categorias dos seus posts. Então acredito que você deva ter uma margem de no máximo 14 categorias ou a núvem ficará muito grande.

Certifique-se de já ter convertido do Blogger para o Blogger Beta, onde basta você ir em Templates e fazer o upgrade. Não se preocupe, a outra versão ficará salva no próprio Blogger.

Segundo Passo:

Uma vez, adicionado aos posts, vá ao edit Html do blogger beta e ache o final da folha de estilos. O finalzinho do CSS.

Você deve achar um comando assim:

]]></b:skin>


Adicione ACIMA dele 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:#000}
#labelCloud .label-cloud li:before{content:"" !important}


Terceiro Passo:

Abaixo do código:
]]></b:skin>

E antes do código:
</head>


Você adiciona esse código:

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


Quarto Passo:

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>


Quinto Passo:

Clique em preview para ver o resultado.

Se der algum problema clique em desfazer as alterações (Clean Edits) e refaça os passos.

Mas com certeza vai dar certinho e aí você já vai poder contar com uma núvem de tags no seu blogspot.

Muito bonito e útil pois sinaliza aos mecanismos de busca a suas palavras chaves mais importantes. (é uma dica de otimização também)

Veja o resultado:



Você pode fazer os ajustes na folha de estilos pra configurar a sua cor preferida, o tamanho máximo das palavras. É só atentar para o fato das cores estarem em padrão RGB.

Abraços




Fonte: Phydeaux3


--------------------
--------------------
Go to the top of the page
 
+Quote Post
Sama
post Dec 25 2006, 03:32 PM
Post #2


Iniciante
Ícone do grupo

Grupo: Membro
Posts: 84
Registrado: 24-November 06
Membro N°: 614
iTrader: 0 (0%)
Pontos: $0 Verdinhas
Exibir inventário


blink.gif Aleluia...buts,tava muito afim disso cara..
briga~dao..to precisando d+ pra um blogger que to fazendo...
Grande cara,valeu mesmo...

abs.Sama! fruits_apple.gif


--------------------

5ivebux - $10 Payout / $0.02 por Clique / $0.02 Ref / PAGANDO! - Cadastre-se!
--------------------
Go to the top of the page
 
+Quote Post
cristianw
post Jan 9 2007, 09:17 PM
Post #3


Iniciante
Ícone do grupo

Grupo: Membro
Posts: 13
Registrado: 8-January 07
Membro N°: 873
iTrader: 0 (0%)
Pontos: $0 Verdinhas
Exibir inventário


Ou voces podem usar o http://zoomclouds.egrupos.net/

Que tem um Wizard passo a passo muito facil, nao precisa editar codigos nenhum.

Tutorial passo a passo: http://www.brunogodoi.nerdhost.com.br/blog.../nuvem-de-tags/


--------------------
--------------------
Go to the top of the page
Email Poster  
+Quote Post
brcode
post Jan 10 2007, 11:10 PM
Post #4


ex-admin
Ícone do grupo

Grupo: Membro
Posts: 359
Registrado: 16-April 06
De: Brasil
Membro N°: 2
País: Outros
Interesse: Dinheiro online
Investidor: Defensivo
iTrader: 0 (0%)
Pontos: $0 Verdinhas
Exibir inventário


(cristianw @ Jan 9 2007, 09:17 PM) [snapback]4264[/snapback]

Ou voces podem usar o http://zoomclouds.egrupos.net/

Que tem um Wizard passo a passo muito facil, nao precisa editar codigos nenhum.

Tutorial passo a passo: http://www.brunogodoi.nerdhost.com.br/blog.../nuvem-de-tags/


Não acho viável fazer um menu que depende de outro site. Prefiro editar todo o código.


--------------------
--------------------
Go to the top of the page
 
+Quote Post
rock14
post Mar 4 2007, 10:27 AM
Post #5


Iniciante
Ícone do grupo

Grupo: Membro
Posts: 38
Registrado: 11-June 06
Membro N°: 145
iTrader: 0 (0%)
Pontos: $2 Verdinhas
Exibir inventário


Meu blog não tem o seguinte código

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
--------------------
Go to the top of the page
 
+Quote Post
brcode
post Mar 4 2007, 10:38 AM
Post #6


ex-admin
Ícone do grupo

Grupo: Membro
Posts: 359
Registrado: 16-April 06
De: Brasil
Membro N°: 2
País: Outros
Interesse: Dinheiro online
Investidor: Defensivo
iTrader: 0 (0%)
Pontos: $0 Verdinhas
Exibir inventário


(rock14 @ Mar 4 2007, 10:27 AM) [snapback]5273[/snapback]

Meu blog não tem o seguinte código

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

Você ta usando o Blogger Beta?


--------------------
--------------------
Go to the top of the page
 
+Quote Post
rock14
post Mar 4 2007, 03:56 PM
Post #7


Iniciante
Ícone do grupo

Grupo: Membro
Posts: 38
Registrado: 11-June 06
Membro N°: 145
iTrader: 0 (0%)
Pontos: $2 Verdinhas
Exibir inventário


(brcode @ Mar 4 2007, 10:38 AM) [snapback]5274[/snapback]

Você ta usando o Blogger Beta?


Sim, eu fui em templates e escolhi um novo hoje

Eu já tirei os códigos por não terem funcionado, amanhã vou tentar denovo.

Meu blog é o http://www.infotechnewsnow.blogspot.com


Este post foi editado por rock14: Mar 4 2007, 03:57 PM
--------------------
Go to the top of the page
 
+Quote Post
rock14
post Mar 4 2007, 04:58 PM
Post #8


Iniciante
Ícone do grupo

Grupo: Membro
Posts: 38
Registrado: 11-June 06
Membro N°: 145
iTrader: 0 (0%)
Pontos: $2 Verdinhas
Exibir inventário


(rock14 @ Mar 4 2007, 10:27 AM) [snapback]5273[/snapback]

Meu blog não tem o seguinte código

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


Para dar certo foi só colocar esse código:


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


Dentro dessa sessão: </b:section> Colocar o código aqui</b:section>


Este post foi editado por rock14: Mar 4 2007, 05:01 PM
--------------------
Go to the top of the page
 
+Quote Post
Edilson Menezes
post Apr 6 2008, 11:02 PM
Post #9


Iniciante

Grupo: Novato
Posts: 2
Registrado: 6-April 08
Membro N°: 6.546
iTrader: 0 (0%)
Pontos: $0 Verdinhas
Exibir inventário


Olá. Gostaria que alguém me ajudasse a mudar a cor das palavras da nuvem de tags, pois não sei como mudar e essa cor não combina com o layout do meu blog! Obrigado desde já. biggrin.gif
--------------------
Go to the top of the page
 
+Quote Post
S.Phoenix
post Apr 7 2008, 02:47 PM
Post #10


ex-admin
Ícone do grupo

Grupo: Membro
Posts: 181
Registrado: 16-April 06
Membro N°: 3
País: Outros
Interesse: Dinheiro online
Investidor: Defensivo
iTrader: 0 (0%)
Pontos: $0 Verdinhas
Exibir inventário


A cor está nos campos var maxColor = [0,0,255]; e [var minColor = [0,0,0];

está no padrao RGB, basta alterá-la.

Abraços


--------------------
--------------------
Go to the top of the page
 
+Quote Post
Edilson Menezes
post Apr 7 2008, 07:04 PM
Post #11


Iniciante

Grupo: Novato
Posts: 2
Registrado: 6-April 08
Membro N°: 6.546
iTrader: 0 (0%)
Pontos: $0 Verdinhas
Exibir inventário


(S.Phoenix @ Apr 7 2008, 02:47 PM) [snapback]22384[/snapback]

A cor está nos campos var maxColor = [0,0,255]; e [var minColor = [0,0,0];

está no padrao RGB, basta alterá-la.

Abraços



Valeu! Consegui mudar, brigadão! :D
--------------------
Go to the top of the page
 
+Quote Post
ousar
post Jul 5 2008, 10:43 AM
Post #12


Iniciante

Grupo: Novato
Posts: 1
Registrado: 5-July 08
Membro N°: 9.624
iTrader: 0 (0%)
Pontos: $0 Verdinhas
Exibir inventário


Como faço essa nuvem de tag em meu portal www.ousar.net


--------------------
O Maior Portal de Goiás
www.ousar.net
Jogue Truco On-line, xadrez e muito mais
Catálogo de Artistas Goianos
Guia da Moda Goiana
Guia de Bares e Restaurantes
Guia Academias
Guia Goiás
--------------------
Go to the top of the page
Email Poster  
+Quote Post
Anúncios Pagos
post
Post #










Anuncie no verdinhas.com. Click aqui para mais informações
--------------------
Go to the top of the page
 
Quote Post

Reply to this topicNew Topic
1 usuário(s) está(ão) lendo este tópico (1 visitantes e 0 usuários anônimos)
0 membros:

Collapse

> Tópicos Similares

Tópico Respostas Autor Visualizações Última ação
No new Cloudbux Instant Pre-launch Ganhe $45 Ao Se Registrar
Proposta reaberta - 100% back (0.003 por click)
22 Ohnitl3 2.967 13th September 2009 - 03:37 PM Último post por: Ohnitl3
No New Posts Cloudbux à Venda
5 clikinha 1.194 6th September 2009 - 09:59 PM Último post por: Ohnitl3
No New Posts Betabux - Pagamento Em 12 Horas (novissimo)
Per click: $ 0.01,Payout: $ 2.00
5 Mayconrules 1.119 2nd January 2009 - 10:08 AM Último post por: bahbizzy
No New Posts Cloudyhyip.com
200% after 1 day.
6 fredyrabello 1.369 18th May 2006 - 10:02 AM Último post por: fredyrabello

 

Skin designed by IPB Forum Skins

Verdinhas PageRank Web Statistics