Hoje vamos ver mais uma dica simples, mas que faz a diferença no layout do seu blog no Blogger (não pense que é porque você tem um blog que usa WordPress.org como CMS que esse tutorial não serve para você). Vamos aprender hoje como separar os links da sidebar (barra lateral) do blog com uma borda.

O processo é simples, mas não se esqueça, antes de fazer qualquer alteração no seu template, salve uma cópia do mesmo.

Aviso feito, vamos lá!

Entre na sua conta do Blogger e no painel, clique em Layout no blog que você quer alterar. Depois, clique em Editar HTML e clique em Baixar modelo completo para salvar uma cópia do seu modelo.

Agora, procure pelo trecho abaixo no seu código (atenção: eu uso o modelo minima, portanto, pode ser que o seu modelo seja um pouco diferente, aí você escolhe se usa o minima ou tenta adaptar o seu):

/* Sidebar Content
———————————————– */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}
.sidebar ul {
list-style:none;
margin:2;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}

Copie o seguinte trecho:

border-bottom:1px dotted $bordercolor;

Cole logo abaixo de .sidebar li { o trecho que você copiou.

Pronto, aí é só visualizar para ver se está tudo certo e salvar o modelo.

Explicando:

Border-bottom = Refere-se a borda na parte de baixo dos links. Se você quiser, pode trocá-la de lugar:

border = Borda ao redor de todo o link.
border-top = Borda só em cima do link.
border-left = Borda do lado esquerdo do link.
border-right = Borda do lado direito do link.

1px = Refere-se a espessura da borda (você pode colocá-la mais grossa, basta mudar o número para 2 ou 3, etc…). Exemplo:

border-bottom:3px dotted $bordercolor;

Dottet = Refere-se ao tipo de borda (se você preferir pode usar ao invés dos tracinhos, uma borda sólida, basta trocar o "dotted" por "solid"). Exemplo:

border-bottom:1px solid $bordercolor;

$bordercolor; = Refere-se a cor da borda, que no caso, ficará com a mesma cor das bordas que você já usa no seu blog. Caso você queira usar outra cor, basta trocar o "$bordercolor;" pelo código da cor que você quiser. Exemplo:

border-bottom:1px dotted #000000; (nesse caso, a borda ficaria preta).

Se você quiser saber qual o código da cor que você usa no seu blog ou uma cor que você quer usar, basta dar uma olhada na tabela de cores e seus respectivos códigos.

Pode usar a que já publicamos aqui: Tabela de cores

Faça bom uso!

Imagem: MasterNewMedia

Muitas vezes, começamos a aprender como utilizar uma ferramenta e automaticamente passamos a acreditar que todos possuem tal conhecimento (acho que eu já disse isso), o que na verdade, acaba prejudicando quem está aprendendo, pois se torna cada vez mais difícil encontrar informações básicas sobre o seu blog.

Uma das coisas que me surpreendeu, foi ver nas estatísticas do blog o número de pessoas que chegam até aqui procurando informações de como encontrar o tamanho certo da imagem que usa ou quer usar no header (cabeçalho) do blog. Não é difícil entender, pois basta procurar um pouco, para encontrar vários blogs novos com a imagem torta ou "diferente" do normal.

Então, se você é um desses que chegou até aqui procurando por isso, aí vai:

Descobrindo o Tamanho da Imagem

Vá até a parte de edição de html do seu blog (lembre-se de salvar uma cópia do seu template sempre que for modificar algo), procure pelo trecho abaixo:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Esse é o trecho que indica a largura do header do seu blog. (retirado do modelo mínima, se você usa um outro modelo, procure por um trecho parecido, o importante aqui é identificar o #header-wrapper). Onde:

#header-wrapper {
width:660px; ———————————–> Largura do Header
margin:0 auto 10px;
border:1px solid $bordercolor; ———-> Borda do Header
}

Para colocar uma imagem no header, basta que sua imagem tenha a mesma largura indicada aqui.

O modelo mínima não vem com indicação da altura do header, mas você pode acrescentar esse trecho, caso esteja tendo algum problema com a imagem. Supondo que sua imagem tenha 180 pixels de altura, basta acrescentar height:180px; (não se esqueça do ponto-e-vírgula no final). No nosso exemplo ficaria assim:

#header-wrapper {
width:660px; ———————————–> Largura do Header
height:180px;
margin:0 auto 10px;
border:1px solid $bordercolor; ———-> Borda do Header
}

Se você quiser, pode retirar a borda que está marcada aqui, basta modificar o código assim:

border:0;

Adicionando Uma Imagem

Conseguindo descobrir a largura e sabendo a altura do header, fica fácil adicionar uma imagem ao mesmo. Coisa que pode ser feita de duas formas:

01 – Direto no código:

Para usar uma imagem direto no código, você vai precisar hospedá-la em algum lugar. Você pode usar o próprio Blogger para isso, como eu já escrevi nesse texto:

Blogger: Onde Hospedar Imagens com Segurança

Com o endereço da imagem em mãos, basta inserir o trecho que está em negrito no código:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
background: url(ENDEREÇO DA IMAGEM) bottom center;
}

Se quiser alinhar a imagem de outra forma, troque o bottom center! Alinhar a esquerda: bottom left ou a direita bottom right.

02 – Através do campo "Layout" do blog:

Na sua conta do blogger, clique em "Layout" no blog que você quer adicionar a imagem e na página "Elementos de página" clique em "Editar" (na parte relativa ao header), clique em "Procurar" e encontre a imagem no seu computador. Se a imagem conta com o nome do seu blog nela, marque a opção "Em vez de título e descrição", caso contrário, com a opção "Por trás de título e descrição" (ideal) marcada, clique em "SALVAR ALTERAÇÕES".

Confira o resultado, estando tudo como você queria é só clicar em "SALVAR" e pronto!

Ok Pessoal, como falamos aqui em como aumentar o número de pageviews e algumas pessoas procuraram alternativas para as dicas. Hoje vou explicar como adicionar uma lista de links a sidebar (barra lateral) do blog. Mas não se engane, uma lista de links pode ser usada para muitas coisas dentro do blog além de mostrar os posts mais visitados. Entre elas podemos citar:

• Seu Blogroll (uma lista de blogs que você recomenda a seus visitantes).
• Links internos (uma lista de links para páginas do seu blog).
• Links externos (uma lista para páginas de outros blogs que você gostaria de destacar).

E tudo mais que sua imaginação mandar.

Basicamente, uma lista de links é algo simples e fácil de adicionar ao blog, mas que pode não ser assim, nem tão simples e nem tão fácil para quem está começando. Então…

Adicionando Uma Lista de Links ao Blog

Antes de tudo, você vai precisar das url’s (endereços) que você pretende usar na sua lista.

URL: o endereço que aparece na barra de endereços do seu navegador (url completa), por exemplo:

http://www.novonarede.com.br/blog

Copie os endereços e cole em algum lugar, que pode ser uma página do Bloco de notas, Word, WordPad (você que sabe).

Ao entrar na sua conta do Blogger, no painel de controle, clique em Layout no blog onde você quer adicionar a lista de links. Depois, na página Elementos de página, clique em Adicionar um Gadget na sua sidebar. Em seguida, na página que se abre, procure por Lista de links como mostra a figura abaixo:

Na nova página, basta que você adicione as informações aos campos correspondentes:

Título: O título que você quiser dar a lista.

Número de links a serem mostrados: é só deixar em branco.

Classificação: Você pode colocar em ordem alfabética ou ordem alfabética inversa ou simplesmente não classificar, o que vai fazer com que o primeiro link que você adicionar, no fim das contas, seja o último da sua lista.

Essas três vão afetar sua lista de forma geral, já as duas restantes, são específicas para cada link. São elas:

Novo URL do site: a url do blog ou página que você copiou e quer que se abra ao clicar no link correspondente.

Novo nome do site: o nome do link que você quer atribuir a url (no caso de um blog, o título do blog. No caso de uma página, o título da página).

Preenchendo a url e o nome do link, basta clicar em ADICIONAR LINK para que o link que você acabou de criar seja adicionado a sua lista e preencher novamente os campos correspondentes a url e nome do link, clicando em ADICIONAR LINK a cada novo link.

Uma vez que sua lista de links estiver completa, basta clicar em SALVAR ALTERAÇÕES e visualizar o blog, estando tudo bem é só clicar em SALVAR e pronto!

Viu, agora é simples e fácil!

Imagem – Koka Sexton

Essa dica eu vi no El Escaparate (da Rosa), blog que estou sempre indicando e já faz algum tempo, apesar de me atrapalhar todo com a língua. Não posso deixar de recomendar a visita e passar adiante este tutorial com as devidas modificações e principalmente para ajudar quem não consegue entender o tutorial original ok?

Aqui vamos aprender como mostrar uma lista com os nomes de quem mais comenta no blog (e seus respectivos links).

Esta é sem dúvida uma forma de agradecer e retribuir quem te prestigia.

Lembrando que este é um tutorial voltado para quem usa o Blogger. Aqui no Novo na Rede nós usamos o WordPress.org como CMS e vocês podem ver na sidebar (barra lateral) das páginas internas que mostramos os últimos comentários feitos pelos autores, suas fotos e links. Para isso usamos o Plugin Get Recent Comments.

Voltando ao texto!

Copie o código abaixo e faça as alterações que indico logo depois:

<script type="text/javascript">
function pipeCallback(obj) {
document.write(‘<ul>’);
var i;
for (i = 0; i < obj.count ; i++) { var href = "’" + obj.value.items[i].link + "’"; if(obj.value.items[i].link == "") var item ="<li>" + obj.value.items[i].title + "</li>"; else var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>"; document.write(item); } document.write(‘</ul>’); } </script> <script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=2351a7b3195ee95ef3643998bc8def5e&url=http%3A%2F%2Fnovonarede.blogspot.com&num=10&filter=Tico Esteves" type="text/javascript"></script>

Preste atenção ao final do código, ok? Essa parte:

<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=2351a7b3195ee95ef3643998bc8def5e&url=http%3A%2F%2FURLDOSEUBLOG&num=10&filter=Tico Esteves" type="text/javascript"></script>

• Onde está URLDOSEUBLOG é só você substituir pelo nome do seu blog (sem o http://). Por exemplo: novonarede.blogspot.com ou novonarede.com.br

• Onde está o número 10 você substitui pela quantidade de nomes que quer que apareça na lista (se quiser).

• Onde está Tico Esteves você substitui pelo seu nome (o nome que você assina as postagens). Isso filtra o seu nome e não deixa que ele apareça na lista.

Depois, vá até o painel de controle do Blogger (faça login na sua conta) e clique em Layout. Na página Elementos de página, clique em Adicionar um Gadget. Na janela que se abre, procure por HTML/JavaScript e clique no link. Na próxima janela, adicione o código acima (com as devidas alterações) no campo Conteúdo. No campo Título você coloca o título que quiser (comentaristas, Top Comentaristas, você que sabe). Clique em SALVAR e pronto, sua lista está funcionando! Simples né?

Este código filtra os últimos 500 comentários do seu blog. Mas se você quiser um para 5.000 ou ainda colocar imagens ou números ao lado dos nomes dos comentaristas, visite o post Top comentaristas (Ganando enlaces) da Rosa (não deixe de visitar), que você vai encontrar todas as dicas para fazer as modificações necessárias.

Agradecimentos a Rosa por essa preciosa dica e aguardem, pois esse é só o começo! Tio Tico vai continuar pesquisando para trazer outros widgets que não precisam de nenhuma "caixinha mágica que gera link esperto" para funcionar!

Faça bom uso!

PS: Tem gente pensando que esses scripts não estão mais funcionando. Na verdade continuam funcionando normalmente, o Blogger é que está passando por mudanças (quem já leu sobre o editor de layouts?) e sempre que isso acontece acaba interferindo em tudo. Mas o script funciona e muito bem, posso atestar!

Imagem: Efetividade.net

Aprender a colocar uma lista de categorias no Blogger é uma das coisas mais básicas e que ao mesmo tempo se torna um dos maiores desafios de quem está começando. E este foi o assunto do primeiro tutorial que eu escrevi e um dos textos de maior sucesso do Novo na Rede de todos os tempos. Logo em sua publicação chegou a 100 comentários e repercutiu bastante. Apesar de sua simplicidade (ou talvez por isso) se transformou no texto mais popular do antigo Novo na Rede e por isso não consegui simplesmente apagá-lo. Por isso, com as devidas alterações, hoje vamos ver:

Como Colocar Categorias no Blogger/Blogspot

Na verdade, apesar de o resultado final ficar idêntico a lista de categorias que existe no WordPress, no caso do Blogger, o que vamos usar serão os marcadores. E esta é a única forma legítima de criar uma lista assim.

Muita gente não tem o costume de usar marcadores em seus textos, outros já usam marcadores demais. Porém, todos que quiserem criar a sua lista de categorias terão obrigatoriamente que ter um marcador por texto no mínimo (os textos que não tem marcadores, não aparecem na lista).

Resumindo a história, colocar a tal lista de categorias é bem simples, só vai ser preciso um pouco de atenção e não ter medo de trabalhar duro. Se é para melhorar a vida de quem gosta do seu blog, todo trabalho é válido e será recompensado (repita isso como um mantra, quem sabe você acaba acreditando ).

Importante: Antes de começar a fazer sua lista de categorias, leia todo o texto abaixo.

Adicionando o Gadget

A primeira coisa a fazer, é entrar na sua conta do Blogger, chegar ao painel e clicar no link Layout do blog que você quer adicionar a seção "Categorias".

Na página Elementos de página, na sua Sidebar (barra lateral), clique em Adicionar um Gadget.

Quando você clicar em "Adicionar um Gadget" vai abrir uma nova janela, aí é só procurar por Marcadores, como mostra a figura abaixo:

Aí é só clicar em "Marcadores" ou sinalzinho "+" ou na imagem das etiquetas que aparecem aí ao lado.

Ao clicar você vai entrar em outra janela igual a essa da próxima figura:

Você terá quatro campos para escolher:

Título: Você escolhe o título que quiser. Por padrão vem "Marcadores", mas você pode trocar e no nosso caso, como estamos falando de uma lista de categorias, você pode chamar de Categorias mesmo.

Exibir: Você escolhe se quer mostrar todos os marcadores que você tem ou só alguns. Essa parte de Marcadores selecionados é muito útil para quem tem muitos marcadores em seus posts, mas não quer mostrar todos.

Classificação: Essa é simples né? Você escolhe se quer por ordem alfabética ou por frequência em que são postados.

Exibir (2): Se você marcar a opção Lista, você terá a nossa lista de categorias normal. Agora, se você marcar a opção Cloud, você cria um tipo de nuvem de tags, mas só que estática. Não uma nuvem de tags flutuante como já aprendemos aqui.

E por último você escolhe se quer mostrar o número de posts que você tem publicados com aquele marcador neles. Se não quiser mostrar, basta desmarcar a caixinha Mostra o número de postagens por marcador que está no final.

Feito isso é só clicar em SALVAR e a primeira parte está pronta!

Como assim primeira parte Tico? Tem mais?

Parte 2: Para Quem Ainda Não Usa Marcadores

Olha só, se você tem o costume de adicionar marcadores as suas postagens, sua lista de categorias já está pronta e funcionando.

Agora, se você nunca adicionou marcadores as suas postagens, aí entra a segunda parte!

Para quem não tem marcadores em seus posts publicados (serve até para quem já tem, mas quer trocar, simplificar, etc.), vai ter que entrar em cada post e adicionar no mínimo um marcador para a lista no campo Marcadores, da área de edição de postagem do Blogger, como mostra a figura abaixo:

É só clicar dentro do campo, digitar o marcador que você quer usar e clicar em PUBLICAR POSTAGEM.

Faça isso em cada um dos posts em que você quiser adicionar um marcador e lembre-se de a partir de agora, sempre que for publicar um texto, já adicionar o marcador correspondente para evitar esse trabalho no futuro!

Uma lista de categorias ajuda imensamente o leitor na hora de encontrar o conteúdo que ele procura, mas é claro que essa lista tem que ser pensada para isso. Pois não adianta nada você criar uma lista de categorias em que o nome de cada categoria não corresponda ao assunto do post.

Imagem: All Things Considered

Nós já aprendemos aqui como justificar o texto no Blogger utilizando o editor de texto. Acontece que muita gente se esquece de fazer isso quando está publicando direto na área de edição do Blogger e acaba deixando sem. Bem… fica estranho! Ao menos, eu não gosto! Por isso agora vamos aprender a justificar o texto direto no código do blog. Assim não tem desculpa!

Pra isso, você só vai ter que fazer uma simples modificação no código do blog e pronto! Nunca mais vai precisar se preocupar com isso, pois o texto já vai sair justificado na hora da publicação!

Na Área de Edição do Blogger

Vá em Layout -> Editar HTML

Clique em "Baixar modelo completo" e salve uma cópia do seu template (nunca se sabe). E em seguida, procure pelo trecho abaixo:

/* Posts
———————————————–
*/
h2.date-header {
font-size:90%;
margin:0.3em 0 .6em;
}
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:180%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}
.post h3 strong, .post h3 a:hover {
color:$textcolor;
}

É isso ou alguma coisa parecida. O importante aqui é o .post.

Adicione o trecho abaixo logo após o .post {:

text-align: justify;

Dica 1: Pode ser que no seu template tenha algo como .post-body aí é só adicionar o "text-align: justify;" após o .post-body { que o efeito é o mesmo.

E é claro, se no trecho indicado já existe o "text-align:" é só substituir o que estiver lá por justify.

Clique em VISUALIZAR e estando tudo bem, clique em SALVAR MODELO e pronto!

Dica 2: Esse tutorial é para justificar o texto no post (área do texto do blog), mas o mesmo trecho de código serve para justificar o texto no header, na sidebar ou no footer ok?

Faça bom uso!

Imagem: Priki

Pois é pessoal, essa é mais uma daquelas dicas simples que como eu já falei é simples para quem já sabe, mas para quem está começando não é tão simples assim. Hoje vamos aprender como alterar a data e fechar comentários de uma página específica no Blogger. Mas antes de mais nada, vamos entender porque fazer isso:

Alterar a data de uma página para alguns dias (até meses) anteriores a postagem de fato e fechar os comentários era a única maneira de realmente criar páginas no Blogger para que ficassem iguais as páginas estáticas do WordPress (como a nossa página da Equipe por exemplo).

Agora parece que o Blogger resolveu colaborar e finalmente lançou a opção para a criação de páginas (ao menos no rascunho parece que já está funcionando).

O problema é que como todo novo serviço que o Blogger incorpora demora um tempo para se tornar realmente "confiável" e além disso o que nós vamos aprender aqui não serve apenas para criar páginas, mas simplesmente fechar os comentários de um artigo que já tem muitos e como é antigo você não quer mais que ninguém comente, independente do motivo. Ou simplesmente publicar uma imagem que você quer armazenar no Blogger, mas que não quer que apareça na primeira página (para isso bastar alterar a data).

Feitas as explicações, vamos as dicas!

Alterações Necessárias

No painel de controle do Blogger, vá até a área de edição de postagens (o editor onde você cria suas postagens) clicando em NOVA POSTAGEM como mostra a figura abaixo:

Dica: Se você quer alterar um post já existente, você pode clicar em "Editar postagens" ou no próprio blog, na página que você quer editar, clicar na figura de um lápis que aparece quando você está logado na sua conta.

Já na área de edição de posts, procure na parte inferior esquerda do editor o link Opções de postagem, veja:

Ao clicar em "Opções de postagem" você irá abrir uma nova área logo abaixo onde você vai encontrar as opções para alterar a data e fechar os comentários, como mostra a figura abaixo:

Alterar a data:
Em Data e hora da postagem modifique o dia (e o mês se você quiser) para que assim que a página for publicada não apareça na primeira página. É fácil, mas preste atenção para o formato da data 00/00/00 tem que continuar assim com a nova data para dar certo ok?

Fechar os comentários:
Aqui você pode tanto fechar os comentários, mas deixar que apareçam os que já existem (bom para casos de posts antigos que tiveram suas dúvidas respondidas nos comentários) ou fechar os comentários ocultando os comentários que por ventura já existam no post em questão. Aí é com você! (comentário, comentário, comentário… ufa! )

Feitas as escolhas, basta clicar em PUBLICAR POSTAGEM e pronto!

Não tem segredos e é bem simples de se fazer, tirando o detalhe da data (que tem um formato certo) o resto é realmente simples demais (agora que você já sabe)! Já voltamos com mais dicas!

Faça bom uso!

Imagem: La Frase Tonta de la Semana

Existem coisas que de tão básicas chegam a incomodar algumas pessoas quando publicamos por aqui, mas pessoal, a missão do Novo na Rede é ou não é ajudar quem está começando, tanto em matéria de blogs, quanto na internet em geral. Por isso vamos direto ao assunto e atendendo a pedidos vamos ver hoje rápidinho como justificar o texto no Blogger!

Como Justificar o Texto

Quem começa a escrever um blog, muitas vezes, não sabe nem o que é isso, que dirá como fazer. Então, o que vemos na maioria dos blogs novos são textos alinhados à esquerda, o que na prática fica bem estranho, pois já estamos acostumados a ver os textos "justificados".

Isso até hoje, pois agora você só não justifica seus textos se não quiser. Olha só:

Quando terminar de escrever seu texto, clique com o botão direito do mouse sobre o mesmo e em "Selecionar tudo" (o texto vai ficar todo em azul).

Clique com o botão esquerdo nessa figura bonitinha (marcada em vermelho):

Dica: Você só vai ver essa figura quando estiver escrevendo seu texto na aba "Escrever" e não em "Editar Html" ok?

Faça bom uso!

Imagem: Fotocromo

Se você precisa de imagens que vão ser acessadas todos os dias (títulos para a sidebar, background, banner, etc) vale a pena arriscar usando um serviço que pode te deixar na mão?

Infelizmente, nós sabemos que alguns serviços, apesar de gratuitos (ou talvez por), não são tão confiáveis assim. Portanto, se é para arriscar ao menos vamos deixar tudo em casa!

Como Fazer

Vá até a área de edição do blog e faça como você faz para postar um texto, só que dessa vez, você só vai baixar as imagens do seu computador para o post.

Uma vez que você adicione todas as imagens que quer usar, basta clicar em Editar Html e copiar a url de cada imagem. Algo assim:

<img src="url(ENDEREÇO)daimagem">

Copie o que estiver na parte que destaquei em vermelho no código acima (esse é o endereço da imagem).

Feito isso, clique em Opções de postagem e modifique a data do post para alguns bons três ou quatro meses antes (isso é para as suas imagens não aparecerem na home do blog). Confira na imagem abaixo:

Dê um título qualquer (pode ser minhas imagens, para ficar fácil encontrar depois), categoria é opcional, assim como os comentários. Aí é só publicar!

Agora você pode usar as imagens, sem se preocupar com a hospedagem!

Dica: As imagens que você usa em seu blog são guardadas automaticamente em um álbum da web do Picasa.

Faça bom uso!

Imagem: RAWKU5

Um movimento bem interessante para os blogs que na sua grande maioria são bem "paradões".

Dica 1: Para quem usa WordPress uma boa pedida é o plugin WP-Cumulus (em um próximo texto vou passar um tutorial de como instalar e configurar o plugin ok?)

Bem, eu estava procurando por algo parecido para o Blogger (para atender um pedido especial), quando encontrei no Blogger Buster (em inglês) um tutorial explicando como adicionar uma nuvem de tags assim no Blogger!

Fiz uma pequena adaptação para que a nuvem fique da largura da sua sidebar independente da largura da mesma. Então, vamos ao código:

Dica 2: Antes de qualquer coisa, salve uma cópia do seu template. O código é simples de ser implementado, mas nunca se sabe né?

Vá até o painel de controle do blog e clique em Layout –> Editar HTML.

Procure pelo trecho abaixo (NÃO precisa clicar na caixinha "Expandir modelos de widgets"):

<b:section class=’sidebar’ id=’sidebar’ preferred=’yes’>

Logo abaixo deste trecho, cole o código a seguir:

<b:widget id=’Label99′ locked=’false’ title=’Labels’ type=’Label’>
<b:includable id=’main’>
<b:if cond=’data:title’>
<h2><data:title/></h2>
</b:if>
<div class=’widget-content’>
<script src=’http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js’ type=’text/javascript’/>
<div id=’flashcontent’>Blogumulus by <a href=’http://www.roytanck.com/’>Roy Tanck</a> and <a href=’http://www.bloggerbuster.com’>Amanda Fazani</a></div>
<script type=’text/javascript’>
var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;100%&quot;, &quot;210&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0×333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values=’data:labels’ var=’label’><a expr:href=’data:label.url’ style=’12′><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name=’quickedit’/>
</div>
</b:includable>
</b:widget>

Alterações

Para mudar a cor de fundo da Nuvem de tags e adaptá-la a cor de fundo do seu blog, procure no código acima por #ffffff e substitua pelo código da cor que quiser.

E para modificar a cor da fonte (letra) da Nuvem de tags, procure por 0×333333 substituindo o 333333 (sem o "#" ao lado ok?).

Se não sabe qual o código da cor do seu template ou quer uma cor diferente, você pode procurar nessa tabela de cores que eu já postei aqui!

Clique aqui para ver a tabela de cores

Depois de fazer as modificações que quiser, clique em VISUALIZAR e você já deve conseguir ver a nuvem de tags no seu blog. Depois clique em SALVAR e pronto!

Agora, se você quiser mudar o nome que aparece como título da nuvem de tags (Labels), vá até a página Elementos de página, procure na sua sidebar o título "Labels" e clique em Editar na barrinha do título.

Na janela que se abre, substitua o título (Labels) pelo título que quiser (Nuvem de tags, Tags, etc…), depois clique em SALVAR e pronto!

Obviamente nem tudo são flores e já sabemos das limitações do Blogger. Uma delas, bem grave por sinal é o fato da nuvem de tags não funcionar com palavras acentuadas. Enfim…

Se quiser conferir o post original do Blogger Buster visite:

Blogumus: a flash animated label cloud for Blogger!

Se quiser ver a Tag Cloud instalada e funcionando clique aqui e confira na sidebar do BABEL.com!

Faça bom uso!