Twitter Delicious Facebook Digg Stumbleupon Favorites More

Marcadores/ Categorias em Tag Cloud

Estava procurando por esse tutorial sobre como transformar a lista de marcadores do blog (categorias) em uma nuvem de tags (tag cloud).

Encontrei no Usuário Compulsivo e, resolvi postar aqui para compartilhar com vocês leitores.

 

Se desejar substituir sua lista de links de categorias do blog por uma nuvem de tags, siga o tutorial abaixo. Testei e funciou perfeitamente.


1 - No código HTML do seu template NÃO clique em 'Expandir modelos de widgets'.

 

2 - Procure (Ctrl+F) pela linha ]]></b:skin> e adicione logo acima dela o código CSS abaixo (esse é o código CSS que vai definir o visual da sua tag cloud):

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

3 - Agora encontre (Ctrl+F) a linha ]]></b:skin> e insira o código abaixo entre ela e </head>. Pode haver outros códigos entre essas tags mas  importante aqui e que seja adicionada antes da tag </head>.

<script type='text/javascript'>
// Label Cloud User Variables
var lcBlogURL = 'http://SEU_BLOGUE.blogspot.com';
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

4 - Entre as tags <div id='sidebar-wrapper'> ou equivalente dependendo do seu template) e </b: section></div> vamos inserir o código da nossa tg cloud:

 

Veja um exemplo de onde inserir o código:

<div id='right-sidebar-wrapper'>
        <b:section class='sidebar' id='right-sidebar' preferred='yes'>
<b:widget id='HTML2' locked='false' title='Mais Comentados' type='HTML'/>
<b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>

 

COLE O CÓDIGO AQUI


</b:section>
      </div>

 

* Aqui, se você ainda não excluiu a sua lista de marcadores e está adicionando a tag cloud, é bem provável que sua lista esteja com a id='label1'. Então substitua o id da tag cloud para, por exemplo, id='label222' para não haver erros.

 

Esse (abaixo) é o código a ser copiado e inserido no seu template:

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

Visualize o template. Se estiver tudo ok, salve.

 

Pronto, agora você ja tem sua lista de marcadores em forma de nuvens de tags (tag cloud). Dúvidas? Pergunte nos comentários.

 

Clique Aqui!

7 comentários:

Kátia SanSuey disse...

olá, boa noite!
achei bem legal este post, mas não consegui fazer dar certo...

na ultima parte, está dando errado...
qdo coloco para visualisart, a pagina fecha e aparece a seguinte mensagem:
O item de id Label1 não está contido em uma seção (o elemento pai é: div). Todos os widgets devem estar em uma seção.

vc pode me ajudar????
obrigada!

Willian Coutinho disse...

Esse erro acontece quando a gente insere o código no lugar errado.

Desculpe, eu não especifiquei corretamente onde era pra ser inserido o código.
Mas ja corrigi o post, dá uma olhada no passo 4.

Oksana disse...

Muito bom! Adorei, muito obrigada!

Unknown disse...

oiii!!!

Eu gostava de fazer uma tag cloud de um texto.. aconselhas-me algum programa?
Obrigada!!!!!

gulego disse...

Muito obrigado, estava procurando muito por isso!

Já te linkei no meu projeto de blog.

Abraço!

Anônimo disse...

Muito grato, sua explicação resolveu o problema com o erro do meu template.
Quem quiser conferir como ficou...

Guilherme Batitsa disse...

Funcionou sem problemas aqui \o/
Muito obrigado pelo tutorial \o

Postar um comentário

Envie um comentário!

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Blogger Templates