18 de novembro de 2012

Colocando ribbons nas postagens!

           
Ooii gente c: Saudade de vocês!Não postei ontem porque tava na casa das minhas primas, só cheguei agora e já tenho que sair!
Hoje trago um tutorial bem útil, e os créditos vão pro Cherry Bomb, e provaelmente vou começar a usar aqui c:

Vá no HTML do seju blog, aperte Ctrl + F ou F3 e procure por ]]></b:skin> 
Cole o seguinte código acima da tag:
.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*/
}
Entenda o código :
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? 
Aplique :
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.
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Gente copiei porque tô com  muita pressa!Créditos ao Cherry Bomb pelo tutorial, creditem a Liah se usarem viu ?
Beijos e até a próxima!



3 comentários:

  1. LOOOOL, que template L.I.N.D.O. adorei a dica, vou fazer uns pra usar.


    teen-bombs.blogspot.com

    ResponderExcluir
    Respostas
    1. Briigada *u* Seu lay também é liindo ^^ Os créditos são pro Cherry Bomb,não esquece viiu?

      Excluir
  2. Legal os ribbons fica bem fofos nas postagens :D
    Beeijos

    ResponderExcluir

- Não estamos mais aceitando selinhos e tags.
- Não insista : se comentar "seguindo, segue de volta?", eu vou ignorar
- Sua opinião é importante para a equipe (: Dúvidas, sugestões ou reclamações?Comente!Críticas (construtivas) também são aceitas.