Tutorial: Nuvem de tags personalizada para o Blogger

Olá meus amores? Aqui vim eu mais uma vez trazer um tutorial para vocês,eu estava com duvidas de como colocar marcadores personalizados no blog,então pesquisei,pesquisei e consegui achar no blog: Dicas Blogger

Achei exatamente o que eu queria que são as nuvens de tags,então sem mais enrolações vamos logo ao tutorial *.*

Bem primeiro vocês devem navegar até Modelo---> Editar HTML----> Aperte CTRL+F ou F3  e procure pela linha ]]></b:skin> e coloque 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;}

Se tudo estiver pronto,clike em salvar modelo.

Agora vocês deverão ir em Layout---> Adicionar um Gadget----> escolha a opção HTML/JavaScript
e coloquem 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,fazendo as seguintes 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,vá novamente em ------> Layout ------> Clike na opção Marcadores. Assim a opção vai mostrar todos os marcadores do seu blog, que vc irá copiar o link e colocar onde tem "#" no código.

E o código por fim deverá ficar assim, aqui eu irei mostrar como ficou o do My confessions

<div class="nuvem-html">
<a style="color:#FF69B4; font-size: 11px;" href="http://minhas-confissoes-2012.blogspot.com.br/search/label/Cabelos">Cabelos</a>
<a style="color:#FF69B4; font-size: 14px;" href="http://minhas-confissoes-2012.blogspot.com.br/search/label/Comemora%C3%A7%C3%B5es">Comemorações</a>
<a style="color:#FF69B4; font-size: 42px;" href="http://minhas-confissoes-2012.blogspot.com.br/search/label/Curiosidades">Curiosidades</a>
<a style="color:#FF69B4; font-size:17px;" href="http://minhas-confissoes-2012.blogspot.com.br/search/label/Musica">Musica</a>
<a style="color:#FF69B4; font-size:17px;" href="http://minhas-confissoes-2012.blogspot.com.br/search/label/Sem%20Categoria">Sem Categoria</a>
<a style="color:#FF69B4; font-size:17px;" href="http://minhas-confissoes-2012.blogspot.com.br/search/label/Tutorial">Tutorial</a>
<a style="color:#FF69B4; font-size:17px;" href="http://minhas-confissoes-2012.blogspot.com.br/search/label/Unhas">Unhas</a>
<a style="color:#FF69B4; font-size:17px;" href="#">Moda</a>
</div>

E os marcadores ficarão assim,igual ao do blog:

 Não é legal?

 E quem quiser colocar imagem de fundo é muito fácil é só substituir a linha 

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

 E colocar a imagem onde se pede, e o fundo ficará assim:

é muito fácil não é pessoal? Espero que tenham gostado do tutorial,beijos até mais gente,fiquem com Deus!

Qualquer duvida perguntem! Tchau :*