Colocar ribbons nas postagens

Ola menininhaas ^ ^

Hoje vou ensinar como colocar ribbons na postagens ao som da música que eu mais gosto (Chefe de Quadrilha) :D .

Não é aquele tutorial perfeito que você vai entender tudo na mais perfeita ordem, é melhor, porque é bem fácil! E o pior é que eu achava que era difícil fazer os ribbons, ai teve um slide até que eu fiz para o layout do blog de encomendas, que tem alguns ribbons, mais nada tão interessante !

Slide aquii !

Vai ser assim, nesse post vou falar como colocar, e depois eu postarei como fazer os ribbons.

Então primeiramente como sempre vá no seu HTML e procure pela famosa tag ]]></b:skin> 

E Acima cole o seguinte 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*/
}

Agora para entenderem melhor, vou explicar;

Altere tudo certinho como quiser. Em Float você vai escolher se quer o titulo alinhado a esquerda ou a direita, código esta alinhado a direita, se quiser alinhado a esquerda troque right por left.

Em margin-right você vai ajustar os valores para puxar mais para algum lado, para deixa-lo alinhado com a borda na linha certa, e como está posicionado a direita ali em cima colocamos uma margem direita negativa  

Se você decidir alinha-lo na esquerda devera deixar o valor de margin-right em 0px e colocar um valor negativo em margin-left para puxar o ribbon mais para esquerda.

Agora para aplicar siga o passos adiante

Vá em seu post, claro com as alterações salvas.

E vá no HTML da postagem e cooloque as palavras que quer destacar entre as tags <div clss=''ribbon''> e </div>  

Então é isso, qualquer coisa comentem ou me avisem  no gadget do MSN ali no lado -->>