Aprenda a personalizar o template do seu blog no Blogger

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:

Participe do nosso GRUPO CANALTECH DE DESCONTOS do Whatsapp e do Facebook e garanta sempre o menor preço em suas compras de produtos de tecnologia.

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!

Gostou dessa matéria?

Inscreva seu email no Canaltech para receber atualizações diárias com as últimas notícias do mundo da tecnologia.