Adicionando Ribbons

Olá meninas, no tutorial de hoje, vou ensinar vocês a adicionarem ribbons em suas postagens. Vocês já devem ter notado em alguns blogs , que na página de postagem existe uma imagem como se fosse um marcador de páginas para destacar o tema do  post, ou até mesmo para fazer algum outro tipo de destaque. Hoje vou ensinar para vocês como adicionar o RIBBON em seu blog. É bem fácil e deixa sua página com um visual bem legal e organizado.

Ribbon

Vamos aos passos:
No painel do seu blog, vá em MODELO depois clique em EDITAR HTML.
Lá procure por 
]]></b:skin> 
e acima cole o seguinte código:

.ribbon {/* www.mundodeblogueira.blogspot.com*/ background: url('ENDEREÇO DA SUA IMAGEM') no-repeat right; width: 270px; /*LARGURA DA SUA IMAGEM*/ height:52px; /*ALTURA DA SUA IMAGEM*/ float: right; /*Posição do título (right-direita, left-esquerda)*/ text-align: center; /*ALINHANDO TEXTO*/ font-family: Verdana; /*ESTILO DE FONTE*/ color: #fff; /*COR DE FONTE*/ font-size: 22px; /*TAMANHO DA FONTE*/ line-height: 60px; /*ALTURA DA LINHA */ margin-right: -38px; /*MARGEM DA DIREITA*/ margin-left: 0px; /*MARGEM DA ESQUERDA*/ }

Não se esqueça de fazer as alterações no código, para que seu ribbon apareça da forma correta em sua página. Para que sua imagem apareça corretamente, você precisará hospeda-la em um site de sua preferencia. Não sabe fazer isso? Não tem problema, vamos aprender. Clique aqui e saiba como.

Agora iremos adicionar o ribbon nas suas postagens.
Vá no seu post, clique em HTML, se você não sabe adicionar HTML em suas postagens, veja aqui.


Entre a palavra que você quer destacar, digite o código abaixo, alterando com a palavra que você deseja. Veja exemplo da imagem acima com a palavra  LEITURA.

<div class="ribbon"> SUA PALAVRA AQUI </div>

É isso, fácil e bem legal.