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