Como colocar ribbons nas postagens

Oi,Pessoal. quanto tempo que não via vocês, estavam com saudade de mim? Eu tava então gente olha só vou me apresentar numa amostra, amanhã eu não tenho aula, dai eu vou ir colocar um piercing não vejo a hora de colocar e ver como vai ficar, se der tempo eu mostro pra vocês quem ai quer ver ? Hahaha. Meu novo apelido agora é Peppa olha só que apelido bem fofo nossa. Imagine e eu chamo ele de chokito apelido fofo ne esse sim coisa linda u3u, por incrível que pareca eu passei na prova da matéria que mais odeio, eu fiquei tipo de boca aberta quando a prof falo que tinha passado quase com a nota máxima, com isso da copa agora na escola só trabalhamos com isso eu acho legal "Vou ficar sem aula uhul" daqui uns dias vou falar com vocês sobre a copa eu to até querendo fazer uma festa aqui em casa sobre a copa, tipo não vejo a hora mais também imagino se ele perde no primeiro dia. Agora vou falar da postagem coisas lindas da peppa.

Gente a postagem hoje é assim, vou postar como colocar ribbons nas postagens por que tipo não sei oque postar estava sem criatividade oque nunca tenho pra postar, mesmo assim vamos a postagem. 

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*/
}

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?


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:


Então é isso entendido ?? Gostaram ? Bem esplicado ? Kisss

6 comentários:

  1. Eu amo esse tutorial, ribbons dão um charme para o blog 'u'
    Um beijo - http://notfoundoficial.blogspot.com.br/ ♥

    ResponderExcluir
    Respostas
    1. Também acho bem legal, verdade o charme /o\
      Beijos

      Excluir
  2. Gosto desse tutorial, ribbons são bem fofos >3<
    Beijos.

    beautifulm-ind.blogspot.com.br/

    ResponderExcluir
  3. Olá, sempre ficamos com saudades <3 Enfim, eu não sou muito fã de piercings, mas fiquei curiosa quanto ao seu! Eu realmente não estou animada para a copa, todos vão estar em casa e eu estudando... Êh vida!
    O tuto tá bem explicadinho. Parabéns! Acho ribbons fofos, por mais que não use >.<
    Chuu ~~♥ || Empire Kawaii

    ResponderExcluir
    Respostas
    1. Ai coisa boa saber disso, eu já sou muito dessas coisas de tatto e piercing. Eu vou ta de ferias uhul... É A VIDA. Que bom que gostou.. Beijos

      Excluir

-Segue,Retribui? Retribuo se eu gostar do blog.
-Não Ofender ninguém.
-Não falar palavrões .
-Sempre deixar o link do seu blog para retribuir.
-Leia o post antes de comentar!
-Comentários sem conteúdo serão ignorados.
-Leio todos os comentários e respondo
♥❤∞ ☆ ★ ✖ 。◕‿◕。® ™ ☏✿゚✤
❝❞✥ ✦ ✧ ✩ ✫ ✬ ✭ ✮ ✯ ✰ ✱ ✲ ✳ ❃ ❂ ❁ ❀ ✿✼ ✻ ✺ ✹ ✸ ✷ ₪ ❃ ❂ ❁ ❀ ✿ ✾ ✽ ✼ ✻ ✺ ✹ ✸ ✷
✶ ✵ ✴ ❄ ❅ ❆ ❇ ❈ ❉ ❊ ❋ ❖(◕‿◕✿) 。◕‿◕。 ⊱✿◕‿◕✿⊰(◡‿◡✿)(◕〝◕)◑▂◐ ◑0◐ ◑︿◐ ◑ω◐ ◑﹏◐ ◑△◐ ◑▽◐
●▂● ●0● ●︿● ●ω● ●﹏● ●△● ●▽●
⊙▂⊙ ⊙0⊙ ⊙︿⊙ ⊙ω⊙ ⊙﹏⊙ ⊙△⊙