Aprenda a personalizar o template do seu blog no Blogger

Por Sérgio Estrella

Hoje as redes sociais estão mais fortes do que nunca e, com isso, a "blogosfera" acabou sendo deixada de lado por boa parte dos usuários que produzem conteúdo. Mas não se engane: os blogs continuam sendo o melhor modo de compartilhar o que você produz sem perder o controle do conteúdo ou submetê-lo a campanhas publicitárias de terceiros em que você nada tem a ganhar, como acontece no Facebook.

E temos ótimas plataformas para o desenvolvimento de blogs: enquanto o WordPress possui maiores limitações na versão gratuita, na versão instalável – que você precisa ter hospedagem própria –, ele pode ser personalizado sem limites. Já o Blogger (plataforma do Google) é destinado às pessoas que não querem dor de cabeça com custos ou plugins complicados, sem perder as possibilidades de personalização mais importantes. Por isso, escolhemos o Blogger para esta série de tutoriais.

Agora que você já aprendeu a criar seu blog na plataforma de blogs do Google, vamos avançar para o segundo passo: a personalização. Se você quer um blog com a sua cara, precisa saber como personalizá-lo usando o Designer de Modelo do Blogger, que facilita muito o processo e pode deixar seu site com aspecto mais agradável e profissional, criando um template único. Para aprender, acompanhe nosso passo a passo abaixo:

Passo 1: abra o Blogger

O Blogger é um serviço online, portanto não é necessário instalar qualquer programa em seu computador, apenas acessar o site: http://www.blogger.com/ . A primeira tela que você será apresentado é a de login na conta Google. Se você não possuir uma conta Google, poderá criar uma a partir desta mesma tela clicando no link "Criar uma conta". Se já tiver uma conta, basta entrar com seu login e senha e clicar sobre o botão "Fazer login", ou simplemente apertar a tecla Enter do seu teclado.

Tutorial Símbolo 1

Então, você será levado à página inicial do painel do Blogger. Esta tela lista todos os blogs associados a sua conta, permite que você configure seu perfil e outras opções.

Personalizar Blogger

Acessando o site do Blogger e visualizando sua lista de blogs.

Passo 2: configure seu novo blog

Caso não tenha nenhum blog associado a sua conta, você verá a mensagem "Você ainda não é autor de blogs". Neste caso, crie um blog para que possamos personalizar. Caso já tenha um blog relacionado na sua conta, você terá acesso às principais opções relacionadas a seu blog nesta página, como "Criar uma nova postagem", acessar a "Lista de postagens" e acessar outras opções como modelo, layout, configurações e estatísticas, além de poder visualizar o blog online como ele seria visto por qualquer leitor.

Personalizar Blogger

Acessando o menu de opções do blog e selecionando a opção "Modelo".

Para personalizar o visual do blog, vamos clicar na seta de mais opções e selecionar o item de menu "Modelo" Tutorial Símbolo 2.

Tutorial Símbolo 1
Tutorial Símbolo 2

Passo 3: acessando o painel "Modelo"

Após clicar sobre a opção "Modelo", você será levado a uma página que exibe o visual atual do blog no desktop e no celular além de algumas opções predefinidas de layout para aplicar no seu blog e a possibilidade de editar o código fonte HTML dele (avançado).

Página Modelo Blogger

Visualizando a seção "Modelo" do painel do seu Blog e clicando sobre o botão "Personalizar".

Nesta página, vamos clicar no botão "Personalizar" para abrir o Designer de Modelo do Blogger.

Tutorial Símbolo 3

Passo 4: fazendo alterações com o designer de modelo

O Designer de Modelo é uma espécie de editor dinâmico, que permite alterar várias configurações visuais do blog enquanto visualiza os resultados em tempo real em forma de prévia e sem alterar a versão que está no ar. A inferface do Designer de Modelo é esta:

Personalizar Blogger

Interface do Designer de Modelo do Blogger com as configurações na parte superior e pré-visualização na inferior.

Agora vamos abordar cada uma das seções e opções possíveis de se personalziar no Designer de Modelo:

Seção 1: Modelos

Personalizar Blogger

Seção "Modelos" com o visual atual do blog e opções predefinidas para selecionar.

Logo ao entrar na janela de edição do modelo, você verá a seção Modelos, listando, assim como na página alterior, o modelo atualmente visível no blog , além de outras opções de layout predefinidas e suas variações Tutorial Símbolo 2.

Tutorial Símbolo 1
Tutorial Símbolo 2

Seção 2: Plano de Fundo

Personalizar Blogger

Seção "Plano de fundo" com opções de definição de plano de fundo de cor e imagem.

A segunda seção listada na barra lateral da esquerda do Designer de Modelos é Plano de fundo. Aqui é possível selecionar uma imagem para usar como fundo do blog , ou uma cor selecionada dentro da cor do tema atual ou de outros temas sugeridos Tutorial Símbolo 2.

Tutorial Símbolo 1
Tutorial Símbolo 2

Seção 3: Ajustar larguras

Personalizar Blogger

Seção "Ajustar larguras" com opções de largura total do blog e da barra lateral.

A terceira seção do Designer de Modelos é Ajustar larguras. Neste painel, é possível ajustar a largura total do blog – não se esqueça de considerar a resolução de tela dos seus leitores nesta hora –, e quanto desta largura deverá ser ocupado pela barra lateral do blog Tutorial Símbolo 2.

Tutorial Símbolo 1
Tutorial Símbolo 2

Seção 4: Layout

Personalizar Blogger

Seção "Layout" com opções de estrutura de informação para o corpo e rodapé do blog.

A penúltima seção é sobre o Layout. Aqui podemos escolher a estrutura do corpo do blog , ou seja, se terá barra lateral, quantas e onde. Também é possível determinar o número de subseções do rodapé Tutorial Símbolo 2.

Tutorial Símbolo 1
Tutorial Símbolo 2

Seção 4: Avançado

Personalizar Blogger

Seção "Avançado" com opções de fonte e cor para vários aspectos do blog.

A última seção do Designer de Modelos é a Avançado. Nesta seção, podemos alterar diversos aspectos do visual do blog, como fonte do texto, cor dos links, imagens, itens da barra lateral e mais. Selecione o aspecto que deseja alterar na lista de itens , então o painel do lado direito Tutorial Símbolo 2 vai se modificar de acordo com o aspecto selecionado. Se selecionar um item relacionado a texto, verá configurações de fonte, tamanho de letra e cor do texto. Quando escolher um item não relacionado a texto, terá opções como cor de preenchimento e borda. Nesta seção também é possível adicionar código CSS personalizado.

Tutorial Símbolo 1
Tutorial Símbolo 2

Passo 5: salvando o modelo criado

Assim que ficar satisfeito com todas as alterações realizadas e pré-visualizadas no Designer de Modelo do Blogger, clique sobre o botão "Aplicar ao blog" para que elas sejam salvas no site que está no ar.

Tutorial Símbolo 1
Personalizar Blogger

Cabeçalho do Designer de Modelo com a opção de salvar alterações e voltar ao Blogger.

Agora que o seu blog tem visual único, é só começar a postar para que ele seja atualizado com conteúdo e, claro, continuar acompanhando nossos tutoriais sobre Blogger!

Inscreva-se em nosso canal do YouTube!

Análises, dicas, cobertura de eventos e muito mais. Todo dia tem vídeo novo para você.