Nuvem de marcadores em tags coloridas

Hey bunnie's! Como vão? Ando bastante sumida não é? Infelizmente ando bastante sem tempo... e não tenho conseguido da os devidos cuidados ao blog. Mas fiquem tranquilos eu posso sumir um tempinho mas sempre voltarei. rs Então vamos lá! Dando continuidade ao marcadores em forma de nuvem, hoje venho trazer um um tanto fofinho e bem colorido, é possível usa-lo de duas formas. Deixarei um link para verem o efeito dos marcadores espero que gostem.

Brevia do efeito

O modelo se encontra no rodapé do blog. O efeito hover dele é bem simples. Agora abaixo você pode ver o exemplo dos dois modelos. Vamos ao tutorial?

Modo 1

Modelo 2

1. Vá até o HTML do seu blog, clique dentro da área do código e ative a pesquisa selecionando Ctrl+F, agora pesquise por  ]]></b:skin>, assim que achar acima dele cole o código abaixo:

Códigos

.cloud-label-widget-content {
text-align: left;
}
.label-size {
background: #5498C9;
border-radius: 5px;
display: block;
float: left;
margin: 10px 6px 3px 0;
color: #fff;
font-family: &#39;Arial&#39;,&quot;Segoe UI&quot;,Arial,Tahoma,sans-serif;
font-size: 11px;
text-transform: uppercase;
}
.label-size:nth-child(1) {
background: #F53477;
}
.label-size:nth-child(2) {
background: #89C237;
}
.label-size:nth-child(3) {
background: #44CCF2;
}
.label-size:nth-child(4) {
background: #01ACE2;
}
.label-size:nth-child(5) {
background: #94368E;
}
.label-size:nth-child(6) {
background: #A51A5D;
}
.label-size:nth-child(7) {
background: #555;
}
.label-size:nth-child(8) {
background: #f2a261;
}
.label-size:nth-child(9) {
background: #00ff80;
}
.label-size:nth-child(10) {
background: #b8870b;
}
.label-size:nth-child(11) {
background: #99cc33;
}
.label-size:nth-child(12) {
background: #ffff00;
}
.label-size:nth-child(13) {
background: #40dece;
}
.label-size:nth-child(14) {
background: #ff6347;
}
.label-size:nth-child(15) {
background: #f0e68d;
}
.label-size:nth-child(16) {
background: #7fffd2;
}
.label-size:nth-child(17) {
background: #7a68ed;
}
.label-size:nth-child(18) {
background: #ff1491;
}
.label-size:nth-child(19) {
background: #698c23;
}
.label-size:nth-child(20) {
background: #00ff00;
}
.label-size a, .label-size span {
display: inline-block;
color: #fff !important;
padding: 4px 10px;
font-weight: normal;
}
.label-size:hover {
background: #222;
}
.label-count {
white-space: nowrap;
padding-right: 3px;
margin-left: -3px;
background: #333;
color: #fff ;
}
.label-size:hover .label-count, .label-size:focus+.label-count {
background-color: #ff6bb5;
}

2. Vá em Layout e clique em "Adicionar um Gadget", vai abrir uma pequena janela. Nela procure por "Marcadores. Vai aparecer algo similar a isso (dependendo da atualização do blogger pode estar diferente, mas as configurações são sempre a mesma):

Agora vamos configurar o gadget, vamos mexer somente em "Exibir". Em Exibir, selecione "Cloud", e salve! O modelo vai ficar exatamente como na primeira imagem. Se quiser que fique como na segunda imagem com numero de postagem ao lado clique na caixinha seguida do texto Mostrar o número de postagens por marcador. Prontinho! Agora é só ver o resultado! Créditos ao site: Elaine Gaspareto.