Como colocar ribbons nas postagens

Eii , sou eu de novo kk,então,como vão?Vou bem!Hoje estou de luto,pelo oque aconteceu ontem de madrugada(Já é 00:20)em uma boate em Santa Maria,fiquei bastante triste,bastante mesmo.Agora só torcer para que os que ficaram feridos se recuperem logo!Meu deus mais de 200 mortos que horrível!Espero que as famílias consigam enxugar as mágoas e continuar...E ainda teve gente que fez piada com isso,que horrível,queria ver se fosse com alguém da família dele.Ai sim...Ele iria ter mais respeito!

Então,hoje irei ensinar a vocês a como colocar Ribbons nas postagens do blog,é um tutorial bem simples e bem fácil de se fazer.Continue Lendo!

Veja um exemplo abaixo:

Exemplo do blog GoImagines

Então,procure por ]]></b:skin> e cole acima dessa tag o seguinte 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!

Vá na sua postagem e clique em HTML , embaixo do nome do blog.E cole <div class="ribbon"> e feche com a tag </div>.Exemplo aqui. Se você quiser ribbons,nesse tumblr tem vários ribbons!Se Quiser aprender a fazer seus próprios ribbons clique aqui. Então,gente é só!Viu como é bem fácil?Créditos ao blog Cherry Bomb!

 ~ Hannah