TUTORIAL: FAÇA SEU LAYOUT

Hey gente, aqui é a Paula!
Recebi tantos pedidos que resolvi fazer um tutorial de como eu fiz o meu layout. Na verdade eu não o fiz, peguei uma base e fui modificando, e é isso que irei ensinar hoje. A primeira coisa é arranjar um template básico e fácil de mexer, achei esse no BTemplate, ele vai ser ótimo para trabalhar (pegue ele aqui). Esse é só o primeiro passo (não coloquei tudo por que o post ficaria imenso), amanhã irei postar outra parte para que fique mais personalizado e com cara de seu. Aconselho que todos tenham um blog de teste e façam backup do seu layout atual. O post ficou meio bagunçadinho, mas acho que dá pra entender. Vamos lá!



Agora vamos mudar algumas coisinhas na codificação:

Aperte Ctrl + F e procure por: body {

body {
background:#afdcd9; (aqui você  muda a cor do plano de fundo do blog)
color: #4c4b4c; (aqui você muda a cor da fonte do blog)
font-size: 13px; (tamanho da fonte)
font-family:Georgia,Trebuchet MS,  Sans-Serif; (fonte do blog)
text-align: left;
margin: 0 auto 0;
padding: 0;

Agora procure por: #header-wrapper {

width: 890px;
height: 280px;
color: #fff;
margin: 0 auto 0;
padding: 0;
overflow: hidden;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1VCA8B1sxjJX2CBTrO9S-Cz01We19anCq_QYrqEAo5GwzGmVh6dbBto426wRHSlhCxYd0LbpFGi9wHmtu1wbDSTkSPfgLve0e-eelTA-oAIp7UjM6GVYoQFRvPbyO_kQ60mc0fyZAAYFC/s0/happyday.jpg) no-repeat right bottom;
} (aonde está grifado é o link do banner/topo do blog, para colocar o seu é só substituir pelo link novo)

PS: no meu blog usei o tamanho: width: 980px; height: 400px;


Agora procure: #NavbarMenu {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGAmDZ1Zizrk5c0QB5ZMcTwkDif_22RNaQ4YBXF1uu13DaiorLS0ipsOzjUWHrwswj588Ij9JYyBHkdg9tne-rD9Om2Lyo9FiJz8DMJWfE7kiMHNBnnsE1Ql4uxgPuaq1SYaoFUgJazCuj/s0/navhappyday.png) no-repeat; (o grifado é a barrinha do menu, para alterar é só substituir o link pelo novo)
width: 890px;
height: 58px;
font-size: 14px;
color: #FFF;
font-weight: bold;
margin: 0 auto 10px;
padding:0px;
}

PS: Faça a barra de acordo com o tamanho que deseje e depois altere na opção grifada de rosa.

Agora procure por: #sidebar-wrapper-left

#sidebar-wrapper-left h2, #sidebar-wrapper-right h2 {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilQiFJwN6Fp86lvcR7pUxk4HUvmpgkrTyEMdOBZlZJE8YLXBbHwy_9TBCh0V6DWxfLDg1tj20TDqJANFnNB9MXI3Dv0-cwQHoXTgB6rDiV_ib3DX09LaS0hHsMbYF2pXLAYaZPs6i7quwX/s0/sidehappyday.png) no-repeat left center; (o grifado é a florzinha que aparece na sidebar, você pode escolher retirar e apague o link, ou substituir por outra imagem)
color: #f64c83;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
padding: 15px 0px 25px 50px;
margin: 0px;
text-align:left;
}

Agora procure por: #credit {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix0ya1U62-5whwrvlGfTV2Qg2e_OKI9nQXx6Cci58Ew243syTjLVSpQFaBSGh0Dzjq2_nf5ziJSxPdNzzkCDSN_YIgV2759WsSVnOodWYIvN-f1lVLqhx8ttDCfeoO1ej77eIpbUV3iOQT/s0/footerhappyday.png) no-repeat left top; (o grifado é a imagem no fim do blog, caso queira retirar é só apagar o link, para substituir troque o link pela nova imagem)
margin: 10px auto 10px;
padding: 0px;
width: 890px;
height: 55px;
font-size:11px;
clear: both;
font-weight: normal;
text-align:center;
color:#614431;
}

PS: Lembre de trocar o tamanho ou fazer a imagem de acordo com o tamanho da codificação: width: 890px; 
height: 55px;

+DICAS
Caso queira seu blog com os tamanhos iguais ao Universo Vanguarda troque os tamanhos:
Aonde tiver:  890px; substitua por 980px;
Aonde tiver:  280px; substitua por 400px;

Qualquer dúvida, deixe aqui nos comentários que irei responder (:

19 comentários

  1. Frann11/09/2013, 12:34

    Realmente ajuda muito,obrigada ;)
    http://commands-of-my-life.blogspot.com.br/
    http://books-ofmylife.blogspot.com.br/

    ResponderExcluir
  2. Ana Beatriz11/09/2013, 14:20

    Quando tiver tempo vou pegar o tutorial e começar a fazer. Eu queria muito aprender a fazer layouts, na verdade acho que toda blogueira quer, né? Iria facilitar muito a nossa vida. Eu precisei aprender pelo menos o básico de HTML pra conseguir me virar com o site.

    ResponderExcluir
  3. Natasha Magalhães11/09/2013, 14:50

    Ah, não tem nada melhor do que saber fazer o próprio layout e não ter que ficar dependendo de ninguém uahauahua.

    ♥ Blog Cerejas no Topo:
    http://www.cerejasnotopo.com

    ResponderExcluir
  4. Cih11/09/2013, 15:56

    ótimo tuto ;D
    Eu já faço o meu msm.
    ;*

    ResponderExcluir
  5. Juliana11/09/2013, 16:55

    Aiin que Layout lindo ! *-*

    etendenciabebe.blogspot.com.br

    ResponderExcluir
  6. AmandaVitória11/09/2013, 17:16

    Seu blog tem um ótimo conteúdo. Eu adorei. <3

    >> Visite o Blog<< SIGO DE VOLTA!
    - xoxo –

    ResponderExcluir
  7. Gaaby11/09/2013, 17:44

    Amei o tuto , lindo layout !

    Beijos e Deus te abençoe <3 '
    mundodasgarotasforever.blogspot.com.br

    ResponderExcluir
  8. Barbie Californiana11/09/2013, 18:50

    Que tudo, florzinha! Adoro esses tutoriais, até mesmo porquê quem mexe no layout e html do meu blog sou eu. beijinhos

    ResponderExcluir
  9. Thami12/09/2013, 07:27

    Esse post seu caiu do céu para a minha prima, hahaha. Eu mandei pra ela o link desse post, ela está começando com blog agora. Agora, eu tenho uma dúvida: você sabe como eu coloco no rodapé como se fosse uma onda? Tipo, em vez de ficar esse corte no final, um com formato de onda.

    xx,
    www.likeparadise.com.br

    ResponderExcluir
  10. Paula Melo12/09/2013, 07:50

    Thami, é só você criar a imagem do jeito que você quer e substituir lá na parte de #credit {
    xoxo

    ResponderExcluir
  11. Doce Vestido12/09/2013, 08:30

    Mas gente, esse post foi totalmente conveniente, eu adorei, eu li por alto mas eu vou por nos favoritos pra eu seguir o passo a passo depois, adorei
    e seu blog é maravilhoso, amei sua visita no meu, espero te ter por lá mais vezes
    beijos sua linda

    www.doce-vestido.com.br

    ResponderExcluir
  12. sim, 27!12/09/2013, 09:06

    Dicas de HTML são tudo de bom Paula!
    Principalmente para as leigas nesse mundo virtual, como eu :D
    Beiju ♥

    Tem sorteio no blog... Participe :D
    ♥ BLOG: SIM, 27! ♥

    ResponderExcluir
  13. Nathalia Iury12/09/2013, 11:30

    Não consigo mexer nisso de jeito nenhum, você não faz layouts pra vender? Ou tem algum pra me indicar?

    ResponderExcluir
  14. Pós Realidade12/09/2013, 16:25

    Não consigo fazer nada disso. Sou péssima com códigos.

    Beijos,
    posrealidade.blogspot.com

    ResponderExcluir
  15. Claudia Durau15/09/2013, 04:33

    Adorei as dicas, tudo explicadinho nos minimos detalhes, pena que o meu é wordpress =(
    Visita meu blog tbm?

    www.luxoincrivel.wordpress.com

    Beijo Luxuosa!

    ResponderExcluir
  16. Isabella17/09/2013, 09:08

    Adorei as dicas! Acho que sempre é bom ter uma noçãozinha a mais de como criar o seu próprio layout! Não irei utilizar ela agora, mas quem sabe mais para frente, né? Estou de volta e estarei aqui sempre de novo!! Beijos e tenha uma ótima semana :)
    maluquice de garota
    página no face

    ResponderExcluir
  17. Anonymous18/09/2013, 08:35

    http://animespirit.com.br/fanfics/historia/fanfiction-one-direction-lets-love-1130955 Dá uma Olhada no primeiro capítulo da minha fic que eu fiz com a minha bff! Se gostar,comenta,beijinhos (:

    ResponderExcluir
  18. Vih Roque24/09/2013, 20:27

    Que tutorial legal, vou usar ele quando for fazer meu próximo lay! Amo suas ilustrações e gostaria de saber quanto você cobra para fazer um banner pra mim.

    Beijinhos, Vih Roque
    linda-e-doce.blogspot.com

    ResponderExcluir
  19. Jennifer Leoncio25/09/2013, 07:47

    Aihn cara que demais!!!!!!!!!!!
    Quem me dera se o meu fosse possível enviar! =/
    Maldita plataforma do WP! =/ hahahahahah
    Beijinhos, querida
    Jennifer
    http://queridamaiscafe.com/

    ResponderExcluir