Ribbons são aquelas faixinhas que geralmente ficam nos gadgets, mais agora você pode colocar nas postagens. 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*/
}
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
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.
