Tutorial: Layout do blog estilo Tumblr

Boa noite tchucos :3.Tudo bem com vocês? Eu estou ótima.Três dias sem postar? Sim, mas como sempre tenho meus motivos.Na sexta não deu mesmo.Fui assistir o Believe Movie (filme/documentário do Justin Bieber).Comecei a me arrumar já pela manhã huehue, o filme só iria começar às 19:30h, mas eu sair de casa 16h kk.Foi muito perfeito, fizemos bagunça no shopping, gritamos, pulamos, cantamos, zuamos, choramos na hora do filme, foi perfeito demais.E como eu tinha avisado eu iria postar só de segunda a sexta, então...não tenho motivos para os outros dois dias.Clique em read more para saber sobre o post de hoje.




No post de hoje, vamos aprender sobre como deixar o layout do blog parecido com um tumblr.Eu vi esse tutorial no blog We Heart HTML e resolvi postar aqui.Então créditos para lá.Hoje eu vou ensinar apenas o básico, e quem sabe depois eu traga mais coisas, como personalizaçao, entre outras.


 


A imagem também é do blog WHH, pois eu não tive tempo de fazer um layout básico para a preview (também foi por causa da preguiça...kkk)

Vamos começar pela sidebar.Recomendo que coloquem ela na esquerda, mas isso é de preferência sua.Coloque na largura 300px, aumente ou diminua se preferir, faça do seu gosto.

Vá em seu html, aperte Ctrl+F e pesquise pela tag .main-inner .column-left-inner {, substitua todo o código que o acompanha pela código abaixo:

.main-inner .column-left-inner {
margin-left: -25px; /** Margem da esquerda, aumente ou diminua até fica da maneira que você queira **/
margin-top: -10px; /** Margem do topo, ou seja, você deve aumentar ou diminuir, até fica EXATAMENTE no lugar certo, para não dar erro **/
background: url("Link da imagem") bottom center no-repeat;
z-index: 9999999999;
position: fixed;
height: 100%;
box-shadow: 0 0 15px #ccc; /** Sombra da sidebar, se não quiser apague esta linha **/
width: 300px; /** Largura da sidebar, aumente ou diminua **/

Faça as alterações necessárias.Coloque uma imagem como background na sidebar se preferir, senão coloque apenas um fundo de uma cor só.Recomendo que usem esses sites: aqui e aqui, pois tem umas imagens bem legais para por no fundo.

Agora vamos excluir ou mover o cabeçalho, faça a etapa que preferir.

1ª etapa: Excluindo

No seu html, pesquise pela tag <b:widget id='Header1', ao lado dela haverá um código assim:

<b:widget id='Header1' locked='true' title='NOME DO SEU BLOG (Cabeçalho)' type='Header'>

Agora é só trocar a palavra true por false.

2ª etapa: Movendo

Vá em seu layout, mova o cabeçalho para cima das postagens e salve.Volte para o seu html e  procure pela tag <b:widget id='Header1' e apague todo o código que o acompanha.Veja na imagem abaixo:


 Aumente a imagem para visualizar melhor.

É obrigatório que você faça essa exclusão, pois se você apenas moveu o cabeçalho, tem que APAGAR esse código, senão o cabeçalho ficará repetido, ou seja, ficarão 2 cabeçalhos.

 Recomendo que separe as postagens.Para separá-las é só procurar por .main-inner .column-center-outer { e substituir todo o código por este abaixo:

.post-outer {
background: #fff; /*Fundo, está na Cor Branca */
padding-top: 4px; /* Espaço do topo */
padding-left: 5px; /* Espaço da esquerda */
padding-right: 5px; /* Espaço da direita */
margin: 5px 3px 25px;
} 

Por hoje é só isso.Os créditos do tutorial por completo vai para o WHH, menos a parte de separar as postagens, que eu só fiz acrescentar.Depois eu usarei minha criatividade e trarei mais tutoriais na parte da personalização.Enquanto isso vão usando as suas criatividades.

 

Retribuirei os comentários em breve.Quero agradecer as pessoas que gostaram dos nomes para blogs da postagem anterior e também para quem já está usando.Fiquei muito feliz mesmo.Em breve também a agenda para os post da semana no blog completa e renovada.Aguardem!

kiss ♥ 

8 comentários:

  1. *000* que lindo que fica muito perfo < 3
    Kisses || Inside

    ResponderExcluir
  2. Eu também fui ver BM, foi uma loucura no shopping! Já fiz um layout assim, fica lindo >3<

    uns-killed.blogspot.com

    ResponderExcluir
  3. Fica super liendjo o layout, acho que vou usar este efeito como por exemplo em um layout free que estou fazendo, o tutorial é super útil ><'
    Quer ser afiliada do meu blog? Espero sua resposta.

    Kisses || Garota dos Fandoms

    ResponderExcluir
  4. To apaixonada pelo layout daqui ♥ Ta todo mundo falando desse tal believe movie senhor,enquanto eu quero assistir This is us (filme/documentário da One direction) huehue.
    Amei o tutorial,muito bem explicadinho :3
    Kiss | It's Time~

    ResponderExcluir
  5. adorei o tutorial, fica uma graça! ahhh, e aceito as afiliação sim! te coloquei, se puder me colocar eu agradeço :)

    http://dr-eaming.blogspot.com.br/

    ResponderExcluir
  6. Eu tenho colegas que são bem assim, gritam, pulam fazem de tudo só em tocar no nome dele HAIUSAHUSHAISH' Gente que modelo fofo @u@ Lembrou mesmo tumblr. Aliás, o tutorial está bem explicadinho, gostei <3
    @The Moon Reverse

    ResponderExcluir
  7. Fica lindo <3 desativei meu tumblr ai :cc

    http://euamotutoriais.blogspot.com.br/

    ResponderExcluir
  8. Não gosto muito dos layouts do tumblr, tirando as faixinhas que são perfeitas! <3
    De qualquer forma eu adorei o tutorial! Beijos,
    c-akeparty.blogspot.com

    ResponderExcluir

-Não aceito palavrões.
-Não faça ofensas ao blog, só aceito critícas caso elas forem construtivas ao blog.
-Não comente apenas com um "seguindo, segue de volta?".
-Faça um comentário sobre a postagem lida.
-Deixe o link do blog no fim do comentário, assim poderei retribuir o carinho.