domingo, 17 de abril de 2016

Tutorial: Como criar um layout

| |

Olá! Tudo bem com vocês? Espero que sim! 

Então, dessa vez decidi fazer um post diferente! Finalmente né? Eu só estava postando sobre Cartoons! Mas é que é tanto Cartoon legal pra falar gente, vocês não fazem ideia xD 

Agora falando sobre o post, irei ensinar a vocês a criar um layout para o blogger, não vai ser criar exatamente, ta mais pra editar x_x Mas, é bem mais fácil, bem mais legal e já é um bom começo, afinal é cansativo sair procurando layouts em outros blogs não é? 


Sim! É! Porém, agora vai ser cansativo procurar códigos! SHAUHS Mas garanto pra vocês que é bem melhor, afinal você faz o layout do jeito que você quiser e não tem muitos problemas. Atenção, post longoo, mas você vai gostar xD

Agora vamos aprender! /o/
Caso você não enxergue é só clicar na imagem!

1 - A Base.

Primeiro, vá no menu do blogger e em Modelo > Personalizar
Mude o seu layout para Travel/Viagem, o escolha o segundo modelinho.

Vá na aba Plano de Fundo e remova a imagem, coloque outra ou deixe uma cor. Eu sempre deixo uma cor mesmo, pois depois iremos editar isso então não é tão importante.


Ainda no Personalizar, vá em Avançado | Plano de Fundo da Postagem e coloque a cor do fundo da postagem que preferir, eu coloquei cor branca mesmo.

Depois procure Avançado | Plano de Fundo Barra Lateral e deixe as duas transparentes.

Assim, na barra lateral(onde ficam os gadgets), vai ficar somente com os títulos, sem a cor branca e sem a barrinha preta também.

Pronto? Sim, eu sei, ficou horrível! Mas ainda estamos no comecinho, logo, logo melhora!
Clique em "Aplicar ao Blog" e volte para o painel do blogger.

2 - Tirando coisinhas chatas.

Bom, essa parte é bem fácil também, vamos começar a editar o HTML já.

Agora vamos tirar essas bordinhas e esse fundo feinho de papel da área dos posts, é bem simples, vá em Modelo > Editar HTML, depois aperte Ctrl + F, e irá aparecer uma barrinha, você procura .content-outer .content-cap-top { dê enter, quando achar tire as partes que estão circuladas na imagem.

Vai ficar só com este código:
.content-outer .content-cap-top {  height:
  background: repeat-x scroll top center;
}
.content-outer {
  margin: 0 auto;
}
.content-inner {
  background:
  background-position:
  background-color:
}

Crie um post e coloque imagem, negrito, itálico, sublinhado, riscado, link, quebra de página, citação, título, enfim, tudo que quiser editar.

Agora vamos tirar o "Assinar Postagem (Atom)", ainda no Modelo | Editar HTML, aperte Ctrl+F e procure por include name='feedLinks' quando achar, apague e salve.

Por ultimo, vamos tirar a Navbar, é aquele negocio que fica em cima do blog e é feio, pra tirar é bem simples também, é só você ir na painel do blogger, Layout | Navbar - Editar


Irá aparecer Navbar de algumas cores e embaixo "Desativado", então você clica e salva. Prontinho!
Quando acabar seu layout ficará assim: 

3 - Começando a fazer ficar bonito.

Primeiro irei mostrar pra vocês algumas coisas que podem ser importantes para editar os códigos conforme você quiser. 
Tabela de cores 1 / Tabela de cores 2 - Serve para mudar as cores, quando ver algum código parecido com esse #85e2h5, procure na tabela de cores o de uma cor que queira e mude. 
Favicons - São mini gif pixel, para você colocar no seu blog no título, sidebar, usar como favicon mesmo(imagem que aparece na aba do navegador).

Caso você veja essas palavrinhas abaixo você pode editar:
dashed - serve para deixar a linha tracejada 
solid - deixa a linha normal
dotted - deixa a linha com vários pontinhos
groove - deixa um relevo mais escuro do que a cor na qual você escolheu
ridge - as cores trocam de lugar

Bom, agora vamos pra parte um pouco mais legal! Infelizmente eu não tenho mais tutoriais para blogger, então colocarei links de outros! 
Primeiro vamos começar com os gadgets, o meu foi feito por mim, mas caso você não saiba fazer, procure por um que tenha uma imagem e edite a imagem como preferir. 
Você pode ver alguns aqui: 
 Esse achei muito bonitinho, primeira vez que vi.
Muda quando você passa o mouse.

Cada um deles tem uma forma diferente de ser colocada, então leia um pouquinho a descrição para saber como, mas basicamente você vai procurar por alguma coisa e substituir ou colar o código acima ou abaixo.
Usando a tabela de cores e modificando as faixinhas da sidebar você deixa o modelo como você preferir, caso não goste do que tenha disponível. 

Agora vamos editar os títulos dos posts, assim como a sidebar você pode procurar um tutorial de um pronto e editar como quiser ou deixar como está e editar somente a posição, ou adicionar algo.
Para achar você pode pesquisar "Modelos para títulos de post" ou visitar algum destes: 
Esse recomendo muito, sempre usava antes


Vamos modificar a data do post! Essa é um pouco mais difícil porque dependendo da data você precisa modificar se ela irá ser por extenso, somente números, os meses e números, e etc, você também precisa prestar atenção caso a data seja ao lado do post, afinal se ela for do lado dos gadgets vai ficar feio né? Mas não é tão difícil, vamos lá /o/ 
Achei bonitinha essa data porém não tinha como ver antes, então coloquei.

Bom, eu gostei de algumas mas as que gostei não deram certo :/ Então coloquei uma diferente. 
Caso sua data tenha ficado bugada porque está grande e você quer que fique assim dia/mês/ano, salve, vá em Configurações | Idioma e Formatação | Formato da Data.

Agora, o fundo :3 É bem fácil, legal e ao mesmo tempo difícil e chato, porque é algo que deixa o blog ou muito bonito ou muito feio, é legal nessa parte você colocar um e ficar tipo "Woow, que lindo, scr", e chato porque sempre demora ;-; Mas vou dar uma ajudinha! Você pode encontrar fundo aqui:

Você pode colocar o fundo por HTML ou pela personalização, aquela que nós tiramos no comecinho! É só ir em Modelo | Personalizar | Plano de Fundo, caso queira por HTML, vá em Modelo | Editar HTML e procure por body {
Quando achar, substitua APENAS  background: $(body.background) por 

background: url("LINK DA IMG") repeat;

Mas espera um pouco, agora falando sobre o cabeçalho, caso você queira o cabeçalho em toda a extensão do blog, após procurar por body { e apagar background: $(body.background), cole no lugar
background: url("LINK DO CABEÇALHO") repeat-x; }
html {
background: url("LINK DA IMAGEM DE FUNDO") repeat;  }
html body .region-inner {
min-width: 0;
max-width: 100%;
width: auto;
}

Pronto! Ué, mas porque ta feio assim? 

Por que você precisa por uma imagem transparente para dar o espaço entre os posts e o cabeçalho e as letras sumirem! Pera, vou ensinar!
Primeiro, salve esta imagem aqui, você não vai conseguir ver, ela, mas é só clicar com o botão direito no canto e salvar.
No painel de blogger, vá em Layout | Header - Editar 

Em Editar, escolha a opção "De seu computador" e escolha a imagem transparente, assim que carregar escolha a opção "Em vez de título e descrição" e Salve.

Já está ficando bonito né? Ufa, falta pouco! 

Gostou do cabeçalho? Você pode salva-lo para usar sem as escritas clicando aqui!
Só não tire os créditos e avise se pegar! 

Bom, agora são só coisinhas a mais, para decorar e etc! Mas caso não queira continuar, você já pode organizar os seus gadgets da forma que preferir e usar o seu blog! E não esqueça de deixar os créditos dos blogs na qual pegou os códigos!

4 - Chegando nos limites da beleza!

Alguns tutoriais fáceis e rápidos para seu blog! 

Tutoriais um pouco mais difíceis mas valem a pena! 

Bom, é isso pessoal! Espero que tenham gostado e entendido! 
Talvez no futuro eu edite o post e vou colocando os outros tutoriais e etc, mas por enquanto é só! 
Alguma dúvida sobre o que eu falei é só deixar nos comentários.

Deixem seus blogs para que eu possa dar uma olhada e
Comentem!


43 comentários:

  1. Genty, garota você arrasou!! Estava louca para criar layout's e postar-los no meu blog que quase me suicidei ;-; Você deveria ser a rainha dos blogs, pois você me ajudou MUITO! Obrigada e que caia mais seguidores no seu blog :3

    ResponderExcluir
    Respostas
    1. Obrigado! Achei que ficou muito resumido então fiquei com um pouco de medo de ninguém entender, mas fico feliz que tenha gostado :3
      SHUAHS Sou nada, é um tutorial ainda beeem simples, irei melhorar com o tempo, quando tiver mais posts! Obrigado, pra você também *u*
      Não esquece de me mandar o link pra eu ver como fica ><

      Excluir
    2. Esse layout que você fez para testes na postagem, transfere ele para Layout Free :') Amei ele, não sei porquê mas, achei ele muito fofo >.< Desculpa estar falando assim ;-; sou meio doida da cabeça :'3

      Excluir
    3. Ele ainda está incompleto, faltam várias coisas, inclusive os créditos... E da um pouco de trabalho pra colocar, estou um pouco sem tempo também então por enquanto não dá, mas quem sabe nesse feriado? xD
      Obrigado 'u' Não tem problema UASAUHS Normal 'u'

      Excluir
    4. Ashuashua eu espero até lá xD Amei MUITO ele, tipo tá divosaun

      Excluir
  2. Este comentário foi removido pelo autor.

    ResponderExcluir
  3. Obrigada pelo tutorial, assim o meu blog ficou bem bonitinho

    ResponderExcluir
    Respostas
    1. Nada! Fico feliz que tenha gostado :3

      Excluir
  4. Moça do céu, eu fiz tudo certinho e tal
    Mais quando chega na hora do cabeçalho
    Fica tudo desigual
    Mesmo eu pegando as medidas certas
    Não fica certo no meu blog

    ResponderExcluir
    Respostas
    1. Manda o link para eu ver o que pode ter acontecido ^_^

      Excluir
  5. Adorei o tutorial, já estou criando o meu próprio layout!
    Tudo bem explicadinho e resumidinho -q
    Miga, porquê não transfere esse layout de teste que tu fez para layout free? ~minha opinião, fica brava comigo não~

    SAYONARAAA!

    ResponderExcluir
    Respostas
    1. Fico feliz que tenha gostado e entendido tudo! ^_^
      Infelizmente já apaguei ele para fazer outro layout x_x Nem me lembrei de salvar em outro lugar e acabei perdendo. Tudo bem 'u'
      Tchauzinho o//

      Excluir
  6. Meu Deus Sara eu te amo <3 HUHSUAHUHS

    Sério! Você me ajudou a fazer meu primeiro layout ( que está em andamento já que sou lerda xD )! Se não fosse por você, e os sites que você indicou não iria conseguir T^T Muito obrigado sua linda ♥

    Adorei seu blog, e o layout está perfeito ^^

    E eu também estava cansando de usar layout do outros, apesar de que vou demorar um longo tempo para fazer outro xDDD MUITOS CÓDIGOS, XESUS. Mas você explicou muito bem, e não ficou cansativo a leitura, mesmo estando extenso ^^ AMEIDOREI ♥

    Já ganhou mais uma seguidora °3°

    (( http://cherryspoon-net.blogspot.com.br/ ))

    ResponderExcluir
    Respostas
    1. Obrigado! Fico muito feliz que tenha ajudado :3

      Eu tentei explicar da melhor maneira possível e de uma forma simples também, eu dei uma olhada no layout que você fez e gostei muito! Fiquei feliz que na parte de colocar dois backgrounds você tenha conseguido!
      Já vi alguns que não conseguiram e a fonte ficou desconfigurada HSAUHS Estava preocupada com essa parte já!

      Obrigado! <3 Volte sempre, beijinhos 'u'

      Excluir
  7. Na hora do cabeçalho não vai a imagem que escolhi ;-;
    Me ajuda moça,pfv ta ficando bonitim :(

    ResponderExcluir
    Respostas
    1. Veja se você colocou o link no lugar certo, ou mande o código dessa parte para eu ver

      Excluir
    2. Coloquei...Mas a capa não está
      bem ajustadinha como eu queria...Mas
      tudo bem ^^
      dá uma olhadinha (pfv) dps: upixeladaaaah.blogspot.com.br

      Excluir
    3. A URL que mandou não está funcionando, mas entrei em um site no seu perfil e encontrei o otakupixeladaaaah.blogspot.com.br, olhei o código e está certo.

      Se queria colocar em toda a extensão do blog, é só substituir:
      background: #f3f3f3 url(http://1.bp.blogspot.com/-Ja9Xxwp5X-M/WCTAMpaQ2NI/AAAAAAAAAPE/sJN_tMcKZW4ONvKF_u2Mb0y6ogJBbuD8ACK4B/s0/IMG_4004.JPG) repeat scroll top left
      text-decoration:none;
      color: #538cd6;
      }

      Por esse código aqui:
      background: url("LINK DO CABEÇALHO") repeat-x; }
      html {
      background: url("LINK DA IMAGEM DE FUNDO/BACKGROUND") repeat; }
      html body .region-inner {
      min-width: 0;
      max-width: 100%;
      width: auto;
      }

      Excluir
    4. Há! Consegui...Obg ^^
      Mas...Qual é a dimensão certa
      do cabeçalho?

      Excluir
    5. Do tamanho do seu monitor :S

      Excluir
  8. Este comentário foi removido pelo autor.

    ResponderExcluir
  9. Este comentário foi removido pelo autor.

    ResponderExcluir
    Respostas
    1. Deixa com ele, acho que o código mudou pra apagar, depois atualizo!

      Excluir
  10. .content-outer .content-cap-top { <---- eu não consigo achar esse código :(

    ResponderExcluir
    Respostas
    1. Veja se você pesquisou certo, eu procurei aqui e deu certinho :/ Ou manda o link do seu blog e vejo se tem algo errado.

      Excluir
    2. Pesquisei certinho .. link: http://worldofmanuaratins.blogspot.com.br/

      Excluir
    3. Acabei de entrar, e consegui achar ele sim :/ Copia isso de novo, dá Ctrl+F, depois Ctrl+V e dá enter, a parte que for vai ficar com outra cor.

      Excluir
    4. Desculpe a demora para responder -_- é que não chega mensagem quando responde, mas eu faço tudo diretinho e não consigo :(

      Excluir
    5. Então não sei moça, achar código deveria ser o mais fácil e.e A caixinha para você procurar o código tem que aparecer dentro da caixona do código, e não no lado de fora, talvez seja isso que dá errado...

      Excluir
  11. Quando vou procurar os códigos, eu nunca encontro, porém quando eu procuro por todo layout eu encontro, porque não consigo encontrar?

    ResponderExcluir
  12. Olá! Eu fiz tudo certo, mas você poderia me dizer como
    conseguiu fazer o abaixo do título da postagem?
    Eu vi em vááários blogs e vi tbm até uns tutoriais só que não
    funciona no blog e desconfigura todo o layout,podia me dizer como conseguiu
    fazer assim?

    ResponderExcluir
    Respostas
    1. *o Post footer (acho que é isso)

      Excluir
    2. Deve ser porque você deve estar colocando errado... Já usei outros tipos e isso não acontecia não x.x
      É só pesquisar um tutorial, eu até explicaria ele aqui mas dá muito trabalho, é bem complicado, desculpa :/ Quando eu estiver de férias, altero o post com mais vários tutoriais.

      Excluir
  13. Oi, pode me dar dicas de como fazer o blog crescer?
    Eu deixei o meu em privado, pra quando iniciar já ser bem sucedido...

    ResponderExcluir
    Respostas
    1. Não tem como iniciar já bem sucedido, todo blog começa desconhecido e com poucas pessoas interessadas, já que tem poucos posts.
      Só que para crescer, eu recomendo fazer parcerias com outros blogs, sempre que comentar em outros blogs deixar o link, se seu blog for mais pessoal, é normal mesmo demorar, afinal como só fala de você, só amigas e quem estiver interessado vai ver... Há grupos no facebook, jogos e etc, também é bom participar, pq vc sempre tem dicas lá e ajudas. Plágio e até mesmo inspiração não são bons, pq vc tem que fazer algo que seja a sua cara, se você plagiar, alguém pode te denunciar e apagar seu blog, se você se inspirar, vai acabar ficando nada a ver com o blog ou com você. Bom, eu acho que é isso 'u' Boa sorte com o blog

      Excluir
  14. O meu quando eu fiz a minha postagem e talz, ficou tudo em branco!! Não estou entendendo

    ResponderExcluir
    Respostas
    1. Este comentário foi removido pelo autor.

      Excluir
    2. Este comentário foi removido pelo autor.

      Excluir
    3. Em que parte do tutorial você estava? Fez tudo que está mandando nele ou alterou algo a mais antes? Se você fez tudo que estava mandando, e não alterou nada antes, não tem como eu saber o que deu errado por aqui. Eu precisaria ver o layout com o erro.

      Excluir
  15. moçaaaaaaa NÃO TEM a barra de pesquisa do html para tirar aquele bagulhinho de papel amaçado e tals

    ResponderExcluir
    Respostas
    1. Só aparece depois de você apertar Ctrl+F, por favor leia o posto, nele está explicando.

      Excluir