Série Fazendo meu layout- passo a passo completo para iniciantes - Elaine Gaspareto- Dicas para blogs e inspirações para a vida

Série Fazendo meu layout- passo a passo completo para iniciantes

Publicado em 16/05/2019

Série Fazendo meu layout- passo a passo completo para iniciantes
Tempos atrás eu publiquei aqui no blog uma série de tutoriais que ensinam como personalizar um template do zero. Usei, na ocasião, um modelo do tema Viagem, nativo do Blogger.
E depois que terminamos fiz uma outra série usando o mesmo template já personalizado, mas dessa vez ensinando como tornar um template totalmente responsivo.
Foi tão legal a experiência, ajudou tanta gente e me deu tanta alegria fazer o passo a passo que resolvi fazer uma nova série, personalizando de outra forma um outro modelo nativo do Blogger.

Dessa vez vamos fazer, ao mesmo tempo, a personalização em si e o passo a passo que vai tornar o template responsivo, ou seja: trabalho completo!
Escolhi dessa vez um modelo do tema Espetacular.
O modelo original é esse:
Depois de pronto, personalizado e tornado responsivo, ficará assim:



Demonstração do Tema Fernanda


Quer embarcar comigo e aprender o passo a passo?
Vamos modificar tão profundamente o código original que você vai se surpreender com a lindeza que criaremos juntos!
Vem, a viagem começa hoje!



Série Fazendo meu layout- passo a passo completo para iniciantes


Série Fazendo meu layout- passo a passo completo para iniciantes
1- Para começar vamos ao básico de qualquer personalização: crie um blog de testes para usarmos na série.
Crie seu blog de testes (se já tiver um pode usa-lo, apenas coloque o modelo que vamos trabalhar), nomeie-o e escolha para ele o modelo que vamos usar, este:
Modelo definido?
Faça ao menos 5 postagens nele.
Coloque imagens em boa resolução e tamanho bom (sugiro acima de 750px de largura, e deixe em Tamanho original ao carregar nos posts), coloque marcadores em cada post, título nos posts e texto (pode inclusive ser o mesmo texto, curtinho). Não se preocupe com imagens saindo fora da área do post. Tudo será arrumado no próximo tutorial da Série Fazendo meu layout.
Faça isso m todos os posts, ok?
Essa é a primeira parte.

3- Agora crie um cabeçalho ou um logo para seu blog de testes.
Sim, faça isso agora pois assim já começamos como é mais legal, de cima pra baixo!
Para te ajudar na tarefa de criar um cabeçalho ou um logo para seu blog que será usado na série leia esse tutorial:


Nele, além do passo a passo completo de como criar um cabeçalho para blog eu também disponibilizo alguns materiais e fontes que podem ser bem úteis ao seu trabalho.
Leia o tutorial, baixe o pack de recursos e crie sua arte para o cabeçalho do blog.
Quando estiver pronto pode inserir o cabeçalho/logo em seu blog de testes.
Não se preocupe com alguns desajuste, Tudo dará certo no final!

4- Adicione elementos de página básicos: caixa de pesquisa, tradutor, posts mais vistos, arquivo, marcadores e Seguir por email.
Esses são os gadgets nativos que vamos personalizar, então deixe-os já instalados no seu blog de testes.

Por hoje terminamos.
Vou dar uns dias de tempo pra você criar seu cabeçalho e seu logo, aí seguimos com a personalização propriamente dita, ok?
A gente se vê em breve com o próximo tutorial prático da Série Fazendo meu layout.
Prepare seu blog de testes, faça os posts, crie seu logo de testes e aí seguimos.
Combinado?






8 comentários

  1. Vou acompanhar a série e fazer juntinho!!! Obrigada Elaine! 😍🙏🏾

    ResponderExcluir
  2. Bom dia, gostaria de saber como faço:
    1) para cada post que faço ....entre no menu correspondente
    2)https://bibliaeoracaoalimentosdaalma.blogspot.com/ este é o blog que estou criando....como as pessoas irão descobrir?
    3)como configuro que todas as fostos que irei postar sejam grande e não medias...
    desde já agradeço, Simone

    ResponderExcluir
    Respostas
    1. Simone, para editar o meu leia:
      https://www.elainegaspareto.com/2017/09/como-editar-um-menu-com-abas-e-sub-abas.html

      As pessoas não irão descobrir, é preciso divulgar o blog em todos os lugares possíveis, além de aplicar ao menos o b´sico em otimização.
      Aqui no blog tem vários posts sobre isso, procure Otimização e SEO ali no menu, em Dicas para blogs.

      As fotos vc precisa já carrega-las no tamanho que deseja exibir, em geral acima de 750px de largura e ao carrega-las no post deixar em Tamanho original.
      Aqui no blog também tem posts sobre imagens para o blog. Veja no item Imagens- dicas íteis na aba Dicas para blogs.

      Excluir
  3. Primeira aula concluída com sucesso!
    Gratidão!

    ResponderExcluir
  4. Muito interessante seu blog, achei por acaso e gostei. Vou aprender com você a construir um blog para meu uso. Agradecido.

    ResponderExcluir
  5. Oiii Elaine... Tudo de bom para voce!!! Curto muito os seus trabalhos, tem me ajudado muito nos meus projacto. Porem recentemente eu descobri um otimo Templete super incrivel para blogger, pra quem deseja ter uma ecommerce proficional, o Templete chama se "SORA CART SHOPPING"... Eu nunca vi algo parecido, voce poderia fazer um passo a passo de modifica lo! Assim como fez com o Tema Fernando... Valeeeeeeu Bjs... "Ja ativei o sininho" kkk

    ResponderExcluir
    Respostas
    1. Ulisses, boa tarde
      Vou anotar a dica, assim que retomar as publicações vejo se é possível.
      Muito obrigada!
      Att.

      Excluir
  6. Boa tarde Elaine!

    Seu blog é bem interessante. Eu tenho um tema chamado (janela de imagem), o segundo que esta escrito abrir, de todos eles eu achei esse o mai bonito.

    Como vc pode ver lá no blogger, este tema tem 3 menus em cima da página, aprendi a mexer nestes menus a pouco tempo.
    Eu queria pedir a sua ajuda na questão destes menus, vc teria algum código html para eu deixar estes menus suspensos, que não fosse grudados nos posts abaixo, tendo um pouco de espaço? e que tivesse as bordas todas arredondadas como na parte de cima deles mesmos?

    De já, agradeço a atenção!

    ResponderExcluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Deixe sua pergunta ou solicitação sempre nos comentários, eu infelizmente não tenho como responder pedidos de ajuda por email.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…