Ribbons nas postagens

Hooy meus anjos, hoje vou ensinar vocês colocarem ribbons nas postagens. Ribbons são aquelas faixinhas que geralmente ficam nos gadgets, mais agora você pode colocar nas postagens, show de bola né! Vamos começar:

1°. Vá no HTML do seu blog

2°. Dê um Ctrl +F e procure por ]]></b:skin>

3°. Acima dessa Tag cole o código abaixo:

.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*/
}

Entendendo

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 demargin-right em 0px e colocar um valor negativo em margin-left para puxar a ribbon mais para esquerda, entendeu?

Aplicando

Para funcionar você precisa fazer o seguinte: Quando for fazer uma postagem, clique em HTML lá encima e coloque a palavra que você quer destacar entre as Tags <div class="ribbon"> e </div> como no exemplo:

          

Bom, é isso gente. Nem é tão difícil né? Espero que tenham gostado e deixem comentários. Beijocas.