Como Inserir uma Nuvem de Tags Usando os Marcadores

  Olá pessoal, hoje estou com mais um tutorial para você adicionar em seu blog. Desta vez estou trazendo um Widget de nuvem de tags usando os marcadores de seu blog. Como no próprio título deste artigo diz, antes de tudo para que esse widget funcione você precisa inserir marcadores em suas postagens, assim o próprio Blogger irá organizar em categorias todos os posts.

Vou lhe dar um exemplo de como irá ficar, visualize a imagem abaixo:

Na imagem acima, temos a primeira imagem que ilustra o espaço para preenchemos o nome do marcador, e na segunda imagem, mostra a nuvem de tags na prática (como ela irá funcionar).

Vamos ao Tutorial:
1º - Vá no Painel de Controle de seu blog e clique na Guia Layout.
2º - Você irá para a página Elementos de Página. Clique em Adicionar um Gadget e selecione a opção Marcadores, você pode colocar o título como Nuvem de Tags, ou Categorias, Marcadores e entre outros.
Obs: Se você já tem esta opção ativa, não precisa fazer este passo.

3º - Depois de ter salvo, vá na Guia Modelo e em Editar HTML.
4º - Com a ajuda do CTRL+F procure por:

]]></b:skin>

5º - E ANTES dele cole o seguinte código:

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

6º - Agora procure por: </head>  e ANTES dele cole o seguinte código:

<script type='text/javascript'>// Label Cloud User Variablesvar lcBlogURL = 'http://LINK-DE-SEU-BLOG-AQUI.blogspot.com';var maxFontSize = 20;var maxColor = [0,0,255];var minFontSize = 10;var minColor = [0,0,0];var lcShowCount = false;</script>

• Lembre-se de substituir a parte em  http://LINK-DE-SEU-BLOG-AQUI.blogspot.com
• Exemplo: http://meublogaqui.blogspot.com

7º - Agora procure por:

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

8º - E substitua tudo 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=0var 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>

9º - Feito isso, Visualize e se estiver tudo certo, cliquem em Salvar Modelo!