Lição 2 - Escolhendo, alterando e personalizando o modelo

Depois de já ter seu blog de testes o seguinte passo é dar uma cara profissional para o seu blog. Para isso vou demonstrar onde selecionar um template para o seu blog e como alterá-lo.

1) Escolha sua template entre os sites a seguir:

http://btemplates.com

http://www.premiumbloggertemplates.com/

http://www.templateparablogspot.com/

http://www.deluxetemplates.net/category/blogger-template

http://www.soratemplates.com

2) Baixe o tema escolhido

3) Submeta o template em Modelo>Fazer Backup/Restaurar

4) Agora vamos personalizar o template. Ainda em modelo, clique em Editar HTML e esta página irá aparecer:

5) Não, esses não são hieróglifos antigos indecifráveis de uma língua perdida, e isso não vai destruir os seus sonhos de ter um blog lindo. Você vai ver que mexer em HTML é bem mais simples do que parece. Use o poder mágico não é magia, é tecnologia do Ctrl+F.

Vamos para um exemplo: Alterando o menu superior. Ele está desconfigurado e em inglês e queremos deixá-lo na nossa língua tupiniquim, personalizado para nosso blog de oficina. No menu temos categorias como Home, Categories, Gallery, Portifolio, Contact. Vamos alterar cada um deles com nomes que queremos: Início, Tutoriais, Dicas, Contato, Intercom Sudeste 2013.

Para isso vamos encontrar onde está esse menu no HTML, usando o Ctrl+F "Categories". Vai aparecer isso aqui:

• <ul class='sfmenu' id='sfmenu'>
   <li><a href='#'>Home</a></li>
   <li><a href='#'>Categories</a>
    <ul class='sub-menu'>
     <li><a href='#'>Entertainment</a></li>
     <li><a href='#'>Lifestyle</a></li>
   ..........

Agora é só alterar que vai ficar assim:

• <ul class='sfmenu' id='sfmenu'>
   <li><a href='http://oficinaintercom.blogspot.com.br/'>Início</a></li>
  <li><a href='http://oficinaintercom.blogspot.com.br/search/label/Tutoriais'>Tutoriais</a>
  </li> 
   <li><a href='http://oficinaintercom.blogspot.com.br/search/label/Dicas'>Dicas</a></li>
   <li><a href='http://www.intercomsudeste2013.com.br/'>Intercom Sudeste 2013</a></li>
   <li><a href='http://www.comandologin.com.br/'>Comando Login - O exemplo (e jabá)</a></li>
  </ul>
   ..........

Agora vamos fazer a mesma coisa para personalizar outras partes do template:

• Slider de destaque
• Botões sociais
• Tradução para português
• Redes sociais
• Rodapé

Lembre-se da mágica com Ctrl+F