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?
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:
Nenhum comentário:
Postar um comentário