Post sobre |Dicas blog, imagem, Pc windows

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

titlulo do post do BlogSpotA 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 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 e evitar problemas, Salve ele 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

background

Veja ela ampliada apenas na largura:

imagem usada como background titulo ampliada

Essa imagem abaixo tem tamanho 352px por 1px

fundo do titulo

Veja a mesma imagem ampliada na altura:

imagem fundo do titulo

Outra imagens, porém, no tamanho original:

background título
    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:

imagem usada como background titulo ampliada 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.

titlulo do post do BlogSpot

21 comentários:

Mudar cores e fundo do título do post do BlogSpot2012-11-26T15:38:00-02:00
  1. Legal heim mano...vlw!
    vou indicar esse post no meu blog,ok!?
    qualquer problema eu retiro.
    flw

    Responder
  2. olá, gostei muito do teu blog mas,se você aumentasse um pouco o tamanho da fonte, nos não precisaríamos, usar uma lupa.

    Responder
  3. Me desculpe pelo comentário anterior, é que
    Não tinha visto o A+.Mil desculpas.

    Responder
  4. Este comentário foi removido por um administrador do blog.

    Responder
  5. # Márcio R. M.

    Sempre que for mudar algo no html, faça um backup antes, se mudou e acertou novo backup.

    O título do post pode ser alterado:

    .post h3 {

    Após essas tags você pode ver se tem um margin:
    Após encontrar veja se tem mais de 2 números separados por espaço, se estiver parecido com isso:

    margin:.2px 0 0 0;

    o primeiro número é a margem do topo e você pode aumentar o numero para aumentar a margem, outro exemplo:

    .post h3 { margin:.5em 0 0;

    o primeiro número é a margim do topo, mas perceba que tem um ponto antes dele, isso significa que .5em é uma medida pequena, e para aumentar pode ser 2.7em ou 3em que é número inteiro, ou qualquer número.

    Tive que remover seu comentário porque tinha email.

    Responder
  6. Olá!
    O único código parecido que encontrei no meu html foi esse:h3.post-title, .comments h4 {
    font:$(post.title.font);
    margin:.75em 0 0;
    }
    Gostaria muito de valorizar o título das minhas postagem e incluir a cor pink de fundo(altura um pouco maior que a fonte) pra combinar com o layout do blog, mas antes eu queria ter certeza se é nesse código acima mesmo que eu devo que mexer!

    Responder
  7. Salete Cattae

    Se você adicionar esse código abaixo, que não existe ainda no Css do Html do seu blogger, já muda o fundo do título e aumenta a fonte:

    .post h3 {background:pink; font-size:120%}


    Se você aumentar o numero de font-size aumenta a fonte em porcentagem.

    Responder
  8. Que legal! Já coloquei lá no blog e ficou lindo!!!
    Nem sei como te agradecer...Obrigada, você é o máximo!

    Beijinhos.

    Responder
  9. MUITO OBRIGADA PELO POST !!!
    Era EXATAMENTE O QUE EU PRECISAVA =D
    Parabéns pelo blog e principalmente pela boa vontade em explicar direitinho, tornando fácil o dificil, heheh;D
    Abs !!!

    Responder
  10. Pra mim ñ funcionou, fiz direitinho eu uso o template minima black deu certo ñ. mas msm assim obriga por enriquecer meu conhecimento sobre html.

    Responder
  11. Anônimo23/11/10

    e ai amigo... eu nao achei ai explicando
    eu estou querendo deixar só 1 traço e baixo do titulo ou um em baixo e um em cima... qual o codigo q uso?

    Responder
  12. Anônimo

    Vou te passar um código, mas, prefira usar um blog de teste, e, você deverá entender um pouco de Css para alterar ele, como é Css veja onde adiciona o css no blogger

    Se seu modelo é do blogger, você pode adicionar no Css um código como esse:

    h3.post-title{
    border-top:solid 2px red;
    border-bottom:solid 2px blue;}


    No código acima, a segunda linha é referente ao topo do titulo, border-top e depois tem o numero que é a espessura e a cor red que você pode substituir por um nome em inglês.

    A terceira e ultima linha é a borda de baixo, border-bottom

    Apenas se seu modelo não for do blogger, talvez o código acima não funcione, aí, tente esse:

    h3{
    border-top:solid 2px red;
    border-bottom:solid 2px blue;}

    Responder
  13. Cara gostei muito !
    mas so aperece no inicio quando eu clico na postagem não aparece
    me ajuda por favor

    Responder
  14. Alex Silva

    Alguns modelos, inclusive o que usei para testar o código, o título é um link também no post, sendo assim eu mostrei um código para aquele tipo de modelo, no seu caso isso não ocorre, então, antes de cada código que você acrescentou para mudar estilo do título, ou de alguns, você pode acrescentar o seguinte:

    .post h3,

    Isso é para o título do post que não é um link e a vírgula servirá para ele não ser confundido com o outro, veja como ficaria se eu quisesse um título vermelho para o link e não link, ou seja, na página inicial e na postagem:

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

    Você também pode criar uma personalização para o título que não é link(da postagem), veja como ficaria:

    .post h3 {color:red;}

    Responder
  15. Obrigado Consegui fazer o que eu queria cada dia que passo estou aprendendo mais!
    Graças a seu blog meu template ficou 10!
    não sou daquelas pessoa que ficam espalhando comentários dizendo:VISITEM MEU SITE!
    Mas se quiser acessar para ver como ficou, fique a vontade!

    Responder
  16. Ótimo blog e postagem.

    No entanto, em alguns blogs pode ser diferente deste código.

    No meu, por exemplo, é h2 e não 3.

    Responder
  17. gostei muito do post!
    neste blog que fiz missaoapoioyokkaichi.blogspot.com
    os posts estao aparecendo achatados p esquerda porque?
    me ajudem!!!

    Responder
  18. Não sei deve ser o modelo dele que foi criado para ser assim

    Responder
  19. Parabéns pelo blog. Muito útil.

    Responder
  20. Quero deixar os agradecimentos para esta boa dica, usei e deu certo!

    Responder

→Dê sua opinião. Faça comentário relacionado ao post.
Comentário com e-mail será excluído
Antes de perguntar leia o texto até comentários e pesquise, a resposta virá no comentário, para ser avisado use uma conta e o link: Subscribe by email(abaixo)
Será excluído comentário não relacionado ou com Url de blog/site(Divulgar? Clique)

Comentário reflete a opinião do comentarista. Desde já, Obrigado!