Como colocar ribbons nas postagens

|
Cute-fashion-girl-nature-photography-favim.com-469132_large
No post ensinando a fazer um layout em estilo revista, para separar cada parte do tutorial, eu coloquei subtítulos destacados com uma ribbon, como vocês podem ver abaixo:

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?

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. Se não souberem onde achar ribbons, aqui tem um tutorial de como fazer as suas próprias, e aqui tem algumas já prontas.
Ah, e não esqueçam de creditar o CB se usarem este tutorial!
Kissus, Liah

47 comentários

  1. Que bom que vc postou esse tuto *u*
    Vi num blog e fiquei super curiosa pra saber cm funcionava
    Vou usar com ctz

    ResponderExcluir
  2. Fica muito lindo o resultado, dá um ar mais profissional xDD'
    Vou usar com certeza no novo layout que estou fazendo. Seus tutos são ótimos como sempre Liah :3

    Kisses <3
    http://paradise--days.blogspot.com.br/

    ResponderExcluir
  3. Ameei

    http://bomba-de-amor.blogspot.com
    http://revolutionstartshere-oficial.blogspot.com.br/

    ResponderExcluir
  4. aaha adivinhou meu pensamento Liah u.u


    http://liemarieoficial.blogspot.com/

    ResponderExcluir
  5. Fica bem legal usar Ribbon, o tuto é tão fácil, que agora eu aprendi a usar!

    http://blog-mudancas.blogspot.com.br/

    ResponderExcluir
  6. Que tutorial perfeito Liah! Fica lindo, sempre quis saber como você colocava essas faixinhas, obrigada!
    Beijinhos,Maitê
    pinkcatsflashpug.blogspot.com.br

    ResponderExcluir
  7. [aaaaa] Obriigadaa Liah nem sei como agradecer,obrigada mesmo =]

    #bezoos~~> perfeitosmile.blogspot.com

    ResponderExcluir
  8. Acho que isso fica lindoo mesmo, mais não coloquei em meu blog por que estou feliz com ele do jeito que está!

    http://biscoitofrances.blogspot.com.br/

    ResponderExcluir
  9. Adorei Liah!E o resultado fica lindo!
    Vou usar.
    BEIJOS

    http://modaetutorial.blogspot.com

    ResponderExcluir
  10. Oi o/
    O tuto fico muito bom e bem explicadinho(como sempre ficam '-').
    E realmente fica muito lindo esses ribbons, mas eu acho que no meu blog não ficaria muito legal não :/
    Beijos

    http://www.thifanygrgomes.blogspot.com.br/

    ResponderExcluir
  11. Mt legal esse tuto, ótimo para aprender html! ^^
    Bjs, Stardolleiras

    ResponderExcluir
  12. Super útil, adorei o efeito fica muito organizado!!! Como sempre ajudou imenso Liah :)

    Até breve! <3
    http://sorvete--de--morango.blogspot.com/

    ResponderExcluir
  13. Ówwn, que efeito fofo que as ribbons deixam né?! Ameei, fica mais 'profissional'! XD

    Amoore, quero te convidar pra participar do concurso que o meu blog tá fazendo. Ele se chama Forever Young, e enviando uma foto ou vídeo você concorre a um pen drive de 8Gb ou uma camiseta personalizada! Acesse o site e saiba mais: http://concursoforeveryoung.tk

    ResponderExcluir
  14. Eu já previa que era uma DIV mas tive preguiça de criar um código CSS... heheh *-*
    Vou usar, arigato gozaimasu!

    Banana-kisses!
    Rebel Cinderella

    ResponderExcluir
  15. Adorei suas dicas, parabéns, seu blog é muito fofo, bjs.

    www.girlsteensgn.blogspot.com.br

    entre, conheça e SIGAAA,te esperamos la, bjs, retribuimos.

    ResponderExcluir
  16. Amei o tutorial! Nem sabia que existia isso kk!

    Beijos!!
    http://garotavertigem.blogspot.com.br/

    ResponderExcluir
  17. Já vi blogs usando, mas não sabia como usava Hihi

    http://magic--teens.blogspot.com.br/

    ResponderExcluir
  18. oiiii! Tem um selinho pra vc lá no meu blog http://meucantinhozinho.blogspot.com.br/
    bjs Hellê

    ResponderExcluir
  19. Amo seu blog, o divulguei numa postagem ^^ http://luluzinha-mania.blogspot.com.br/2012/07/divulgando-blogs-2.html

    ResponderExcluir
  20. Amei! Vou usar ^-^
    http://rascunhosdeumagatinha.blogspot.com.br/

    ResponderExcluir
  21. Acho que fica bem bonitinho isso! Vou fazer lá no blog quando tiver tempo.

    Beijos ♥

    ResponderExcluir
  22. Woww!!
    Fica show assim!
    Eu adorei, na verdade quase ultilizei algo parecido, mas acabei optando por só css no destaque dos titulos dentro do post (é por que já tenho muita imagem no blog rs)

    bjãooo

    ResponderExcluir
  23. Adoreiiiiii fica super lindo!
    Vou usar no meu proximo lay!
    Bjs

    imperfectsmiles-nathi.blogspot.com

    ResponderExcluir
  24. Amei liah , mais poderia ensinar como coloca no titulo dos gadgets , eu nunca consigo ): ! Beijos s2
    guidymania.blogspot.com

    ResponderExcluir
  25. Nossa Liah, mais uma vez acertou no tutorial, quase me matei procurando. Amei, dos blogs que procurei aqui foi o mais explicado, agora entendi certinho. Beijos ♥
    Smach:3 http://www.viciadasemcupcake.blogspot.com.br/

    ResponderExcluir
  26. Oii linda, passa no meu blog: blogpinkgloss.blogspot.com
    Te recomendei um selinho !! Quer afiliar ?? Beijoss

    ResponderExcluir
  27. Nunca imaginei que fosse tão simples e fica lindo! Acho que vou usar :D
    Xoxo, Jubss.
    http://plushrepublic.blogspot.com.br/

    ResponderExcluir
  28. Oiie, amei o blog, é a postagens! Vou tentar fazer no meu rsrs!!
    Se poder seguir meu blog!
    http://cute-word.blogspot.com.br

    ResponderExcluir
  29. Cara sinceramente vc é demais amei esse tuto eu tava louco para saber como era e vc me mostrou como era vc é o melhor blog de todos obg liah!

    ResponderExcluir
  30. Não deu :(
    http://helenabandas1dl.blogspot.com.br/

    ResponderExcluir
  31. Oi liah, eu simplesmente amei esse tutorial é bem util!!
    Você poderia postar um tutorial mostrando como se faz uma sidebar igual a do seu modelo antigo :)
    brigadin:)
    bjos

    ResponderExcluir
  32. Vi isso em outros blogs e qria colocar no meu também, nem sequer eu sabia como se chamava!

    Beijos

    http://gestaopink.blogspot.com.br

    ResponderExcluir
  33. Que ótimo tutorial! Estarei usando no próximo layout do blog! Beijos <3 http://goods-sweets.blogspot.com.br/

    ResponderExcluir
  34. Liah, não funcionou no meu blog. =S
    Fica aparecendo o texto sem a ribbon, como se eu não tivesse modificado nada..
    Me ajuda!!

    Beijos

    ResponderExcluir
  35. Amei o poste muito bom to fazendo um layout e coloquei ele e muito bom participa do meu blogger http://tutoriaiscps.blogspot.com.br

    ResponderExcluir
  36. não tô conseguindo! olha como fica: http://4.bp.blogspot.com/-ZOJeB0oZwSU/UJ7h76V4s8I/AAAAAAAACDQ/wMLFVUDzmGA/s320/Sem+bt%C3%ADtulo.png

    ResponderExcluir
  37. Olá Liah, ótimos tutos por aqui, parabéns pelo trabalho.
    Me diz uma coisa: Como criar uma imagem com esse efeito tipo papel dobrado? Há tempos que procuro um tutorial pra fazer isso no photoshop ou qualquer outro programa e não encontro. Se puder me ajudar ficarei muito grato.

    ResponderExcluir
  38. Ola Liah,
    Estou criando um blog novo mais nao sei o q acontece comigo pq na hora de editar a html nunca da certo ..faço o tutorial certinho e na hora de visualizar da erro ...como ]]> falta fechar a tag sei lah..me ajude pq eu nao estou conseguindo

    ResponderExcluir
  39. Nossa muito obrigada liah, você sempre está com tutoriais, ótimos para os nossos blogs, além do mais que eu começei um, e fui inspirada no teu blog, e no depois dos quinze :D

    ResponderExcluir
  40. Este comentário foi removido pelo autor.

    ResponderExcluir
  41. '-' não deu em nada, e eu fiz tudinho como vc mandou

    ResponderExcluir
  42. Oi Cherry. Eu consegui td, até ajustar o quanto eu queria o ribbon para a esquerda, só não consegui escrever alguma coisa abaixo dele no post, para fazer tipo uma lista. As linhas ficam desalinhadas em cima, e não consigo escrever nada abaixo do ribbon. Obrigada.

    ResponderExcluir
  43. Adorei! Estou fazendo um layout e vai ficar super!

    meumundocupcakes.blogspot.com

    ResponderExcluir
  44. Ooi gente alguém pode me ajudar? eu n entendi a parte do editar o html do post, como eu faço isso?

    ResponderExcluir