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
Que bom que vc postou esse tuto *u*
ResponderExcluirVi num blog e fiquei super curiosa pra saber cm funcionava
Vou usar com ctz
Fica muito lindo o resultado, dá um ar mais profissional xDD'
ResponderExcluirVou 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/
Ameei
ResponderExcluirhttp://bomba-de-amor.blogspot.com
http://revolutionstartshere-oficial.blogspot.com.br/
aaha adivinhou meu pensamento Liah u.u
ResponderExcluirhttp://liemarieoficial.blogspot.com/
Fica bem legal usar Ribbon, o tuto é tão fácil, que agora eu aprendi a usar!
ResponderExcluirhttp://blog-mudancas.blogspot.com.br/
Que tutorial perfeito Liah! Fica lindo, sempre quis saber como você colocava essas faixinhas, obrigada!
ResponderExcluirBeijinhos,Maitê
pinkcatsflashpug.blogspot.com.br
Amei o tuto, vou utilizar nos meus blogs!
ResponderExcluirClique e navegue a vontade!Jaguars Edictions!
[aaaaa] Obriigadaa Liah nem sei como agradecer,obrigada mesmo =]
ResponderExcluir#bezoos~~> perfeitosmile.blogspot.com
Acho que isso fica lindoo mesmo, mais não coloquei em meu blog por que estou feliz com ele do jeito que está!
ResponderExcluirhttp://biscoitofrances.blogspot.com.br/
Adorei Liah!E o resultado fica lindo!
ResponderExcluirVou usar.
BEIJOS
http://modaetutorial.blogspot.com
Oi o/
ResponderExcluirO 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/
Mt legal esse tuto, ótimo para aprender html! ^^
ResponderExcluirBjs, Stardolleiras
Super útil, adorei o efeito fica muito organizado!!! Como sempre ajudou imenso Liah :)
ResponderExcluirAté breve! <3
http://sorvete--de--morango.blogspot.com/
Ówwn, que efeito fofo que as ribbons deixam né?! Ameei, fica mais 'profissional'! XD
ResponderExcluirAmoore, 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
Eu já previa que era uma DIV mas tive preguiça de criar um código CSS... heheh *-*
ResponderExcluirVou usar, arigato gozaimasu!
Banana-kisses!
Rebel Cinderella
Adorei suas dicas, parabéns, seu blog é muito fofo, bjs.
ResponderExcluirwww.girlsteensgn.blogspot.com.br
entre, conheça e SIGAAA,te esperamos la, bjs, retribuimos.
Amei o tutorial! Nem sabia que existia isso kk!
ResponderExcluirBeijos!!
http://garotavertigem.blogspot.com.br/
Já vi blogs usando, mas não sabia como usava Hihi
ResponderExcluirhttp://magic--teens.blogspot.com.br/
oiiii! Tem um selinho pra vc lá no meu blog http://meucantinhozinho.blogspot.com.br/
ResponderExcluirbjs Hellê
Amo seu blog, o divulguei numa postagem ^^ http://luluzinha-mania.blogspot.com.br/2012/07/divulgando-blogs-2.html
ResponderExcluirAmei! Vou usar ^-^
ResponderExcluirhttp://rascunhosdeumagatinha.blogspot.com.br/
Acho que fica bem bonitinho isso! Vou fazer lá no blog quando tiver tempo.
ResponderExcluirBeijos ♥
Woww!!
ResponderExcluirFica 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
Adoreiiiiii fica super lindo!
ResponderExcluirVou usar no meu proximo lay!
Bjs
imperfectsmiles-nathi.blogspot.com
Amei liah , mais poderia ensinar como coloca no titulo dos gadgets , eu nunca consigo ): ! Beijos s2
ResponderExcluirguidymania.blogspot.com
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 ♥
ResponderExcluirSmach:3 http://www.viciadasemcupcake.blogspot.com.br/
Oii linda, passa no meu blog: blogpinkgloss.blogspot.com
ResponderExcluirTe recomendei um selinho !! Quer afiliar ?? Beijoss
Nunca imaginei que fosse tão simples e fica lindo! Acho que vou usar :D
ResponderExcluirXoxo, Jubss.
http://plushrepublic.blogspot.com.br/
Oiie, amei o blog, é a postagens! Vou tentar fazer no meu rsrs!!
ResponderExcluirSe poder seguir meu blog!
http://cute-word.blogspot.com.br
gostei bastante do tutorial ^^
ResponderExcluirViver num T0
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!
ResponderExcluirNão deu :(
ResponderExcluirhttp://helenabandas1dl.blogspot.com.br/
Oi liah, eu simplesmente amei esse tutorial é bem util!!
ResponderExcluirVocê poderia postar um tutorial mostrando como se faz uma sidebar igual a do seu modelo antigo :)
brigadin:)
bjos
Vi isso em outros blogs e qria colocar no meu também, nem sequer eu sabia como se chamava!
ResponderExcluirBeijos
http://gestaopink.blogspot.com.br
meu nao deu certo
ResponderExcluirQue ótimo tutorial! Estarei usando no próximo layout do blog! Beijos <3 http://goods-sweets.blogspot.com.br/
ResponderExcluirLiah, não funcionou no meu blog. =S
ResponderExcluirFica aparecendo o texto sem a ribbon, como se eu não tivesse modificado nada..
Me ajuda!!
Beijos
Amei o poste muito bom to fazendo um layout e coloquei ele e muito bom participa do meu blogger http://tutoriaiscps.blogspot.com.br
ResponderExcluirnão tô conseguindo! olha como fica: http://4.bp.blogspot.com/-ZOJeB0oZwSU/UJ7h76V4s8I/AAAAAAAACDQ/wMLFVUDzmGA/s320/Sem+bt%C3%ADtulo.png
ResponderExcluirOlá Liah, ótimos tutos por aqui, parabéns pelo trabalho.
ResponderExcluirMe 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.
Ola Liah,
ResponderExcluirEstou 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
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
ResponderExcluirEste comentário foi removido pelo autor.
ResponderExcluir'-' não deu em nada, e eu fiz tudinho como vc mandou
ResponderExcluirOi 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.
ResponderExcluirAdorei! Estou fazendo um layout e vai ficar super!
ResponderExcluirmeumundocupcakes.blogspot.com
Ooi gente alguém pode me ajudar? eu n entendi a parte do editar o html do post, como eu faço isso?
ResponderExcluir