Como Inserir Códigos no Blogger: Formatar Texto e Links do Blog

Para formatar textos ou links do blog você precisa colocar ou alterar códigos CSS no Blogger, mas existe uma maneira mais fácil de fazer do que usar a pagina editar HTML e ficar procurando trechos de códigos e correr o risco de estragar seu template por causa de algum erro nos códigos CSS ou HTML. Podemos colocar os códigos CSS pela pagina Designer de modelo do Blogger e fazer essa formatação de texto (cor, tamanho e tipo de fonte) ou ainda colocar bordas, trocar cor ou imagem de fundo e varias outras modificações na aparência do blog.

Colocar e Testar Códigos no Blogger

Entre na pagina modelo, faça um backup do template para não correr o risco de perder seu layout atual depois clique no botão personalizar.

Personalizar Modelo do Blogger

Veja no menu lateral o item avançado e use a barra de rolagem para chegar ao ultimo item da lista que é: Adicionar CSS. Isto deve abrir uma caixa de texto em branco somente com a mensagem: Adicionar o CSS aqui para substituir estilos existentes. Mas caso tenha algo dentro da caixa somente modifique algo se souber exatamente o que está fazendo, pois esses códigos fazem parte do layout atual do seu blog.

Adicionar Estilos CSS ao Blogger

Nesta caixa devemos colocar os estilos CSS para modificar a aparência do blog, por exemplo, se usar o gadget de postagens populares e quiser alterar o tamanho da fonte deste gadget coloque o código: #PopularPosts1 {font-size:16pt}. Como você pode ver na imagem acima os links do nosso gadget: Dicas mais Compartilhadas estão com o tamanho de fonte muito grande nós adicionamos o código
#Feed1 {font-size:16pt} para criar aquela imagem para demonstração.

Ou seja, sabendo qual é o nome do estilo podemos personalizar cada gadget individualmente e com a vantagem de visualizar o resultado na hora antes de salvar as modificações no blog. Veja alguns links para ajudá-lo a encontrar os nomes dos estilos dos Gadgets e fazer a formação:

Personalizar gadgets do Blog
Colocar ou alterar as bordas
Como Formatar o Texto do Blog
Gerador de Código HTML das Cores

Você pode ver nesta pagina que existem muitos estilos pré-definidos e que podemos editar apenas com cliques na caixa superior da pagina onde clicamos em avançado para exibir essa caixa para colocar códigos existe uma longa lista de itens que podemos editar: Texto da página, Planos de fundo, Links, Título do blog, Descrição do blog, Texto das guias, Plano de fundo das guias e muitas outras.

Portanto antes de inserir código veja o que você quer modificar não consta nesta lista, por exemplo, editar o texto da postagem nós podemos fazer clicando no item: Texto das guias e depois apenas selecionar a cor, tamanho de fonte, negrito e itálico nas caixas de opções ao lado.

Formatar Texto do Blogger

Mais dicas sobre editar e personalizar blogs:
Como Encontrar Erros nos Códigos do Blog: HTML, CSS, Javascript
Verificar e Corrigir Erros e Problemas Comuns em Blogs
Como Melhorar e Personalizar um Blog - Por onde Começar?

Como todas as possibilidades de personalização do blog nós sugerimos que comece fazendo coisas mais simples para aprender a usar melhor esse recurso do blog e entender melhor como funcionam os códigos CSS e com a pratica poderá fazer muito mais que imagina e de uma maneira bem mais simples e rápida sem precisar mexer com tantos códigos HTML, Java script e CSS todos juntos na pagina editar HTML do Blogger.

6 comentários:

  1. Fabiano se já tiver um estilo na página HTML e colocar desse jeito, o estilo antigo vai sumir da página HTML?

    ResponderExcluir
  2. se já existir o mesmo estilo no html é possível que gere algum tipo de erro talvez o blog não apareça igual em todos os navegadores.

    por isso se já adicionou códigos no diretamente no html é melhor apagar antes de colocar o mesmo código nesta pagina.

    acho mais recomendável usar essa pagina para colocar estilos CSS de códigos que acha prontos em sites ou personalizar os gadgets porque normalmente os templates do blogger não tem nenhum estilo #Label1 ou #Feed1 portanto não há perigo de gerar conflito de códigos

    ResponderExcluir
  3. o código #Feed1 {font-size:16pt} se aplica a todos os modelos (até na dinâmica)?

    ResponderExcluir
  4. o código #Feed1 se aplica ao gadget de feed, mas não testei em template dinamicos, porém acredito que não pois esses template tem um estilo diferente que não permite editar o html

    ResponderExcluir
  5. Fabiano:
    Tudo bem? Como posso formatar tamanho e tipo de letra de 1500 posts no blogger? O modelo-avançados-textos não resolve, apenas modifica alguns posts e não todos? Será que vai ter que ser um por um? Obrigado,

    ResponderExcluir
    Respostas
    1. você fez a formatação dos posts na pagina onde cria a postagem? se fez isso não tem como alterar todos de uma vez.

      tente adicionar no html do seu blog o código

      .post {font-size: 30pt}

      isso é para testar e deve deixar as letras das postagens enormes, depois é só fazer a formatação que você quer.

      veja aqui: Como Formatar o Texto do Blog

      Excluir