Tutorial: Como Colocar Tags em Caixinhas + Aviso

Oii, tudo bom? Eu to bem sim, hoje eu trouxe um tutorial de como colocar as Tags do seu blog em caixinhas, assim:

Via: Farry Teen

Eu vi esse tutorial la no Farry Teen mesmo, ele é mega fácil e útil também, ah, o tutorial é exclusivo do Que Seja Eterno , mais a quem fez o post no FT deu uma personalizada, e eu vou fazer do mesmo jeito que ela ok? Mais chega de enrolar, e vamos pro tutorial!

1. Vá na sua HTML, e procure por <b:includable id='post' var='post'> , logo abaixo dessa Tag, cole esse Código:

<span class='post-labels' style='float:left'>
        <b:if cond='data:post.labels'>
          .
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span>

Onde está destacado de vermelho  é onde você deve alterar de acordo com o lado que você quer que a caixinha fique. Left é esquerda, center é centro, e right é direita. Aí é só alterar do jeito que preferir.

2. Agora, procure pela primeira linha do código abaixo:

<span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span>

Ao encontrar a primeira linha, tente achar o código que a acompanha, tente encontrar a ultima linha, o  </span> .Agora é só recortar esse código. Apertar o botão direito do mouse, e clicar em RECORTAR.

3. Agora acima de ]]></b:skin> cole:

/* Editado por Farryteen.blogspot.com */
.post-labels {
border-radius:10px 10px 0 0; /* borda */
font-size:14px; /* tamanho da fonte */
text-transform:uppercase;
color: transparent;
background: #000; /* cor do fundo da caixa */
width: auto;
text-align: right; /* alinhamento do texto */
font-size: 16px;
padding: 3px 8px 3px 1px;
float: right;
margin-top:-35px; /* altura da caixa */
border-top: 1px solid #000; /* cor e estilo da borda */
border-left: 1px solid #000; /* cor e estilo da borda */
border-right: 1px solid #000; /* cor e estilo da borda */
}

E Pronto, agora edite do jeito que se pede, e veja se deu certo, é meio dificil, mais fica mega lindo  não?

Ali no Mais Informações, o informações não fica dentro da caixinha, mais eu vou concertar isso, vou olhar com Alan, menino que fez o Lay ok?