Como adicionar Nuvens de marcadores no Blogger

Entre no html do template e, usando os comandos Crtl+F do seu teclado, procure pela linha ]]></b:skin>. Cole ANTES dela o seguinte código:

.nuvem-html {

border: 1px solid #333;

background: url('url-imagem de fundo') repeat;

margin: 10px 0 10px 0;

line-height: 30px;

text-align: center;

padding: 2px;

padding-top: 10px;

}

.nuvem-html a {

text-decoration: none;

}

.nuvem-html a:hover {

border-bottom: 1px dashed #ccc;

}

Visualize o template e se tudo estiver bem, salve. Agora vá em elementos de páginae escolha um gadget do tipo html/javascript. Cole o seguinte código:

<div class="nuvem-html">

<a style="color:#9b2230; font-size: 11px;" href="#">TEXTO</a>

<a style="color:#000000; font-size: 14px;" href="#">TEXTO</a>

<a style="color:#940f04; font-size: 42px;" href="#">TEXTO</a>

<a style="color:#999999; font-size:17px;" href="#">TEXTO</a>

</div>

Insira quantas linhas forem necessárias e faça as respectivas alterações.

color é a cor da fonte

font-size é o tamanho da fonte

“#” é a url do marcador

TEXTO é nome do marcador

Para obter a url do marcador, coloque o gadget padrão do Blogger na sidebar e depois copie os links, colando-os no local indicado do código (“#”)

Abaixo, veremos um exemplo usado no Diário de Bordo e o resultado final.

<div class="nuvem-html">
<a style="color:#9b2230; font-size: 11px;" href="http://www.diariodebordoweblog.com/search/label/Animais">Animais</a>
<a style="color:#000000; font-size: 14px;" href="http://www.diariodebordoweblog.com/search/label/Apresenta%C3%A7%C3%A3o">Apresentação</a>
<a style="color:#940f04; font-size: 12px;" href="http://www.diariodebordoweblog.com/search/label/Bizarro">Bizarro</a>
<a style="color:#999999; font-size:17px;" href="http://www.diariodebordoweblog.com/search/label/Brasil">Brasil</a>

</div>

Para colocar uma imagem de fundo (background), altere a linha abaixo, no primeiro código, substituindo url-imagem de fundo pela url da imagem que você escolheu.

background: url('url-imagem de fundo') repeat;

Um site legal para buscar imagens para o background é o DESIGNM.AG. Aí está o resultado:

Hacker Expert!