Mudar cores e fundo do título do post do BlogSpot

Mostrarei como mudar cores e imagem do título da postagem do BlogSpot usando Css.

Importante: Você deve tentar primeiro ver se é possível fazer o que você quer no blogger, sem o uso de códigos, veja aqui:
Mudar a cor e tamanho da fonte, cor do link e fundo do BlogSpot
Aviso, este post foi baseado em modelos de 2006 do blogger e talvez não funcione para os novos modelos(criados após 2010), e, além disso é para pessoas interessadas em aprender um pouco de Css, o que para muitos é algo difícil.

É algo bastante difícil, pois o título é também um link e mais ainda devido a muitas opções de personalização que são possíveis alterar, é bom ter uma noção de Css ou disposição para aprender. O que você aprender aqui pode ser utilizado muitas vezes para outras áreas do blogger ou na maioria das páginas Html que usam css, 80% ou mais, principalmente os estilos que estão entre-chaves{}

Se puder criar um BlogSpot para testes é bom, de preferência com o mesmo layout(modelo) que estiver usando. Muita atenção na atualização do passo 5
A postagem ficou um pouco maior do previsto, se você acha muito para ler, imagine escrever e estilizar isso tudo porque um dia inventei de escrever como aumentar a fonte do título do post, de lá até hoje não me param de perguntar como faz para mudar a cor da fonte do título do post, oooito meses depois, tai.

Tentei dividir esse post em tópicos:

• Onde mudar título do post
• Entender os códigos Css para modificar
• Cores de fonte em Css, para o título
• Cor de fundo em Css
• Colocar imagem de fundo no título do post do BlogSpot
• Mudar cores do título do post ao passar o mouse
• Problemas ou soluções

Onde mudar o título do post

A melhor alternativa, quando possível, é procurar em fontes e cores do blogger se possui essa opção, se não houver você pode fazê-la alterando o Css do Html

No blogger:
1. Clique em Modelo
2. Em seguida Editar HTML
3. Antes de começar faça um backup do seu código, clique aqui e saiba Baixar modelo completo, só por precaução, Salve em seu computador.
4. Em Editar HTML tenha cuidado com os caracteres que devem ser respeitados( ' : ; ."{} etc).

   Observe nos exemplos abaixo, onde cada caractere fica, a semelhança ou diferença entre os códigos podem demonstrar que existem certos padrões.

   
   
5. Perceba que cada propriedade(estilo) geralmente está numa linha, mas sempre termina com ponto e vírgula; e deverá continuar assim. Dentro das chaves você pode substituir códigos ou se não existir adicionar.

   Você não deve copiar esse código inteiro, mas apenas procurar se já existe em seu código os estilos que você deseja mudar ou adicionar, até porque se você adicionar mais uma vez ele irá aumentar seu código e poderá entrar em conflito com o que já existe. O melhor a fazer é entender e trabalhar ele, esse é um exemplo de cor de fonte verde
   .post h3 a {
color: green;
}

   Atualização: Você pode acrescentar(com a vírgula), o seguinte código: h3.post-title, acrescente-o exatamente antes de .post h3 a isso fará o mesmo efeito funcionar para títulos que não são links, isso porque, em alguns modelos, o título é um link para o post e em alguns isso só acontece na Home do blog e não na postagem, aí em alguns modelos ele é necessário, em outros pode fazer ficar ruim, por isso, prefira fazer isso em blog de testes.
6. Use os códigos dos exemplos bem abaixo para entender e fazer alterações no estilo de seu título, adicione ou mude de acordo com o que você quer.

   Localize no seu Html .post h3 a usando as duas teclas de atalho Ctrl + F para localizar, Se não existir você pode adicionar para alterar cores.

   
   
7. Após ter feito as alterações clique em SALVAR MODELO para Salvar as alterações.

Eu aconselho que você substitua ou 'trabalhe' um código já existente, para não aumentar muito o seu código, mas quando ainda não existir, aí você terá que adicionar, veja como adicionar códigos Css no blogger

Entender os códigos Css para modificar

Depois de entender um pouco as mudanças a que terá que fazer, a primeira coisa é encontrar esse código abaixo dentro do Html do blogger:

.post h3 a {
Mas nem todos os modelos são idênticos, portanto você deve perceber que ele pode estar um pouco diferente, veja:

.post h3 a, .post h3 a:visited, .post h3 strong {
Isso significa que mais coisas terão o mesmo estilo do título do post ou o cara que criou ele tinha tomado umas biritas. Esse acima é um exemplo de uma variação, pode haver outros parecidos, mas, o importante é encontrar .post h3 a E após o primeiro abre-chaves{ adicionar os estilos.

E entender que, .post se refere a postagem do BlogSpot, h3 nesse caso é referente ao título da postagem(post) e a refere ao link, pois no blogger o título da postagem também é um link para a própria postagem e, o que estiver { entre as chaves, são propriedades, qualidades ou estilos }

.post h3 a {propriedades, qualidades ou estilos }

Duas formas para você tentar entender:
• Você pode entenda dessa forma, no Css do blogger .post h3 a Quer dizer: Da Postagem o seu título que é link.
• Ou o mais próximo da linguagem Css:
  
  

  Postagem tem um título que é link.
  .post h3 a
  

  
  
  

Entre as chaves{ e logo após esse código acima esta o estilo do título do post e é nesse local que a gente altera as cores, uma imagem de fundo e muitas outras propriedades possíveis no css, como escolher um tipo de fonte se ainda não existir ou substituir a que já existe.

Observe esse código Css de título de post abaixo:
.post h3 a {
font-size: 1.2em;
margin-bottom: 0;
color: $titlecolor;
}

Após o abre-chaves{ cada linha é um estilo para o título do post e cada vez que um dos estilos tiver esse $ caracter indica que é possível fazer uma mudança em fontes e cores do blogger e sem uso de códigos, não é indicado mexer nessa linha, pois uma alteração nela vai tornar essa mudança sem o uso de códigos impossível. As outras linhas estão liberadas, porém é bom entender que após o caracter ponto e vírgula ; é um novo estilo.

Cores de fonte em Css, para o título

color: $titlecolor; Esse código significa cor da fonte só para o título do post de alguns BlogSpot, e se fosse como essa abaixo:
color: red; Seria cor da fonte vermelha
color: blue; Cor da fonte azul

As cores podem ser escritas em inglês como acima ou em um código Hexadecimal como esse abaixo:
color: #000000; Cor de fonte preta
color: #cccccc; Cor de fonte cinza
color: #ffffff; Cor de fonte branca

Entre chaves não pode haver dois estilos para uma mesmo elemento por exemplo dois color:
Veja errado
{
color: $titlecolor;
color: #cccccc;
}

Cores de fontes podem ser encontradas com uma busca na web por código html Hexadecimal, em fontes e cores do blogger, etc.

Cor de fundo em Css:

background:transparent; Cor de fundo transparente.
background:#cccccc; Esse código é cor de fundo cinza
Agora vou adicionar uma imagem de fundo, observe a diferença entre o código abaixo e essa linha acima, observe apenas o que foi adicionado a ele e o que já havia:

background:#cccccc URL(http://foitestado.com/imagens/background-titulo.gif);

Era apenas cor de fundo cinza, background:#cccccc e indiquei que colocaria um endereço de imagem URL e coloquei ele entre parênteses. Agora o código acima tem uma cor e uma imagem de fundo, só que a cor só vai aparecer se der algum problema e a imagem não aparecer.

Se quisesse que o código Css de título de post, mais acima tivesse imagem e cor de fundo ficaria assim:

.post h3 a {
background: #cccccc URL(http://foitestado.com/imagens/background-titulo.PNG);
font-size:1.2em;
margin-bottom: 0;
color: $titlecolor;
}

Outra coisa a ser observada a que, já que o título do post do BlogSpot ser um link ele pode já ter sido visitado pelo usuário e, você pode criar uma cor especial para esse ou querer que as cores não mudem, em ambos os casos você terá que criar um estilo Css para esse, se você não o fizer vai obedecer a algumas regras para o link padrão de seu blog ou em raros casos se não houver vai obedecer as regras do navegador do visitante.

Observe esse código Css:
.post h3 a:visited {
color:green;
}

Esse código acima quer dizer no Css, Postagem tem um título que é link que se o usuário já tiver clicado nele ou visitado a cor da fonte será green(verde)


Agora veja esse código Css:

.post h3 a, .post h3 a:visited{
color:blue;
font-size:1.2em;
}
Observe que tem uma vírgula logo após .post h3 a
Essa vírgula quer dizer que mais de uma coisa terá o mesmo tipo de estilo, Só que no caso acima os estilos usados não dizem muito, só color:blue e font-size:1.2em Então se seus links são sublinhados esse título provavelmente também será, pois ele é um link também, a menos que houvesse text-decoration:none entre as chaves no código acima, esse é só um exemplo de coisas que podem causar "problemas"

Colocar imagem de fundo no título do post do BlogSpot

Dependendo do Layout, se não houver um background você pode adiciona, se já possuir um background, nesse caso você pode substituir, mas lembrando que se tiver esse caracter $ na linha do bacground a mudança de cor de fundo dele será só com Css.

Se deseja usar imagem de fundo no título do post, deve colocar cor de fundo, se a imagem não aparecer vai ter uma cor de destaque e que seja o oposto da cor da fonte.

As técnicas abaixo servem para não deixar o tempo de carregamento do blog muito lento, essas imagens podem ser pequenas pois elas irão repetir varias vezes quando usadas como fundo do título, fazendo parecer uma única imagem grande.

As imagens que usei, essa abaixo tem tamanho 1px por 36px


Veja ela ampliada apenas na largura:




Essa imagem abaixo tem tamanho 352px por 1px


Veja a mesma imagem ampliada na altura:



Outra imagens, porém, no tamanho original:

Código usado para fundo de qualquer coisa é background: ; e junto com ele, isso quer dizer que são regras(qualidade, propriedade, estilo) para ele, então deve estar antes do ponto e vírgula.
1. uma cor a escolher
2. uma imagem URL(endereço web e nome da imagem)
3. posição da imagem
4. pra onde a imagem repete, ou não repete.

Exemplo de código de fundo com imagem:

background:#e4eff1 URL(http://foitestado.com/imagens/background-titulo3.PNG) center no-repeat;

Vou repetir.
Fundo= background:

Os códigos abaixo controlam o estilo do fundo:
1. uma cor azul= #Ee4eff1
2. imagem= URL(Aqui onde a imagem está hospedada na web)
3. posição da imagem= center
4. não repetir= no-repeat
5. fim do estilo de fundo= ;

Regras para a imagem background:

Posição:
Centro= center
Esquerda= left
Direita= right
topo= top
Base= bottom

Comportamento:
Repetir para toda parte= repeat
Repetir horizontalmente= repeat-x
Repetir verticalmente= repeat-y
Não repetir= no-repeat

Título, imagem de fundo repeat-x center
Imagem usada, ampliada, para ver melhor:

Essa imagem foi feita usando o power point, e depois copiada para o paint para deixar nesse tamanho e salvar. Isso pode ser feito, trabalhar as imagens com o que tem em seu Computador e você sabe que é possível.

.post h3 a {
background: #cccccc URL(http://foitestado.com/imagens/background-titulo2.PNG) center repeat-x;
color:#ffffff;
font-size:1.3em;
padding:4px;
display:block;
text-decoration:none;
}

display:block Serve para que o elemento ocupe a largura total, nesse caso é o link do título que está no post, então ele irá ocupar toda a largura nesse espaço.

text-decoration:none É para evitar que ele fique sublinhado, já que os links desse blog são sublinhados e o título também é um link ele iria obedecer o estilo para links se não fosse impedido de fazê-lo.

Perceba que no título do post do blog.foitestado.com as cores de fonte são as mesmas dos links, isso porque não foi dado uma cor de fonte para .post h3 a Isso também é uma questão de economia de bytes, porque colocar uma cor se posso aproveitar um estilo que já existe?

Título, center no-repeat


.post h3 a {
background:transparent URL(http://foitestado.com/imagens/background-titulo3.PNG) center no-repeat;
text-align:center;
color:orange;
padding:4px;
font-size:1.3em;
display:block;
font-weight:bold;
}

Imagem pode ser feita em um editor photo...
Esse título acima eu usei um alinhamento de texto para que ficasse melhor na imagem de fundo:
text-align:center;Alinhamento de texto no centro

Também usei um código para dar espaço suficiente para a altura da imagem, o padding é tipo um espaço a ser respeitado, ou um "escudo transparente".
padding: 4px; é mais 4 pixeis em volta do título


Título com imagem de fundo Repeat-y

.post h3 a {
background:blue URL(http://foitestado.com/imagens/background-titulo2.PNG) center repeat-y;
color:orange;
font-size:1.3em;
text-align:center;
font-weight:bold;
display:block;
}

A imagem repete verticalmente com repeat-y e o título usa text-align:center; para que o texto fique no centro, pois combina melhor com essa imagem, o ideal seria uma imagem mais larga.

font-weight:bold É negrito, ele destaca mais a letra, dependendo das cores é muito bom usar.

Percebam que não usei text-decoration:none O resultado, devido ao layout de meu blog não foi muito bom.

Mudar cores do título do post ao passar o mouse

Nesse caso você deverá observar se já existe .post h3 a:hover {
Se não existir você pode adicionar, veja um exemplo:

.post h3 a:hover {
color:red;
}

Esse exemplo faz com que a cor da fonte fique vermelha ao passar o mouse sobre o título. Você pode até adicionar uma imagem de fundo(background) como foi explicado acima para o título, porém, irá pesar mais seu BlogSpot, o fato de mudar a cor da fonte já é uma mudança na aparência e demonstra que é um link.
Outra coisa que pode dar um diferencial é colocar um font-size:1.1em para aumentar um pouco a fonte ao passar o mouse ou font-weight:bold para negrito, porém, o negrito só vai se destacar se ele não estiver em .post h3 a { e também não estiver em .post h3 {

Problemas ou soluções:

Se você quer que o título fique no centro e a imagem de fundo fique só embaixo do título você deve adicionar o text-align:center em .post h3 { E não usar display:block em nem um desses casos acima.

Como descrevi acima tem estilos que podem resolver ou causar problemas, veja alguns:
display:block; text-decoration:none; padding:0px; text-align:center; font-weight:bold;

Observe que text-decoration:none pode não funcionar se tiver text-decoration:underline e o mesmo vale para font-weight:bold que entra em conflito com font-weight:normal e outros também, perceba que antes do caracter :dois pontos tem um nome e esse não deve ser repetido para a mesmo elemento.

pode fazer o título parecer mais acima ou ao lado usando o padding, você pode especificar o espaço diferente para cada face ou lado do elemento, nesse caso título, Observe:

.post h3 a {
padding: 4px 5px 2px 6px;
}

4px O primeiro número é para o topo do elemento
5px O segundo número é o lado direito
2px O terceiro é para a sua base
6px O quarto número é para o lado esquerdo.
Os números podem ser alterados conforme sua vontade, e a imagem abaixo não tem nada de real, só mostra que a posição cada numero representa.

• Tipo de fonte para blog e site com css e html
• Mudar a fonte da descrição do blogger
• Colocar adsense acima dos posts no BlogSpot
• Aumentar o título da postagem
• Imagem e cor de fundo do blogger
• Colocar barra rolagem em div, caixa com scroll
• Mudar cor e fundo do título dos gadgets
• Barra de rolagem no post e lateral do blogger