Postador por Ely Designer as 06:53
Neste tutorial, trataremos apenas sobre as formas de personalizar os titulos dos posts.
Veremos como alterar tamanho e cor da fonte, como alinhar o texto do titulo, como configurar o tipo da fonte e como inserir bordas.
Para entender sobre a área dos títulos do post, requer que você já esteja familiarizado com os códigos referente ás postagens no seu blog e saiba sobre a personalização de fonte e texto. Se ainda não está,
Nos templates padrões, o titulo do post está representado pelas variáveis:
.post h3
.post h3 a - (link ativo)
.post h3 a:visited - (Link já visitado)
.post h3 a:hover - (Mouse em cima)
Todos os estilos que você quiser aplicar aos títulos deverão ser incluidos dentro destes trechos.
Na parte CSS dos templates padrões, as variáveis para os titulos das postagens estão da seguinte maneira:
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}
.post h3 strong, .post h3 a:hover {
color:$textcolor;
}
Personalizar o tamanho da fonte:
Por padrão, o tamanho da fonte para os títulos, está configurado em 140%.Mas você pode alterar o tamanho, basta substituir 140% pelo valor correspondente ao tamanho da fonte que você deseja.
Exemplo:
font-size:22px;
Personalizar cor da fonte:
Note que no código de exemplo postado acima, a cor do título do post está definido no Variable Definitions, que são valores que podem ser modificados diretamente no Painel "Fontes e Cores" do Blogger.A maioria dos templates existentes, como os padrões do Blogger (mínima) usam estas pré definições para o CSS, facilitando a alteração destas cores, através do painel , em "designer de modelo".
Mas você pode aplicar uma cor diretamente no trecho CSS, basta substituir $titlecolor pelo valor correspondente referente a cor que você deseja que o título do post tenha.
Exemplo:
color: #FFFFFF;
Se quiser, consulte a tabela de cores html.
Alinhamento do texto do título:
text-align:left -> titulo alinhado à esquerda.text-align:right -> titulo alinhado à direita.
text-align:center -> titulo alinhado o centro.
text-align: justify -> titulo com alinhamento justificado (faz com que o texto contido em uma linha se estenda tocando as margens esquerda e direita).
Definir tipo de fonte para o título:
Você pode definir o tipo de fonte para o título diretamente no trecho CSS, basta incluir a definição da fonte que você deseja , defina sua fonte preferida, seguindo-se de algumas alternativas para ela, e encerre a listagem das fontes com uma fonte genérica, assim se o navegador do usuário não encontrar na memória do computador a primeira fonte, usará a segunda e assim por diante.Exemplo:
font-family: 'Trebuchet MS', Arial, Serif;
O Google API disponibiliza algumas fontes diferentes que podem ser usadas no Blogger.
Definir estilo da fonte:
Estilo da fonte: normal e italic.Se você deseja que a fonte do título se apresente em itálico, devemos incluir no CSS a variável para o estilo da fonte.
Exemplo:
font-style: italic;
A fonte pode ser definida para se apresentar em negrito(bold).
Exemplo:
font-weight:bold;
Você também pode aplicar efeito sombra na fonte do título.
Exemplo:
text-shadow: 1px 2px 3px #000;
Definir Tranformação da fonte:
Você pode definir transformações da fonte do título do post no formato caixa-alta ou caixa-baixa.Para definir a propriedade de transformação de textos, você pode atribuir as seguintes variaveis:
text-transform: none; -> sem efeito.
text-transform: capitalize; -> Primeira Letra Das Palavras Maiúsculas.
text-transform: uppercase; -> TODAS AS LETRAS MAIÚSCULAS.
text-transform: lowercase; -> todas letras minúsculas.
font-variant: small-caps -> transforma letras em maiúsculas de menor altura.
font-variant: normal -> sem efeito variante.
Definir decoração da fonte:
Para a decoração do fonte do título você pode atribuir as seguintes variáveis:
text-decoration: underline; -> título sublinhado.
text-decoration: line-through; ->título com linha em cima.
text-decoration: overline; -> título sobrelinhado.
text-decoration:none; -> sem efeito.
Definir espaço entre as letras do título:
Você pode definir o espaço entre os caracteres, ou seja, o espaço que existe entre as letras do título.Exemplo:
letter-spacing:1px;
Inserir borda no título:
Se quiser acrescentar borda ao título, basta incluir no CSS a variável para borda.Exemplos:
border: 1px solid #000000 -> borda em toda área do título.
border-bottom:1px solid #000000 -> borda apenas abaixo do título.
border-top: 1px solid #000000 -> borda apenas acima do titulo.
Você também pode incluir um efeito sombreado na borda.
Exemplos:
border:1px solid #000000;
box-shadow: 5px 4px 10px #ccc;
-moz-box-shadow: 5px 4px 10px #ccc;
-webkit-box-shadow: 5px 4px 10px #ccc;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
No exemplo acima, as bordas estão arredondadas e possuem efeito sombreado.
Definir cor para plano de fundo do título:
Se quiser incluir uma cor como plano de fundo do título, basta acrescentar a linha "background" e aplicar os estilos a ela.Exemplo:
background: #CFCFCF;
Se quiser você também poderá aplicar um efeito gradiente ao background do título.
Se quiser colocar uma imagem no título do post, veja neste tutorial como colocar imagem no titulo do post.
Todos os estilos que você aplicar em .post h3, você deverá aplicá-los também em:
.post h3 a, .post h3 a:visited, .post h3 strong
Agora que você entendeu as maneiras que pode personalizar o título das postagens, veremos um exemplo com código completo a seguir:
.post h3 {
margin:.25em 0 0;
font-family: 'Trebuchet MS', Arial, Serif; /*--tipo da fonte--*/
padding:15x;
font-size:22px; /*--tamanho da fonte--*/
font-weight:bold; /*--fonte em negrito--*/
text-align: justify; /*--alinhamento justificado--*/
text-decoration:none; /*--sem decoração da fonte--*/
text-transform: uppercase; /*--tudo em letra maiúscula--*/
letter-spacing:1px; /*--espaçamento entre letras--*/
text-shadow: 1px 2px 3px #000; /*--efeito sombra na fonte--*/
font-style: normal; /*--estilo da fonte normal--*/
line-height:1.4em; /*--espaçamento entre linhas--*/
color: #FFFFFF; /*--cor da fonte--*/
border:1px solid #000000; /*--borda em volta do titulo--*/
/*efeito sombreado na borda*/
box-shadow: 5px 4px 10px #ccc;
-moz-box-shadow: 5px 4px 10px #ccc;
-webkit-box-shadow: 5px 4px 10px #ccc;
/*borda arredondada*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background:#DADADA; /*--cor de fundo--*/
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none; /*--sem decoração da fonte--*/
text-transform: uppercase; /*--tudo em letra maiúscula--*/
letter-spacing:1px; /*--espaçamento entre letras--*/
text-shadow: 1px 2px 3px #000; /*--efeito sombra na fonte--*/
font-style: normal; /*--estilo da fonte normal--*/
line-height:1.4em; /*--espaçamento entre linhas--*/
color: #FFFFFF; /*--cor da fonte--*/
border:1px solid #000000; /*--borda em volta do titulo--*/
/*efeito sombreado na borda*/
box-shadow: 5px 4px 10px #ccc;
-moz-box-shadow: 5px 4px 10px #ccc;
-webkit-box-shadow: 5px 4px 10px #ccc;
/*borda arredondada*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background:#DADADA; /*--cor de fundo--*/
}
.post h3 strong, .post h3 a:hover {
color: #000000;
}
Lembre-se, o código acima é apenas um exemplo, personalize o título do post de acordo com seu gosto e cores que combinem com seu template.
Assinar:
Postar comentários (Atom)
0 comentários:
Postar um comentário
SIGAM NO TWITTER @elydicas