Tutorial: Layout estilo tumblr (parte 1)

Oi gente (≧∇≦)ｷｬｰ♪ Primeiramente vou começar falando do meu sumiço, talvez seja a desculpa mais tosca do ano inteiro mas vou falar mesmo assim: como eu disse em um dos posts anteriores, a sala aonde fica o computador é MUITO quente e eu não consigo ficar aqui depois das 15 horas. O motivo? Pega sol, muito sol, na janela e eu sou obrigada a fecha-lá para não morrer queimada. Mas quando eu fecho, o ar quente se isola aqui dentro e não vai pra fora, então o lugar fica quente (parecendo um forno), insuportável. Então eu aproveitei hoje que esfriou (sim, esfriou. Significa que o Outono está próximo ♥) e vim postar. E também, eu passei esses tempos tentando fazer um layout free, mas os códigos não funcionam. É só comigo? Mudando de assunto, hoje eu trouxe um tutorial de como fazer um layout meio igual ao meu, mas é só a base. O resto eu deixarei com vocês, certo? Não quero ninguém kibando e fazendo layout a partir desse tutorial sem me dar os devidos créditos, caso contrário eu piro e puxo o pé da pessoa à noite. Entenderam? Beijos ~ ☆*･゜ﾟ･*\(^O^)/*･゜ﾟ･*☆   (づ￣ ³￣)づ

1. Vamos começar pela personalização? Vá em 'Modelo > Personalizar', vamos mudar o plano de fundo, acertar o modelo, diminuir a largura da sidebar e coisas assim. Mas antes vamos colocar o modelo naquele Travel (viagem) que todos conhecemos. O com o fundo do avião, segunda opção. Vá em 'Modelos > Setinha > Viagem > Segunda opção'. Agora o fundo. Você pode escolher o fundo de sua preferência. Eu recomendo que use uma cor simples e não uma pattern. Na minha opinião, pra esse estilo de layout, o fundo liso fica melhor. Eu vou usar um cinza claro. (f0f0f0) Em seguida, vamos às larguras. Sidebar o mínimo possível, a da área de post fica a seu critério. Recomendo algo pequeno, para ficar simples de escrever. Eu vou usar 639px, o tamanho daqui do blog. Vocês podem usar o mesmo se quiserem. Agora vamos para 'Avançado > Plano de fundo da barra lateral'. Aqui vamos colocar todas as cores em transparent, para a sidebar não atrapalhar no layout. Agora salvem tudo. Gif do passo 1: x

2. Agora aquele básico de todo layout: retirar as malditas bordinhas. Como eu sou preguiçosa, eu procuro aqueles tutoriais em que você copia e cola o código no lugar. Eu usei esse aqui. Só siga o tutorial e se estiver tudo certinho salve.

3. Aquele teste básico: a postagem de teste. Vamos usar uma ilustração básica, um cupcake ipsum, o negrito, itálico, sublinhado, riscado, colocar o link, o blockquote, o leia mais... Enfim, tudo o que costumamos usar no blog. Vamos colocar também os marcadores, para a personalização do post-footer mais tarde. O seu layout deve estar mais ou menos assim: x

4. Vamos deletar os gadgets, fazer algumas alterações na área de post e remover a navbar. Para excluir os gadgets vamos em 'Layout > Editar > Excluir > Ok' Pra quem não entendeu: x Repita esse passo até excluir todos os gadgets. Para remover a navbar, vamos em 'Navbar > Editar > Desativado', você pode oculta-lá com hover ou até colocar outra skin nela, mas recomendo oculta-lá. Pra quem não entendeu ²: x No post footer, eu vou fazer alterações básicas: remover a data, ocultar os botões de compartilhamento, organizar o post footer. É, praticamente, repetir os passos anteriores. Você só precisa ir em 'Editar' naquele quadrado escrito 'Postagens no blog' e ir desmarcando os quadradinhos. É simples.

Bem, eu vou terminando a parte 1 por aqui. Eu preciso me arrumar para sair com as minhas amigas foi convite de última hora. A próxima parte é o HTML, e ele tem que estar mais explicado. Foi por isso que dividi o tutorial. Qualquer dúvida, podem me perguntar pelos comentários. Até ~