Tutorial: Como personalizar um layout passo a passo - Parte 1

04 novembro 2015
  Como personalizar um layout passo a passo será um novo quadro de posts aqui do blog, para ajudar aqueles que querem mudar a cara do blog, e dispõem de tempo para isso. Vou dividir os posts para não ficar tão extenso e cansativo (no começo é muito), então, bora?


O modelo base que vamos usar para personalizar é o Viagem, do próprio blogger. Vá na aba "Modelo" e escolha o segundo tema do modelo viagem, o azul com fundo de papel amassado.


Como retirar o fundo de papel do modelo Travel (viagem)


Agora vamos retirar esse fundo de papel amassado nada lindo. Vá em "Modelo" > "Editar Html". O código CSS vai estar oculto, irá aparecer assim:

Como retirar o fundo de papel do modelo Travel (viagem)

Queremos tudo que está escondido na linha 9 (parte marcada), para abrir o código dê um clique na setinha preta, irá aparecer mais códigos, é deles que precisamos para embelezar o layout.
Agora leve o mouse para dentro desses códigos e dê outro clique, em seguida aperte Ctrl+F, irá aparecer uma barrinha de busca, é ela quem vai nos ajudar a encontrar os códigos que desejamos. Copie o código a seguir, cole dentro da barra de pesquisa que apareceu e dê enter:
content-outer .content-cap-top {
A barra vai encontrar o código (destacado em amarelo), vamos encontrar isso ( selecionado marcado em azul):

Como retirar o fundo de papel do modelo Travel (viagem)

Apague tudo o que eu destaquei em VERMELHO, deixando os ponto e virgula, conforme abaixo:

.content-outer .content-cap-top {
height: $(content.imageBorder.top.space);
background: transparent $(content.imageBorder.top) repeat-x scroll top center;
}

.content-outer {
margin: 0 auto;
padding-top: $(content.margin);
}

.content-inner {
background: $(content.background);
background-position: left -$(content.imageBorder.top.space);
background-color: $(content.background.color);
padding: $(content.padding);
}

.main-inner .date-outer {
margin-bottom: 2em;
}

Agora clique em "Salvar Modelo" e pronto, seu layout já não tem mais o fundo de papel amassado!

Nessa segunda parte não vamos mexer em códigos, e sim personalizar o modelo do layout. Vá em "Modelo" > "Personalizar". Clique em "Plano de fundo" e remova a imagem padrão do modelo, essa de céu, em "Remover imagem". Acrescente outra imagem, de preferência clara, só pra gente seguir a diante, mais tarde você pode voltar e acrescentar outra. Não esqueça de clicar em "aplicar ao blog" para salvar as alterações!
Agora vamos ajustar as larguras. Em "todo o blog" deixe em 1060 pixels. Em "barra lateral direita" deixe em 340 pixels. Ou as larguras que você preferir!

Agora vamos para "avançado".  Se você for usar uma imagem deixe no cabeçalho, deixei "titulo do blog" transparente. Em "plano de fundo da postagem" selecione a cor branca. Em "plano de fundo da barra lateral" marque tudo transparente, pois nessa parte mexeremos com códigos. Agora salve as alterações, voltaremos aqui mais tarde se precisar!

Separando Gadgets da Sidebar (ATUALIZADO)


Nessa terceira partes iremos separar os gadgets da sidebar, deixar eles em quadrados separados, fica visivelmente mais bonito e organizado. Aqui iremos mexer no CSS, então, vá para "modelo" > "Editar html". Faço como no primeiro passo, dê um clique na setinha da linha 9, e aperte CTRL+F. Procure por:

/* Widgets
Você vai encontrar isso:

Apague o código de .sidebar .widget { até }, substituindo pelo seguinte código:

.sidebar .widget {
margin: 0px 0px 15px 0px; /* margem entre uma caixa e outra */
background: #FFFFFF; /* cor de fundo das caixas */
padding:10px; /* espaço entre o texto e as margens */
border-radius: 10px; /* arredondamento dos cantos das caixas */
text-align: justify; /* alinhamento justificado do texto */
-webkit-box-shadow: 0 0 1em #c9c9c9; /* sombra nas caixas, apague esse trecho se não quiser sombra */
}
Faça as alterações que você achar necessário, visualize e salve.

Separando um post do outro


Separar uma postagem da outra também deixa o blog mais organizado e bonito, e é isso que vamos fazer agora. Aperte "Ctrl+F" e procure pelo seguinte código:

.main-inner .column-center-outer {
Você vai encontrar isso:

Substitua o código encontrado (apenas o que está selecionado na imagem acima), pelo seguinte código e salve as alterações: 
.post-outer {
margin: 3px 8px 15px;
background:#fff;
padding: 5px 5px;
box-shadow: 0px 0px 0px 0px #DCDCDC;
padding: 5px;
}
Nessa primeira parte do tutorial a nossa base já está pronta, nos próximos tutoriais vamos embelezar o layout com cores, fontes e afins. Agora deixarei abaixo algumas ilustrações free para cabeçalho, para quem não sabe encontrar.

Ilustrações free para blog

Ilustrações free para blog

Ilustrações free para blog

Ilustrações free para blog

Ilustrações free para blog

Ilustrações free para blog

Ilustrações free para blog

Ilustrações free para blog

Ilustrações free para blog

Ilustrações free para blog

Ilustrações free para blog

Ilustrações free para blog

Observação: As ilustrações não são minhas!



Até a próxima parte do tutorial de Como personalizar um layout passo a passo. E não esqueça que aqui no blog está rolando sorteio de um layout, para participar clique AQUI

22 comentários:

  1. Aih que post PERFEITO ♥_♥
    Mais Nanda no próximo post você (se não for pedir demais) você poderia colocar um cabeçalho transparente do tamanho certinho pra gente editar!?
    Por que eu não condigo achar um cabeçalho transparente do tamanho certo que eu possa editar do meu jeitinho...
    Desde já Obrigada por sua ajuda você é uma pessoa muito especial para a Blogosfera Rsrsr ♥_♥

    ResponderExcluir
    Respostas
    1. Obrigada pelo pedido, está anotado para o próximo post! ♥
      E mais uma vez obrigada pelo carinho, me alegra muito! ♥-♥

      Excluir
  2. Gente, que amor! Arrasou no post! Parabéns pela iniciativa. Está bem didático!

    Beijoooos
    Vai em frente, Menina!

    ResponderExcluir
  3. Esse post vai me ajudar com certeza, quero muito mudar meu layout nas férias, mas eu mesma queria fazer, e com esse post e com os outros que virão tenho certeza que vou conseguir haha. Bjs e obrigada
    http://www.sahsant.blogspot.com

    ResponderExcluir
    Respostas
    1. Vou tentar simplificar o máximo possível para ficar fácil de entender e realizar! ♥
      Obrigada você.

      Excluir
  4. Vou mudar meu layout com certeza depois desse post.
    Agora ansiosa pra vê o próximo!!!!

    www.eueosquatro.blogspot.com

    ResponderExcluir
  5. Nanda, por favor me diz quando vai sair a continuação desse Post?!
    Passo sempre aqui no seu Blog mais no dia que esse Post sair vou acordar dizendo "preciso ir no blog da Nanda PRECISO!!!" ha ha ha
    Bjos Nanda Te Adoro Vlw ღ ♥ ♡ ❤ ❥

    ResponderExcluir
    Respostas
    1. Vou fazê-lo o mais rápido possível, prometo! ♥

      Excluir
  6. OOi Nanda adorei a sua iniciativa, é um pouco complicado e difícil vermos blogs que auxiliem na criação de templates próprios desde o começo, porém como eu costumo falar design de blog é muito bacana mas requer um pouco de esforço e perseverança, porque erramos e muita nas páginas de testes até ficar como gostamos, eu utilizei algumas vezes o modelo travel ele é excelente porém quando conheci o antigo modelo Mínima do blogger foi amor e estou com ele até hoje, isso porque ele é neutro sem nada kk é excelente para programar nele, você me perguntou no blog se a ilustração eu comprei, a resposta é que não kk vou te indicar o site é o Freepik, nele você encontra diversos vetores, psd, ilustração para uso livre, as imagens não são pagas e de excelente qualidade, espero ter te auxiliado. Estou seguindo o seu blog, beijoos

    http://www.caprichadissimas.com.br/

    ResponderExcluir
    Respostas
    1. Ainda não tentei o Mínima justamente porque já conheço cada código do Travel, e pra mim está ficando cada vez mais fácil. rs Porém, já vi falarem muito da facilidade que o Mínima promove para modificá-lo, quem sabe mais pra frente eu tento... obrigada pela dica!
      E muito obrigada pela indicação do Freepik, eu já conhecia mas nunca utilizei nenhuma imagem dele. Seja bem-vinda, já te sigo! ♥

      Excluir
  7. Nanda, que fofo sua iniciativa! Adorei o post, sou uma tonta pra mexer com essas coisas! Ah e me chama lá no e-mail: jjuhsiqueira@gmail.com preciso falar com você.

    Um super beijo.


    www.blogdajusiqueira.com

    ResponderExcluir
    Respostas
    1. Obrigada pelo comentário, e não é tão difícil mexer com os códigos, só precisa muito tempo e paciência. rs
      Beijos ♥

      Excluir
  8. Que legais suas Dicas, ajuda muito quem esta iniciando e não tem ideia de como montar um layout !
    Beijos ♡ O Melhor de Mim

    ResponderExcluir
  9. Que incrível este post <3 vou até deixar nos favoritos aqui para depois olhar com calma os passos, já passou da hora de eu arrumar e mudar o meu.
    Obrigada, ajudou muito!

    Xoxo :*
    www.isabelamingues.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Fico feliz, espero que te ajude! ♥-♥
      Beijos

      Excluir
  10. Amei muito <3 mais eu queria te pergunta se vc vai continuar dando o tutorial de como termina o blog?

    ResponderExcluir
    Respostas
    1. Que bom que gostou. Vou continuar sim, espero postar o mais rápido possível! ♥

      Excluir
  11. Nossa, que ajuda e tanto você sempre dá para nós Nanda! Fiquei super interessada, porém ainda sinto um pouco de dificuldade para entender certas instruções devido ao problema de saúde que passei. Mas quero sim vir aqui e ler bem devagar com atenção e tentar melhorar o meu blog com suas dicas. Deus a abençoe pela disposição em ensinar, e como você ensina bem! Parabéns! Obrigada por ajudar!
    www.marilisilva.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Eu tinha medo de não conseguir passar o certo e conseguir fazer com que as pessoas entendessem o que eu estava explicando, bom saber que pensa isso! rs
      No começo parece Grego, mas depois a gente vai pegando o jeito e entendendo cada código. Volte sempre, agradeço sua visita e comentário! ♥

      Excluir

- Os comentários são de responsabilidade de seus respectivos autores!
- Não são permitidos links que redirecionam diretamente para um post, vídeo ou sorteio. Comente porque gostou e não para se promover. Comentários que contenham esse tipo de link serão removidos.
- Seu comentário é muito importante para o andamento do blog e é um grande incentivo para mim, deixe sua opinião, dica, elogio, critica (com fundamento) ou sugestão.
- Deixe APENAS o link do seu blog para que eu possa conhecer. Comentários cheios de links também serão excluídos.
- Não ofenda nem desrespeite ninguém.
- Deixe a opção "Notifique-me" marcada para ser notificado(a) quando eu responder seu comentário!