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.
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.
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 ♥
*000* que lindo que fica muito perfo < 3
ResponderExcluirKisses || Inside
Eu também fui ver BM, foi uma loucura no shopping! Já fiz um layout assim, fica lindo >3<
ResponderExcluiruns-killed.blogspot.com
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 ><'
ResponderExcluirQuer ser afiliada do meu blog? Espero sua resposta.
Kisses || Garota dos Fandoms
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.
ResponderExcluirAmei o tutorial,muito bem explicadinho :3
Kiss | It's Time~
adorei o tutorial, fica uma graça! ahhh, e aceito as afiliação sim! te coloquei, se puder me colocar eu agradeço :)
ResponderExcluirhttp://dr-eaming.blogspot.com.br/
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
ResponderExcluir@The Moon Reverse
Fica lindo <3 desativei meu tumblr ai :cc
ResponderExcluirhttp://euamotutoriais.blogspot.com.br/
Não gosto muito dos layouts do tumblr, tirando as faixinhas que são perfeitas! <3
ResponderExcluirDe qualquer forma eu adorei o tutorial! Beijos,
c-akeparty.blogspot.com