Como destacar a primeira letra da postagem ou Gadgets colorida | Quero Dicas

Quero Dicas : Como destacar a primeira letra da postagem ou Gadgets colorida

Como destacar a primeira letra da postagem ou Gadgets colorida

|


O tutorial de hoje é ensinar como destacar a primeira letra da postagem do seu blog ou do seus gadgets.

Esse tipo de destaque fica bem legal, principalmente em casos de artigos grandes. Veja na imagem abaixo como poderá ficar. Claro, você poderá alterar a cor da fonte.




Este é o destaque no texto da postagem ↓



Este é o destaque nos texto nos Gadgets ou Widgets↓


Se preferi, clique nas imagens para ampliar


Agora que você já sabe o que é, e como fica. Vamos dar destaque a primeira letra da postagem do seu blog ou de seus Textos, Gadgets ou Widgets? Escolha um ou os dois, nos códigos abaixo.
É muito fácil e rápido.


  TUTORIAL


Como sempre recomendo: Faça um backup do seu template, ao instalar qualquer tipo de implementação de códigos dentro do HTML do seu blog e claro, dê preferências a blogs de teste! Não sabe fazer Backup? Não tem problema, Veja este tutortial: Como fazer um Backup ou restauração do seu template

1 - Acesse o painel do seu blog

2 - Vá em "Modelo" e "Editar HTML"

3 - Procure por:

 ]]></b:skin> 
 

4 - Quando encontrar. cole acima dela um dos código abaixo.
Pode adicionar os dois se quizer!
  DESTAQUE NO POST


 Grande {font-size:50px; 
font-style: bold;
color:#FF3E96;
line-height:30px;
float:left;}

PERSONALIZANDO
• font-size:50px; - Aumente ou diminua a fonte se quiser
• font-style: bold; - Se não quiser em negrito, troque por "none" (normal)
• color:#FF3E96; - Troque pela cor que desejar - Tabela de cores: AQUI
• line-height:30px;  - Distância do texto

Para utilizar o efeito em sua nova postagem, entre e adicione no HTML na hora de escrever a postagem e na primeira letra do post entre o código <Grande> e </Grande> 

 <grande> Primeira letra do post aqui dentro </Grande> 
 

Salve e pronto!

  DESTAQUE NOS GADGETS


 h2:first-letter {font-size: 200%; color:#FF3E96;}


PERSONALIZANDO
• {font-size: 200%; - Aumente ou diminua a fonte se quiser
• color:#FF3E96; - Troque pela cor que desejar - Tabela de cores: AQUI

Salve e pronto!

Beijinhos



Eu aprendi este código a muito tempo atras e infelizmente não me lembro onde. Caso seja você o autor, me avise que darei seus devidos créditos. =D

Compartilhe


Nenhum comentário:

Postar um comentário

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

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.

Beijinhos ♥


Divulgue o seu Blog

Agenda dos Blogs - Blog de divulgação de blogs

Agregadores e Amigos

Atoananet Linkirado Linkicha GeraLinks Universo das Dicas
subir