Faixa nos títulos dentro das postagens - Ribbons | Quero Dicas Quero Dicas : Faixa nos títulos dentro das postagens - Ribbons

Quero Dicas : Faixa nos títulos dentro das postagens - Ribbons

Faixa nos títulos dentro das postagens - Ribbons

| |


Ribbons - Faixa para títulos dentro das postagens

Vamos aprender a colocar uma faixazinha dentro das postagens, iguais as que eu coloco aqui no quero dicas?

Ela é ideal para separar e destacar seus títulos e textos, assim como se fossem um marcador dentro das páginas, como eu faço nos meus "Tutoriais". Ainda não sabe do que falo? Então veja:

↓ Esta faixa é uma Ribbons ↓
     Escreva aqui o que desejar 



Vamos ao tutorial

1 - Entre no HTML do seu blog e procure por

 ]]></b:skin> 
 


2 - Acima dela, cole o código abaixo.

.ribbon {/* Veja mais em - www.querodicasde.blogspot.com */
background: url ('ENDEREÇO DE IMAGEM') no-repeat right;
width: 270px; /*LARGURA DA IMAGEM*/
height:52px; /*ALTURA DA IMAGEM*/
float: right; /* POSSIÇÂO DO TÌTULO (right-direita, left-esquerda)*/
text-align: center; /*ALINHANDO TEXTO*/
font-family: georgia; /*ESTILO DA FONTE*/
color: #fff; /*COR DA FONTE*/
font-size: 18px; /*TAMANHO DA FONTE*/
line-height: 60px; /*ALTURA DA LINHA */
margin-right: -38px; /*MARGEM DA DIREITA*/
margin-left: 0px; /*MARGEM DA ESQUERDA*/
}
 
 

Veja na imagem
 

3 - Agora crie uma imagem e a hospede na Web.

Não sabe como hospedar?, sem problemas, veja uma das postagens e aprenda:
► Como hospedar uma imagem gratuitamente na Web para seu blog
► Como hospedar suas imagens no seu próprio blog

4 - Na parte dentro do código escrito "ENDEREÇO DE IMAGEM", será o local de você colocará a url da sua imagem já hospedada. No final do post, tem algumas imagens que você pode usar.

Faça as alterações desejadas no código que deixei descritas ao lado.
Afinal, queremos o seu Ribbons aparecendo direitinho em sua página, não é? 
DICA: Para ficar mais fácil, faça o passo 2, antes do 1. Assim você poderá fazer as alterações necessárias, sem precisar voltar ao html do seu template novamente.
     PASSO 2

Agora vamos adicionar a "faixinha" na sua postagem.

1 - Depois do seu código estar devidamente ajustado, vá na postagem ou se preferir, crie uma nova.

Onde você quiser destacar o trecho (de preferencias, títulos), cole o código abaixo, dentro do HTML da postagem e altere o que está escrito "Seu Texto", por suas palavras.

 <div class="ribbon">
SEU TEXTO </div> 

Pronto! fácil, não é? 
Beijinhos ♥

Aqui algumas imagens rápidas, que você pode usar





Me Contrate!



Compartilhe

* Você reservou um tempinho para comentar? *

Desde já agradeço!

Devido a falta de tempo, não prometo responder a todos os comentários. Mas farei o possível!


4 comentários:

  1. Respostas
    1. Se você colocou no local certo e, principalmente, o endereço da sua imagem está correta. Ajuste a largura e o tamanho e a margem, principalmente a margem. Dependendo do seu layout tem que ser feito ajustes para que ele possa ser visualizado.
      Outra coisa muito importante. Caso você tenha colocado alguma outra modificação acima de ]]>, com um nome "fecha" ou similar a isso, não ira aparecer, dessa forma todas as suas modificações agora deverão ser adicionadas ACIMA desse código chamado "fecha"

      Espero que tenha entendido e ajudado

      Excluir
  2. Olá, posso fazer uma pergunta? eu tenho um blog literário e sempre coloco quotes de livros nas resenhas, eu gostaria de destacar esses trechos e achei essa dica bem legal, mas minha dúvida é a seguinte: cada novo post eu tenho que editar o html do blog ou só colocar o código do passo 2 na postagem? Obrigada

    ResponderExcluir
    Respostas
    1. Olá Beatriz.
      você só vai precisar adicionar o passo 2 dentro das postagens. :-d

      Excluir

Amigos do Blog

agenda dos blogs Universo das Dicas

Ganhe Visitantes | Inscreva-se!

GeraLinks Linkicha Atoananet Linkirado
subir