Tutorial - Como colocar Ribbons nas postagens.

Olá Cupcakes,hojet trago um tutorial de como colocar Ribbons nas postagens.Ficou curioso?Clique em "Leia Mais" e Confira!

Quem não sabe o que é isso veja o exemplo:

Vamos começar o tutorial:

1º  Vá no HTML do seu blog,aperte CTRL+F e procure por ]]></b:skin> e cole logo acima esse código:

.ribbon {background: url('url_da_imagem') no-repeat right;width: 270px; /*Largura da imagem*/height:52px; /*Altura da imagem*/float: right; /*Posição do título (right-direita, left-esquerda)*/text-align: center; /*Alinhamento do texto*/font-family: Verdana; /*Fonte*/color: #fff; /*Cor da fonte*/font-size: 22px; /*Tamanho da letra*/line-height: 60px; /*Altura da linha - coloque a altura da imagem ou numero maior*/margin-right: -38px; /*Margem direita*/margin-left: 0px; /*Margem esquerda*/}

Altere a altura e largura, fonte e etc onde se pede. Em float, você escolhe se quer o titulo alinhado a esquerda ou á direita. No código acima, está alinhado a direita (right), então se quiser alinhado á esquerda, troque right por left.

Em margin-right, você ajusta os valores para "puxar" a ribbon mais para o lado e deixá-la alinhada com a borda da área das postagens. Como ela está posicionada á direita, colocamos uma margem direita negativa, para puxá-la mais para a direita. Se você decidir alinhar á esquerda, deverá deixar o valor de margin-right em 0px e colocar um valor negativo em margin-left para puxar a ribbon mais para esquerda, entendeu?

Agora para visualizar o efeito na postagem, salve as alterações. Vá no seu post, clique em editar html (da postagem) e coloque a palavra que você quer destacar entre as tags <div class="ribbon"> e </div>, como no exemplo abaixo:

E acaba o tutorial!Se você não sabe onde achar,aqui ensina como fazer Ribbons e aqui tem alguns prontos.

Tutorial Créditos: Cherry Bomb

Beijoos galera!