Faixa para títulos dentro das postagens - Ribbons | Quero Dicas | Tutoriais para seu blogs


Faixa para títulos dentro das postagens - Ribbons

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 as páginas, como eu faço nos meus "Tutoriais".
Ainda não sabe do que falo? Então veja:





↓ Esta faixa é uma Ribbons ↓
     PASSO 1 

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 é? (risos)
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 um trecho (de preferencias a 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!

4 comentários

Clique e deixe seu comentários
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
avatar
admin


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por sua colaboração.

Comente. Mais peço que leia antes:

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 xingamentos entre outros, não serão publicados ou respondidos.

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

4 - Comentários somente URLs de terceiros, não serão publicados.

♥ - Caso queira divulgar seu blog gratuitamente, Acesse, Galeria de Blogs
♥ - Eu terei o maior prazer em colocar o link ou seu banner nesta galeria.

Muito obrigada por seu comentário e por sua vista.
Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

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