Tutorial Super Clean - Versão Brinde

Tutorial para Instalação do Layout

*Necessita conhecimentos básicos sobre administração do Painel Blogger


- Baixe o arquivo XML para o seu computador
- Faça login em seu Blogger
- Na barra lateral acesse Modelo
- Depois clique no Botão "Fazer backup/Restaurar"
- Clique em "Escolher arquivo"
- Escolha o aquivo XML baixado e faça upload!


Configurando seu layout

1. Excluindo gadgets desnecessários e repetidos (ex: pesquisa e categorias, atribuição e denunciar abuso). Remova também os gadgets vazios e indesejados.
- Vá para área Layout (na barra lateral esquerda do seu painel)
- Procure o gadget desejado e clique em editar, depois em excluir e dê OK.

2. Configurar Seguir Por Email
- Ainda na área do layout, adicione um novo gadget do tipo "seguir por email" (caso não possua). Depois, altere o nome como preferir e clique em salvar. *Se já possuir o gadget, é necessário excluir e após excluído adicionar outro (nesta ordem).

3. Configurar menu:
- Caso seu blog não tenha páginas, será preciso criá-las. Na barra lateral esquerda do seu painel, clique em "Páginas" e depois no botão "Nova Página".
- Clique para visualizar cada página (após publicada) e copie os links de cada uma para usar depois.
- Caso seu blog não possua categorias, será necessário adicionar algumas em seus posts. Basta acessar a área "Postagens", marcar os artigos escolhidos e clicar no símbolo da etiqueta. Depois, em novo marcador, digite o nome da categoria e dê ok.
- Abra um post que contenha a categoria criada. Clique no link da categoria, que estará aparecendo abaixo do título do post. Copie cada link desejado e salve para depois.

- Vá até MODELO - Editar HTML, clique dentro do código, segure o CTRL do teclado e clique na letra F. Irá abrir uma caixa de pesquisa, procure por <div class='conteudo-menu'>

Você irá encontrar o seguinte código:
<div class='conteudo-menu'>
<nav id='menu'>
<centro>
<div id='menu-left'>
<input type='checkbox'/>
<label/>
<ul>
<li><a href='COLOCAR LINK DA HOME DO BLOG AQUI'>Home</a></li>
<li><a href='COLOCAR LINK DA PÁGINA SOBRE AQUI'>Sobre</a></li>
<li><a>Categorias</a>
  <ul class='menus'>
   <li><a href='COLOCAR LINK DA CATEGORIA AQUI'>Nome da Categoria</a></li>
   <li><a href='COLOCAR LINK DA CATEGORIA AQUI'>Nome da Categoria</a></li>
    <li><a href='COLOCAR LINK DA CATEGORIA AQUI'>Nome da Categoria</a></li>
   <li><a href='COLOCAR LINK DA CATEGORIA AQUI'>Nome da Categoria</a></li>
   <li><a href='COLOCAR LINK DA CATEGORIA AQUI'>Nome da Categoria</a></li>
  </ul>
</li>
<li><a href='COLOCAR LINK DA PÁGINA CONTATO AQUI'>Contato</a></li>
...

Personalizando o código encontrado:
- Cole os links que você salvou dentro das aspas, nos locais indicados acima em azul.
- Modifique o nome de cada categoria, nos locais indicados acima em roxo.
- Clique em salvar!

4. Configurar arquivo:
- Adicione o gadget de arquivo do Blogger
- Configure para "Menu Suspenso"
- Arquivamento "Mensal"
- Formato "Janeiro 2006"
- Deixe sem título
- Salve!

5. Configurar área da postagem:
- Vá em Layout na área "Postagens"
- Configure a data para 10 jan 2016
- Desative botões de compartilhamento
- Configure a quantidade de postagens que deseja por página
- Salvar!

DICA PARA FORMATAÇÃO DOS POSTS:
Use sempre imagens grandes em tamanho superior a 800px, para que fiquem na largura do post. Retire o link e coloque novamente (caso desejar) para que fiquem alinhadas.

6. Ajustar tamanho do nome do blog (opcional):
Se precisar alterar o tamanho do nome do seu blog vá até MODELO - Personalizar - Configurações avançadas - Título do blog. Depois altere para o tamanho de fonte desejado.

7. Ajustar margens do nome do blog (opcional):
Se precisar ajustar as distâncias das margens, vá até MODELO - Editar HTML, clique dentro do código, segure o CTRL do teclado e clique na letra F. Irá abrir uma caixa de pesquisa, procure por /* Header

Você irá encontrar o seguinte código:

/* Header
----------------------------------------------- */
.header-outer {
  margin: 0px 0px 0px 0px;
...

*Em margin você altera a distância do topo, no segundo número a distância da direita e no terceiro número a distância da esquerda. Utilize números negativos ou positivos. Faça testes até ficar bom!

EX:  margin: 100px 10px 100px -10px;


ATENÇÃO: Não remova os créditos/links do rodapé do layout, violação de direitos autorais é crime. *Venda e distribuição proibidas.

Em breve, vamos ensinar como modificar a fonte do nome do seu blog! Fique ligado(a) no seu e-mail.

EM CASO DE DÚVIDAS DEIXE SEU COMENTÁRIO!