Tutorial: Layout estilo tumblr (parte 2)

Oi oi minha gente *3* Como vão? Me desculpem por não ter postado esses dias, estava me organizando com a escola e fazendo os trabalhos. Aliás, eu deveria estar me aprontando pro inglês e fazendo as 20+ tarefas que tenho atrasadas lá. Ontem eu fiquei a tarde inteira copiando uma redação de duas folhas achando que era pra hoje, mas é pra amanhã. Ah, eu queria trocar o layout pra um com 2 sidebars, vocês não vão me matar certo?  ╥_╥  Os posts vão continuar a mesma coisa, só quero colocar sidebar e tirar os gadgets do cabeçalho. Eu vou ter que escrever esse post bem rápido, já que tenho pouco tempo. Então eu vou pular a introdução e ir direto para o tutorial, ok? ♥     σ(゚ー^*)


1. Vamos começar retirando o 'Assinar postagens: (Atom)' e o attribution. Vocês podem usar esse tutorial, ele tem tudo e mais um pouco.
2. Agora vamos personalizar a área de posts. Eu sugiro que vocês não dividam em caixas, fica meio estranho. É só vocês colarem o código abaixo logo depois de .main-inner .column-center-outer {. Já irei explicá-lo.
margin-left: 50px;
margin-top: -35px;
border-left: #fff solid 1px;
border-right: #fff solid 1px;
border-bottom: #fff solid 1px;
background: #fff;
margin-left: 50px; : Esse é o código que eu uso para centralizar a área dos posts na tela. Mude o 50 para ele ficar alinhado na sua tela. Se ficar centralizado na sua, fica na de todo mundo.
margin-top: -35px; : Acho que todos conhecem esse. Ele é pra subir a sidebar, para junta-lá com o cabeçalho. Já irei explicar como fazer o cabeçalho, só esperem.
border-x #fff solid 1px; : Não coloquem border-top, iremos usar a borda do cabeçalho como a borda do topo. Esses códigos são as bordas dos posts, vocês podem mudar a cor, o tipo e a largura.
bakground: #fff; : A cor do fundo da área dos posts. Recomendo deixar branco, mas depende do background do blog.
3. Para personalizar o post-footer basta seguir esse tutorial. É fácil, e você pode deixar ele simples ou chamativo. Fica a sua escolha.
4. Para colocar o botão de seguir, siga esse tutorial. É simples, prático e rápido.
5. Agora é só colocar o menu, personalizar os comentários, o título do post, o tooltip, o Leia Mais e essas coisas. Se vocês quiserem ver aonde eu peguei as coisas daqui do blog, podem ir para a página "Créditos". Só não kibem tudo, ok?


Me desculpem se ficou mal-explicado ou coisa assim. Podem me perguntar pelos comentários, dar puxões de orelha e coisas assim. Amanhã eu vou fazer a parte 3 (três) com o tutorial do header e dos últimos detalhes. Até ~

Parte 1 - Parte 2 - Parte 3

2 comentários:

  1. Ai, ai, ai, Let q. Acho melhor se apressar e fazer as tarefas de inglês, hein? :3 Enfim, adorei o tutorial! Conferi a primeira parte e ambas estão perfeitas, muito bem explicadas! ♥

    Um grande beijo,

    Juu-Chan || Nescau com Nutella

    ResponderExcluir
    Respostas
    1. Também acho q Tenho até terça pra entregar tudo çç Obrigada ♥

      Excluir

- Se quer algum código/tutorial que usei no layout, peça pela ask.
- Sem essa de "Seguindo, segue de volta?". Irrita, e pode não ser muito legal :/
- Os requesets podem ser feitos pelos posts e pelas asks.
- Seja educado, e não use palavras ofensivas.
- Sempre volte para ver se o seu comentário foi respondido >3<
- Retribuo sempre que posso
- Afiliações somente pela página. Para ser redirecionado à mesma, clique nos corações dos afiliados no cabeçalho.
- As pessoas que comentarem em posts aleatórios, de goodies ou de tutoriais pedindo afiliação serão ignoradas.
- Não me chame de Lelê, taco pedra.
Grata.