Post sobre |Dicas blog, Pc windows

Mudar a cor e tamanho da fonte, link, e fundo do blogger

Vou mostrar como mudar o tamanho e a cor de letra, link, fundo do BlogSpot e também a cor da navbar.

Algo que para alguns é muito simples, mas pra quem está iniciando, saber como fazer essas mudanças no blogspot, pode ser complicado.

Isso não é possível para quem usa um modelo clássico(antigo), entenda o que é, por que mudar e como nesse post: Mudar modelo do blogger para layout

Atualização 2010: A opção de Mudar Cores e fontes do blogger mudou, clique aqui

Para mudar as cores da fonte(letra), dos links, a cor de fundo e título do seu blog, assim como estilo e tamanho da fonte é tudo na mesma página do blogger.
Siga esses passos:
  • Acesse o blogger.com e depois de ter feito login, ou procure o link Painel.
  • Procure o link Layout e clique.
  • na página que abrir procure o link Fonte e cores. Irá a uma página com a aparência parecida com as 2 imagens abaixo.
  • Vai ter um menu a esquerda da página onde é possível escolher as opções e ao lado as cores ou estilos disponíveis, fazer as mudanças que você quiser, e, visualizá-las.
  • Pra concluir clique em SALVAR AS ALTERAÇÕES ou se não gostou LIMPAR EDIÇÕES.
Cores da fonte, cor de fundo e cor do título do blogger[imagem ultrapassada]
A imagem abaixo mostra a opção de mudar a letra(fonte), aumentar e diminuir a fonte e seu tipo.
O tamanho da letra do blogspot já tem um bom tamanho, você pode mudar isso, mas, uma fonte muito maior ou muito menor, pode ficar desconfortavel para muitas pessoas.
Como mudar o tamanho e estilo da fonte do blogspot[Imagem ultrapassada]

Mudar o estilo ou cor da navbar do BlogSpot:

  • Depois de logado acesse blogger.com ou procure o link Painel.
  • Procure o link Design e clique.
  • Procure o link Elementos da página, clique.
  • Procure por navbar, observe que próximo ao nome(navbar) tem um link editar, clique, na janela que abrir escolha uma cor e clique em SALVAR e depois SALVAR na janela que está aberta.
onde e como mudar a cor da navbar do blogger
Não é aconselhável usar o a tag css DISPLEY: NONE para esconder a navbar, ela irá continuar tendo o mesmo peso para o carregamento do blogger e você tira a opção boa de busca no seu blog, se um visitante viu um post seu, e, lembra de parte de uma frase; a busca da navbar poderá ser mais útil que outra pesquisa.
Apartir daqui é só para quem já possui um bom conhecimento em CSS e HTML, e só mostra uma das opções de criar forma de permitir ao usurário personalizar as cores usando o blogger, porém, não tem como explicar como fazer as alterações pois cada modelo é diferente.

Nem todos os modelos do blogger tem todas as opções, alguns não tem mudar cor de fundo. Você pode mudar o modelo, ou...

Isso pode ser corrigido, usando a opção Editar HTML do blogger; mas, é bom um pouco de dedicação e persistência.

Se você optar por esse procedimento faça um backup de seu código antes, ou crie um blog pra testes.

Para usuário "avançado", são mudanças que podem ser desfeitas se você fizer um backup(salvar seu código antes).

Por exemplo se o modelo que você escolheu não tem como mudar a cor de fundo dos posts, esse código vai criar a opção:

<Variable name="mainBgColor" description="Main Background Color" type="color" default="#ffffff" value="#ffffff">

Ele deve ser colocado no HTML, abaixo desse trecho de código css:
/* Variable definitions
==================


E, também é necessário encontrar esse código:
#outer-wrapper {
e inserir ou substituir o background existente por:

background: $mainBgColor;

O código ficaria parecido com isso:

#outer-wrapper {
margin: 0 auto;
border: 0;
width: 692px;
text-align: $startSide;
background: $mainBgColor;
font: $bodyFont;
}



Se houver uma imagem em background, essa pode se sobrepor a cor de fundo não permitindo a visualização de sua mudança(uma forma de saber pode ser testando)

#outer-wrapper {
margin: 0 auto;
border: 0;
width: 692px;
text-align: $startSide;
background: $mainBgColor url(http://www.blogblog.com/moto_son/innerwrap.gif) repeat;
font: $bodyFont;
}


Outros problemas podem ocorrer com mudanças feitas em seu código HTML anteriormente, ou, se você pegou um template da web que não tem essas opções.

35 comentários:

Mudar a cor e tamanho da fonte, link, e fundo do blogger2008-10-10T05:23:00-03:00
  1. nao sei pq mais mesmo assim nao consigo mudar a cor da fonte e nem fundos das caixas de text nem nada , realmente estranho .

    Responder
  2. Seu modelo é fornecido pelo blogger Gaara Kazekage?

    Já percebi alguma impossibilidade com alguns modelos do blogger, e, dependendo das mudanças que a pessoa fizer no html do seu blogspot algumas funções podem ser "perdidas".

    Mas é fato a questão, por exemplo, de alguns modelos(templates) do blogger já vir sem a possibilidade de mudar a cor de fundo, mas ainda vou melhorar esse post e mostrar como incluir algumas dessas funções, mas, isso deverá ser feito usando o HTML do blogger

    Responder
  3. não consigo mudar o tamanho da fonte na descrição do blog e título das postagens mesmo usando as opções de fontes e cores. Parece que no mesu caso não obedeçe as mudanças.

    Responder
  4. Anônimo16/12/08

    como faço para colocar figuras animadas no mu blog? e onde posso encontrar essas figuras?

    Responder
  5. Obrigado pelos comentários.

    Standeuter
    Perceba que geralmente quando você aumenta a fonte do seu BlogSpot usando a página do blogger indicada acima, Fonte e cores, aumenta com ela todas as outras, título, descrição...
    Mas mesmo assim se não fica do tamanho que você quer, tem a opção de mudar o css.
    Tente ler e entender esses endereços abaixo:

    Tamanho da fonte do título do post Css:
    http://blog.foitestado.com/2009/01/aumentar-diminuir-o-titulo-da-postagem.html

    Tamanho e cor da fonte descrição do BlogSpot Css:
    http://blog.foitestado.com/2009/01/mudar-fonte-da-descrio-do-blogger.html

    Anônimo Figura animada no blogger leia:

    http://facilefunciona.blogspot.com/2009/01/colocar-figura-animada-no-blog.html

    Responder
  6. estou c o mesmo problema de Gaara Kazekage, n consigo mudar a fonte e nem a co.. alguma sugestao?

    Responder
  7. U curioZo, Eu olhei seu blogger, ele não parece original do blogger, talves você o conseguiu em um site de templat-e, se ele vir sem algumas tags especificas, mudar fontes, cores e tamanho da fonte pode não ser possivel usando o blogger, nesse caso é só no css do html mesmo. Porém isso não vale para todos, pois alguns inserem as tags "corretamente" e isso é possivel, assim como tem alguns modelos do blogger com mais opções.

    Responder
  8. nao entendi como poe imagem

    Responder
  9. Olá, Michelle Noronha.

    Esse post tem a função de mostrar uma das facilidades do blogger, porém, existem outras.

    Esse link o leva a um post que mostra como por uma imagem no topo do BlogSpot(logotipo) atrás ou no lugar do título do blog, sem o uso de código.

    Já, uma imagem de fund-o no blogger só tendo uma noção de Css, ou empenho para aprender e testar, Criei esse post(http://blog.foitestado.com/2008/12/imagem-e-cor-de-fundo-do-blogger.html), nele tem 4 páginas de exemplo, sei que pode ser difícil, mas...

    Responder
  10. Adorei a dica. Tive que fazer um Blog para meu Curso de Pedagogia valendo Nota de Estágio I...agora vai ficar a minha cara.
    bjos!

    Responder
  11. Os Blogger Templates não tem o hack para mudança de fontes e cores. Em alguns é possível trocar direto no html, porém em outros é impossivel encontrar. Necessito trocar a cor de link, testei a mudança em todos os lugares possíveis. É possivel adicionar o hack fontes e cores no html e ele abrir editor layout/fontes e cores?
    Desde já obrigado

    Responder
  12. Ola, vi a materia que escreveu sobre o Layout, mas meu blog nao tem isso.
    como faço então para mudar?
    e como faço para tirar o HTML do meu link?
    Obrigada.

    Responder
  13. Obrigado pelos comentários

    Marcia Bispo
    desculpe a demora em te responder aqui
    O que você quer depende de um código parecido com esse acima.
    É impossível criar um Hack que funcione em todos os templates, devido as diferenças de cada modelo, e como você usa um template da web, é mais difícil ainda.
    No seu caso e parecidos talvez seria melhor usar o css simples para mudar a cor, pois usaria um código menor, e isso é bom, por que a página fica mais leve um pouco.

    Ooops
    A unica opção para o que você me relata é que talvez você não esteja usando linguagem português(brasil) no Painel do blogger.

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

    Responder
  15. O meu antigo layout não quer sair por nada da página , fui trocar e adicionar um template e aí o layout ficou por baixo e agora posso mudar o que for que ele não sai de lá, na verdade agora tenho tentado colocar alguns layouts novos ou templates novos e diz que minha formatação está errada. Não sei o que fazer, pode me ajudar? gostaria de colocar um template ou layout novo. Grata e esperando resposta!

    Responder
  16. Juliana

    Talvez você não tenha removidoo códigoanterior ou não adicionou ocódigopor completo, existem varias coisas que podem causar problemas quanto o que você citou, veja mais nesse post:Atualizar o modelo do blogger

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

    Responder
  18. brigadinho mas tem uma duvida ainda podem min ajudar?

    Responder
  19. Jude Almeida

    Pesquise suas duvidas na web, se for muito difícil para você, pode pedir para alguém de sua familia ou amigos conhecidos lhe ajudarem, duas pessoas pensam melhor que uma.

    Se não encontrar nada na web, pergunte.

    Responder
  20. Valeu dou nota 10 pela, dica algo muito fácil e com sua dica ficou mamão com açúcar.

    Até + !!

    Responder
  21. Olá!

    Gostei deste tutorial de como mexer no blogger!!!

    Mas, quando tentei colocar um fundo, fiz exatamente o que foi postado! Só o que consegui mudar foram as cores do modelo original! Qaundo coloco url(...) o fundo fica em branco, não aparecendo a imagem...
    Também olhei outros tutoriais que pedem para por os "códigos e algumas palavras" bem espaçadamente! Mas mesmo assim não deu certo!

    Ficarei grata se responder

    Responder
  22. Letícia(acoisinha)

    Você tem certeza que está colocando o endereço completo e correto da imagem, o endereço da iamgem é clicar com o lado direito do mouse sobre ela e em Propriedade ou Copiar endereço da imagem

    Responder
  23. OI GENTE POR FAVOR VCS PODEM SEGUIR O MEU BLOG
    MAGNIFIC GIRLS. EU GARANTO QUE VCS NÃO VÃO SIR ARRENPEDER POR FAVOR EU ESPERO VCS

    Responder
  24. Olá, não há um jeito para o Wordpress não?

    O melhor site de desenhos e vídeos de Naruto, One Piece, Dragon Ball Z da web, acesse:
    http://viladoselementos.wordpress.com

    Responder
  25. CARA VALEU, PORÉM GOSTARIA DE SABER COMO COLOCAR ANUNCIOS NO LADO ESQUERDO DO MEU BLOG NÃO CONSIGO, PARA ADICIONAR GADGETS NAO TEM NO LADO ESQUERDO NADA O QUE FAZER

    Responder
  26. alextvilela

    Nem todos os modelos do blogger tem lateral no lado esquerdo ou direito, o que você pode fazer é ver se já está usando, se não, escolher um dos novos modelos do blogger, clique aqui para ver e, para esses é possível colocar uma lateral em cada lado do post, veja aqui, depois é só ir em adicionar um gadget e escolher a opção Html/Javascript para colar o código do adsense

    Responder
  27. opa. to entrando agora nessa onda de blog. isso ta me ajudando muito mano. obg

    http://nanoticia.blogspot.com/

    Responder
  28. pra porimagem só preciso apertar ctrl+f depois colar(<Variable name="body.background" description="Body Background" type="background"
    color="$(body.background.color)" default="#111111 url) e o url colocar o url de sua imagem, e tem que fazer a mesma coisa embaixo, e pode visualizar. tm tem um detalhe se vc ñ quer repetir a imagem modifique(repeat-x) para(no-repeat).

    Responder
  29. gostaria de saber como faço para mudar a fonte e cores do meu blog. qdo clico em design do modelo, aparce:
    Não foi possível concluir a sua solicitação.

    Ao informar esse erro ao Suporte do Blogger ou no Grupo de Ajuda do Blogger:

    Descreva o que você estava fazendo quando recebeu esta mensagem de erro.
    Forneça o seguinte código de erro.

    bX-ekj0o0

    Responder
  30. CerejaFashion

    Esse tipo de erro geralmente é temporário e é um, erro do blogger, tenta novamente, outra coisa que você pode tentar, no momento que isso ocorrer, é colocar draft no lugar do www na barra de endereços e dar um enter, ou tentar fazer isso acessando draft.blogger.com

    Responder
  31. Ola brother!
    meu blog é do Bol/Uol e eu coloquei um template da web, pq estes tem uns muito feios...kkk
    MAs eu mudei algumas coisas...e acabei mudando as cores das postasgens e não sei como colocá-las de volta;
    Posi só aprecem so link e assim mesmo com uma cor só!
    Me ajuda ae brother! vlw

    Responder
  32. RICARDO BASSMAN

    Sinto muito, não entendo nada dessas plataformas Bol/Uol, tenta procurar ajuda em foruns, eu aconselho o Yahoo resposta porque tem bastante usuários, no seu caso pergunte na categoria Design ou Web design e coloque ao endereço Url do seu blog, pode até fazer duas perguntas parecidas e dê o máximo de detalhes sobre sua dúvida e o que quer mudar.

    Responder
  33. Lizandro, bom dia !

    Gostaria muito de aprender a aumentar o tamanho "exclusivamente" da guia "Nenhum comentário" Obrigado ! Abraço!

    Responder
    ...Respostas
    1. Para mudar o estilo em blog do blogger, primeiro você deve ver se tem como mudar estilos sem mexer em códigos, clique aqui, e, se não der certo, aí você tem a segunda opção que é usar Css, para isso você deve saber fazer um backup de seu modelo antes, e precisa saber como coloca códigos Css no blogger, clique, aí terá que aprender um pouco sobre Css, mas para mudar estilo daquela frase que diz nem um comentário e que está abaixo das postagens individuais, você pode ver um código que funciona para a maioria dos modelos do blogger, terá que observar esse código, usar e modificar ele:

      Primeira tentativa é:

      #comments h4, .comments h4{font-size:120%; color:red}

      #comments #comment-post-message{font-size:120%; color:red}

      font-size:120%; é para o tamanho da fonte, você pode aumentar ela aumentando o número, color:red é para a cor da fonte, se quiser remover esse, e red é a cor que você pode substituir por um nome de cor básica em inglês.

      Nos códigos que lhe passei acima, o primeiro código é para a frase 'Nenhum comentário' e o segunda é para aquela frase 'Postar um comentário', eu lhe passei o segundo código porque o primeiro vai valer também para a frase 'Postar um comentário' então, no segundo você pode dar outro estilo para essa outra frase, isso se não quiser que ambos tenham o mesmo estilo, se quiser que as duas frases tenham mesmo estilo pode não usar a segunda parte do código acima.

      Se não der certo é porque seu modelo tem algum estilo para essa área que se 'sobrepõe', aí terá substituir por um código um pouco maior e que force o que você quer:

      #comments h4#comment-post-message, .comments h4#comment-post-message, #comments #comment-post-message, .comments #comment-post-message{font-size:120%; color:red}

      #comments #comment-post-message{font-size:120%; color:red}


      Se tiver dúvida pergunte.

→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!