26/06/2015

Personalizando os Títulos e subtítulos


Yo lindos bunnie's!!! Hoje venho trazer um tutorial que é muito importante para construção de um site, mas maior parte das vezes não o arrumamos, mas quando utilizamos logo percebemos como esta totalmente fora do padrão do layout. Exatamente isso, estou falando dos Títulos e subtítulos da postagem, eu mesma não os personalizo, por gostar de diferenciar em cada postagem, mas para um blog de resenhas ou gratuitos essencial pois nunca sabemos quando alguém que baixa nossos layout vai precisar, para isso vim trazer uma postagem super rápida e pratica para vocês!
Para quem não sabe exatamente do que estou falando são esses os Títulos e subtítulos: Acesse o link abaixo;

Se você utiliza o template padrão do blog, pode ter certeza que esse código não estará dentro do seu HTML para isso precisamos aplicar. Então abra seu HTML ligue sua atenção e vamos lá! Os  códigos  que os personalizam são:

H2 - Heading: Esse é o "Título", dependendo do layout ele tem ligação com o titulo do blog, ou sidebar.  Seu código é esse:
h2 {Aplique os estilos}


H3 - Subheading: Esse é o subtítulo. Seu código é esse:
h3 {Aplique os estilos}

H4 - Minor Heading: Título secundário:
h4 {Aplique os estilos}

O título secundário é o mais simples, por isso fica melhor não colocar muitas personalizações nele, mas fica a seu gosto mexer como quiser.

1) Para aplicar vá ate seu editor de HTML. Procure por  ]]></b:skin> e acima dele cole a tag + os estilos. Como exemplo deixei um prontinho para vocês.

H4
h4 {color: #A770B7; /*Cor  da fonte*/
font-style:italic; /*Fonte em itálico*/
font-size: 18px !important; /*Tamanho da fonte*/}

H3
h3 {color: #D976A3;
text-shadow: 1px 1px 1px #A770B7; /*Coloca sombra no texto*/
font-size: 20px !important; /*Tamanho da fonte*/
font-weight: bold; /*Texto em negrito*/}

No H3 também é possível colocar uma imagem na frente, com esse código:
h3 {
 text-shadow: 1px 1px 1px #666666; /*Coloca sombra no texto*/
   background-image: url(URL_DA_IMAGEM);
   background-repeat: no-repeat;
   background-position: left center;
   padding-left: 30px;
   font-size: 20px !important; /*Tamanho da fonte*/
   font-weight: bold; /*Texto em negrito*/
}

Nenhum comentário:

Postar um comentário

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345