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.