31 de ago de 2012

Como colocar ribbons nas postagens!

Cute-fashion-girl-nature-photography-favim.com-469132_large
Iai leitores que moram logo ali!! Tudo bem?? Lembrando que faltam só 2 seguidores para cumprir a minha meta. Gentee me ajuda! Voltando ao assunto venho com mais um tutorial retirado do Cherry Bomb (créditos) ensinando como colocar ribbons nas postagens, querem ver mais leiam o resto post:

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 direitanegativa, 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



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.

4 comentários:

  1. Adoooorei o tutorial ^^

    http://manguitarosa.blogspot.com.br/

    beiiijos

    ResponderExcluir
  2. Olá gostaria amei seu blog,
    muito liindo (xonei!)
    Então gostaria de virar afiliado td bem?
    Também te coloco nos afiliados!!
    Kissus!
    animesdreamsoficial(.blogspot.com)

    ResponderExcluir
  3. Olá gostaria amei seu blog,
    muito liindo (xonei!)
    Então gostaria de virar afiliado td bem?
    Também te coloco nos afiliados!!
    Kissus!
    animesdreamsoficial(.blogspot.com)

    ResponderExcluir
  4. Olá gostaria amei seu blog,
    muito liindo (xonei!)
    Então gostaria de virar afiliado td bem?
    Também te coloco nos afiliados!!
    Kissus!
    animesdreamsoficial(.blogspot.com)

    ResponderExcluir


- Antes de qualquer coisa, fale um pouco da postagem.
- Não desrespeite ninguém e nem o blog!
- Aceito criticas construtivas.
- NÃO aceito APENAS: Seguindo, segue de volta?