sábado, 9 de março de 2013

Marcadores em forma de nuvem colorida

Uma das maneiras de destacar o conteúdo mais relevante do blog é selecionar os marcadores mais relevantes e/ou interessantes. Ou ainda os que possuem mais postagens.
Vou ensinar hoje um código bem simples, que vai fazer seus marcadores ficarem parecidos com os meus, conforme você vê no print:
CODICO ABAIXO 
Entendendo o código para personalizá-lo:
font-size: tamanho da letra. Altere como desejar, quanto maior o número, claro, maior o tamanho da letra;

color: define a cor da letra. Para mudar alter o número hexadecimal. Aqui tem uma tabela de cores para você escolher. Nunca esqueça o sinal # pois sem ele o código da cor não funciona;

ENDEREÇO DE SEU MARCADOR: copie o endereço do marcador desejado. Você obtém esse endereço clicando sobre o seu marcador desejado e a seguir copiando o endereço completo que aparecer no seu navegador.
Exemplo:
Meu marcador Publicidade tem esse endereço: http://www.elainegaspareto.com/search/label/Publicidade

NOME DE SEU MARCADOR: nome que aparecerá em sua nuvem de tags. Pode ser o mesmo nome do marcador ou pode ser o que você achar melhor.
Exemplo:
Meu marcador conheça esse blog aparece na nuvem de tags com o nome de Blogs que eu indico. Achei mais bonito assim, então alterei.

Caso queira inserir mais marcadores basta colocar esta linha (não esqueça de personalizar como desejar):

 <a style="font-size:20px;color:#000000;" href="ENDEREÇO DE SEU MARCADOR">NOME DE SEU MARCADOR</a>

Antes do fechamento do código. O fechamento é com essa tag:
</div> 
Codico                                      
<div align="center">
<a style="font-size:25px;color:#87cefa;" href="ENDEREÇO DE SEU MARCADOR">NOME DE SEU MARCADOR</a>

<a style="font-size:28px;color:#FF34B3;"href="ENDEREÇO DE SEU MARCADOR">NOME DE SEU MARCADOR</a>

<a style="font-size:14px;color:#f9b;"href="ENDEREÇO DE SEU MARCADOR">NOME DE SEU MARCADOR</a>

<a style="font-size:13px;color:#FF4500;" href="ENDEREÇO DE SEU MARCADOR">NOME DE SEU MARCADOR</a>

<a style="font-size:17px;color:#9932CC;" href="ENDEREÇO DE SEU MARCADOR">NOME DE SEU MARCADOR</a>

<a style="font-size:25px;color:#87ce00;" href="ENDEREÇO DE SEU MARCADOR">NOME DE SEU MARCADOR</a>

<a style="font-size:17px;color:#CD950C;" href="ENDEREÇO DE SEU MARCADOR">NOME DE SEU MARCADOR</a>

<a style="font-size:19px;color:#FF34B3;" href="ENDEREÇO DE SEU MARCADOR">NOME DE SEU MARCADOR</a>

<a style="font-size:10px;color:#f10;" href="ENDEREÇO DE SEU MARCADOR">NOME DE SEU MARCADOR</a>

<a style="font-size:20px;color:#696969;" href="ENDEREÇO DE SEU MARCADOR">NOME DE SEU MARCADOR</a>

<a style="font-size:12px;color:#FF8C00;" href="ENDEREÇO DE SEU MARCADOR">NOME DE SEU MARCADOR</a>

<a style="font-size:20px;color:#fff;" href="ENDEREÇO DE SEU MARCADOR">NOME DE SEU MARCADOR</a>

<a style="font-size:10px;color:#ff1440;" href="ENDEREÇO DE SEU MARCADOR">NOME DE SEU MARCADOR</a>

<a style="font-size:21px;color:#CD950C;" href="ENDEREÇO DE SEU MARCADOR">NOME DE SEU MARCADOR</a>

</div>
 

  Depois de tudo pronto clique em Salvar. Arraste para onde deseja que fique e clique em Salvar alterações.
Pronto, só isso.
Gostou?
Então  compartilhe, curta, recomende! Eu fico feliz e agradecida!

Um comentário:

  1. Gostei das nuvens.
    é um enfeite lindo.
    estarei sempre de olho nas novidades

    ResponderExcluir