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.
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.
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.
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.
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.
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.
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.
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.
Marcadores: Códigos, CSS, Personalizar, Template