Como colocar ribbons nas postagens

|
Cute-fashion-girl-nature-photography-favim.com-469132_large
No post ensinando a fazer um layout em estilo revista, para separar cada parte do tutorial, eu coloquei subtítulos destacados com uma ribbon, como vocês podem ver abaixo:

Para fazer isso, eu usei uma class bem simples, e vou mostrar agora para vocês como fazer. Você pode usar uma ribbon como fundo ou uma outra imagem qualquer, ou até mesmo só cor.
Vá no HTML do seu blog, aperte Ctrl+F e procure por ]]></b:skin>
Cole logo acima, este 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*/
}

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

Aplicando



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:

É isso amores, espero que tenha ficado bem explicado para vocês. Se não souberem onde achar ribbons, aqui tem um tutorial de como fazer as suas próprias, e aqui tem algumas já prontas.
Ah, e não esqueçam de creditar o CB se usarem este tutorial!
Kissus, Liah
Related Posts Plugin for WordPress, Blogger...