29 de jul. de 2012

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 de margin-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.

                                                                                                                                   Créditos Cherry Bomb


4 comentários:

  1. Muito Obrigada você me ajudou, muito , o cherry bomb eu vi mas não entendi , e aqui você explicou tudo e eu entendi , Muito obrigada beijôs
    por favor seeg ?:
    tutoriais-para-seu-blog.blogspot.com.br/

    ResponderExcluir
  2. Hello , amei o blog e vi seu big tutorial , mas só li até a metade rs'
    Blog muito fofo já estou te seguindo segue de volta ?
    Kisses
    Isa

    blogpopsiclepink.blogspot.com

    ResponderExcluir
  3. Mas esta no perfil da minha irma !
    SORRY!
    Kisses
    Isa

    blogpopsiclepink.blogspot.com

    ResponderExcluir

Yoo cherry, espero ter gostado do post. Se quiser comentar, fique a vontade, mais antes siga estas regrinhas:

- Não aceito comentário "Seguindo, segue de volta?"
- Não fale palavrões.
- Criticas são bem vindas, desde de que sejam criticas objetivas.
- Deixe o seu blog, talvez eu queira vê-lo.
- Aceito tags e selinhos.

Espero que sigam as regras que são bem importantes.