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 :  

Comentários
4 Comentários

4 comentários

avatar
admin
segunda-feira, 13 julho, 2015 ×

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

Resposta
avatar
admin
sábado, 17 outubro, 2015 ×

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

Resposta
avatar
admin
domingo, 18 outubro, 2015 ×

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

Resposta


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por seu comentário e por sua presença!

Apenas peço que leia:

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

2 - Educação sempre! Comentários com palavras de baixo calão, não serão publicados ou respondidos.

3 - Comentários não relacionados ao titulo, não serão publicados.

4 - Comente a vontade, deixe sua opinião, crítique, esclareça suas dúvidas e dê suas sugestões ou dicas sobre o assunto referente à postagem.


Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

Obrigada por seu comentário! Ele é muito importante para mim.

É proibida a reprodução total ou parcial dos artigos deste blog sem autorização|Somente terá o direito de republicar os códigos publicados dando os devidos créditos.