Tutorial: Como colocar ribbons no post

Olá novamente! Neste post irei ensinar como por ribbon no post, uma das coisas mais fofinhas de todas, honestamente, quem não acham ribbon uma graça? :) Aposto que este vai ser um dos tutoriais mais úteis e legais, então prestem atenção, pois é bem fácil de aprender!

1. Procure por:

]]></b:skin>

2. Cole logo acima dele o seguinte:

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

3. Exemplo de ribbons para você usar:

 

4. Vamos entender o código um pouco melhor, ok? POR FAVOR, LEIA ESTA PARTE! Talvez se você ler você não precise ficar fazendo várias perguntas sem necessidade nos comentários, beleza? Quando você colocar o código, o ribbon vai ficar meio desordenado na página, então precisamos ajustá-lo.

1º) Caso você queira a ribbon do lado esquerdo, delete:

margin-right: -38px; /*Margem direita*/

 porque essa parte é para quem quer na direita, "right" é direita.

2º) E caso você queira a ribbon na direita delete o código correspondente da esquerda:

margin-left: 0px; /*Margem esquerda*/

3º) Você usar como o exemplo o ribbon na esquerda, ok? Então apaguei o primeiro código. Depois de apagado, o ribbon ainda não está no lugarzinho que quero, para movimentar mais para esquerda eu preciso deixar o número do lado do "margin-left" negativo:

margin-left: -80px; /*Margem esquerda*/

quanto maior o número mais para esquerda ele vai, ok? Simples! :) 

5. Agora como fazemos para aparecer a ribbon? Simples, quando você for fazer um post faça os seguintes passos:

6. Olha como fica abaixo:

Exemplo