26/11/2012

Big Tutorial: Criando um Layout (Template)


Yo bunnies, hoje vou mostrar como criar seu próprio layout, template, theme como desejar chamar. É super fácil de fazer em horas você cria um modelo básico é claro se for colocar vários efeitos vai demorar mais. Tempo atrás eu fiz essa postagem comemorando os 250 seguidores,  mas o blogger mudou novamente sua forma de ser editado. E percebi que o tutorial não esta ajudando porque muitos códigos situados que se procuravam esta de outra forma. Então vim atualiza-lo e espero que continue a ajudar vocês. Da outra fez fiz o tutorial direcionando para outras postagens, mas desta vez vou fazer diferente. Farei com os códigos aqui a não ser que sejam muito extensos. Tá bom? Então vamos lá jujubas de uva.


1º Passo: A base

O primeiro passo e muito simples! Pode parecer difícil começar do zero, mas com os passos que irei ensinar vai ser moleza. Então venha comigo! Primeiro iremos escolher o modelo do template. A maioria dos blogueiros utilizam o template Travel modelo 2, que e totalmente editável. Siga na demonstração abaixo:

Clique na imagem para visualizar melhor

Se estiver assim, como na imagem a cima, já pode salvar. Agora vamos trocar o fundo do blog, eu geralmente deixo o fundo sem imagem, só na  cor cinza mesmo, depois retorno e coloco a imagem. Assim eu trabalho melhor no meu template.

Mas para você mudar o fundo vá ate a aba Plano de fundo, clique no quadradinho com a imagem atual do seu plado de fundo, vá em Upload Image, e troque por um background que esteja em seu computador, ou remova o fundo deixando apenas a cor.

 Clique na imagem para visualizar melhor

Ótimo, Agora vamos ao Editar HTML. Você vai reparar que o modelo Travel tem umas bordinhas e ondinhas, muito feias no cabeçalho e no fundo da postagem. Então iremos remove-la completamente, então vamos remover. Para isso use esse tutorial: >Remover bordas do modelo travel-

Depois de executar o tutorial ele ficara assim:

   
Clique na imagem para visualizar melhor

Sei! Sei! Esta feio  mais isso e só o inicio rsrs. Agora faça uma uma postagem de teste, dentro desta postagem coloque, blockquote, imagem, ative o negrito, itálico, sublinhado tudo mais que for necessário. Agora trabalharemos no fundo da postagem, para isso vá em:

Modelo>Personalizar> Avançado > Plano de Fundo da Postagem.

Ele estará em transparente, então selecione a cor que desejar, eu fiz preferência pelo branco e ficou assim o resultado, se seguiu direitinho o seu terá o mesmo resultado.

  Clique na imagem para visualizar melhor

2º Passo: Estética

Essa e a parte mais enjoadinha é a parte onde vamos dar vida a aparência do layout ou seja personalizar as cores, gadgets, imagens, cabeçalhos entre mais coisas. Eu só irei explicar mas vocês personalizam da forma que desejarem afinal cada um tem seu gosto correto?

A primeira coisa que costumo fazer após a base pronta é remover a navbar. Eu acho que ela tira a beleza do layout então a removo o mais rápido possível. Para remove-la ou melhora-la basta seguir os tutoriais a baixo, a três deles escolha o de sua preferência:

>Navbar em estilo hover
>Remover Navbar sem HTML
>Removendo a Navbar

Agora sem aquela nave-alien, vamos editar a sidebar que é uma das áreas mais importantes do template, mas antes de mexer você tem que já ter uma ideia de que cores você deseja usar. Nada de usar cores berrantes e cegamente que deixe as pessoas com os olhos doendo ou que não tenha nem uma combinação! Tem muitos sites e blog que tem tabela de cores ou ache uma imagem com cores legais e trabalhe nelas é assim que faço. Para personalizarmos a sidebar, vá em:

Modelo>Personalizar> Avançado > Plano de Fundo da Barra Lateral

Agora basta coloca-la em transparente, como mostro na imagem abaixo. Você vai notar que o fundo irá desaparecer, salve e volte até Editar HTML.

  Clique na imagem para visualizar melhor

Agora vamos arrumar esta sidebar, adicionando um fundo personalizado e título bonitinho. Vocês podem arrumar da forma que desejarem, muitos blogs já tem modelos de sidebar prontas para adicionar. Tem algumas antigas aqui no blog porém se procurar vai achar muitas lindas por ai: >Modelos de Sidebar

Lá já mostra como adicionar mas irei repetir aqui, para trocar a sidebar vá ate seu HTML e procure por
 /* Widgets apague de .sidebar .widget { ate a ultima chave de .sidebar .widget:first-child  e cole o novo código no lugar, então salve.


 Clique na imagem para visualizar melhor

A próxima coisa que temos que fazer e personalizar a área das postagens, é algo muito simples mesmo. Vamos adicionar uma fonte diferente no título da postagem, então use esse: >Colocar fonte diferente no blog
Se quiser centralizar ou mudar a posição do titulo ele use esse tutorial: >Mudar a posição dos títulos
Se desejar colocar uma linha abaixo das postagem utilize essa postagem: > Bordas abaixo do título
Ou utilize modelos prontos: > Modelos de títulos

A área das postagens é muito importante ficar bonitinha então vamos adicionar umas bordas para chamar atenção né? Eu acho que fica legal sólida, mas aconselho fazer da mesma forma do gadgets, para não ficar cada canto de uma maneira, claro que isso varia do modelo que vai criar: >Adicionar bordas no blog

  Clique na imagem para visualizar melhor

Título e área Ok! Agora vamos mexer na data! Você pode só remove-la ou personaliza-la. Para remove lá vá ate lá remova a cor e o tamanho da fonte deixando em 0px:

 Modelo>Personalizar> Avançado > Cabeçalho de data

Se quer personaliza-la utilize um dos tutoriais abaixo ou pesquise no blog por novos modelos:

>Modelos de data
> Estilos para data de blog
> Personalizar data do blog
> Data com efeito hover
> Data com faixinha
3º Passo:Personalização

Estamos quase no final, porem esta aparte mais extensa pois se trata dos detalhes.O cabeçalho ficara por conta vocês, afinal cada um tem seu estilo e gosto. Eu por exemplo gosto dos mais simples possível, mas nem todos gostam de simples.

Vamos agora editar as funções o negrito, itálico e sublinhado do blog. Pode parecer coisa pequena mais faz muita diferença para isso use um dos tutus abaixo:

> Negrito, Itálico, e Sublinhado com efeito Hover
> Itálico, Negrito, Sublinhado automaticamente colorido


 Clique na imagem para visualizar melhor

Bem melhor não é? Agora iremos mexe nos links, se quer deixa-los em efeito fade use esse: >Links em fade
Caso não queira vá em o local situado e arrume as cores como desejar:

 Modelo>Personalizar> Avançado > Cor de links

Agora vamos remover uma coisinha que praticamente não usamos e atrapalha bastante: Os botões de compartilhamento. Para fazer isso vá ate o seu Layout e em "Postagens do Blog" clique em editar. Abrira uma nova janela e então é só desmarcar a caixinha de "Mostrar botões de compartilhamento".

Agora vamos adicionar bordas no  footer é igual o que fica no titulo das postagens ele serve para separar os marcadores, número de comentários, nome do autor e etc... aqui esta o tutorial: Personalizando os Footer

A próxima etapa e cuidar do "Leia Mais", "Mais informações>>" ou "Read More" a varias formas de você personalizar, mas mostrarei duas:

>>Personalizando o Leia Mais
>> Colocando "Leia Mais" com imagem

 Para mudar o texto do balão vá em Layout >> "Postagens do Blog" clique em editar. Abrira uma nova janela e então lá estará escrito uma das frases acima apague e coloque o que desejar.

  Clique na imagem para visualizar melhor

 Uffa, estamos quase lá. Agora iremos remover duas coisinhas que fará muita diferença:

>Remover "Assinar: Postagens (Atom)"
>Removendo o "Attribution, Tecnologia do Blogger"

Agora são pequenos detalhes como, menu, blockquote, cursor, favicon, opacar imagens, efeito de bordas, efeito em afiliados e etc... ai já ficaria gigantesca a post se eu colocar tudo não é? rsrs
Porem aqui no blog, tem vários tutorias, estilos de blockquote, menus e todos que listei a cima. Bom vou terminando a post por aqui espero que ajude vocês e que tenham gostado. Ate a próxima postagem pessoal e não esqueçam de comentar. Bye bunnies.

Atualizada em: 09|08|2013

67 comentários:

  1. Bem explicado

    ResponderExcluir
  2. Drw este tutorial ficou ótimo...
    é sempre bom ver estes tutos...
    eles ajudam bastante..

    kissus

    dazzling--world

    ResponderExcluir
    Respostas
    1. Arigatou! Que bom que achou que ficou bom.
      Mas e verdade realmente ajuda muito ^^

      Excluir
  3. Anônimo13/12/12

    Obrigada esse tutu me ajudo mto

    ResponderExcluir
  4. Anônimo15/12/12

    Brigaduuu amei seu post me ajudou muitisimo kkkkkkkkkkkkkkkk

    ResponderExcluir
    Respostas
    1. De nada, fico contente que tenha lhe servido

      Excluir
  5. EEi tudo joia ? Amei seu blog ,faça uma visitinha ao meu e siga la http://asdivasdasunhas.blogspot.com.br/.
    Parceria topa?
    Beijos
    asdivasdasunhas@gmail.com

    ResponderExcluir
  6. Olá flor, aceito afiliação sim, mas seria possivel seguir o blog? Ja estou seguindo você.^^

    ResponderExcluir
  7. amei esse tutorial e já apliquei no meu blog!

    ResponderExcluir
  8. Nossa ajudou muito *-* Vou aplicar no meu blog agora mesmo!

    ResponderExcluir
  9. Que bom, que lhe ajudou Kiih, fico feliz

    ResponderExcluir
  10. Me ajudou muitoo ! Fiz um blog novo com suas dicas
    world--paradise.blogspot.com.br Ainda não está terminado mas está andando :D

    ResponderExcluir
    Respostas
    1. Yo Rocky, fico contente que tenha lhe ajudar, esta ficando lindo

      Excluir
  11. Nossa, Amei! Muito bem explicado, eu usei, obrigada pela ajuda ^^

    ResponderExcluir
    Respostas
    1. Que bom que lhe ajudou, fico contente ^^

      Excluir
  12. Amei seu blog "diva"!Já estou fazendo o meu! ^^

    ResponderExcluir
  13. Anônimo6/7/13

    Yo! Com o novo editor do Blog, sabe me dizer onde se coloca o código para a borda? É que eu não estou encontrando T.T

    Bye! ^^

    ResponderExcluir
    Respostas
    1. Você adiciona a onde deseja que ele apareça exemplo tem o código da sidebar e você quer a borda então e só colar o código na área da sidebar ^^
      Mas o novo editor deixa o código meio que fechado ai você procura por ]]> assim vai abrir e aparecer as coisas melhor.

      Excluir
    2. Anônimo7/7/13

      Arigatou ^^

      Excluir
    3. Anônimo7/7/13

      Esse tutorial me ajudou muito ^^

      Excluir
    4. Nya que bom João, fico feliz em ser útil ^^

      Excluir
  14. Não achei o código do tuto que deixou, o que eu faço?

    ResponderExcluir
    Respostas
    1. Qual tutorial você não achou o código?

      Excluir
  15. Obrigada por esse super tuto ;3 Agora já sei como fazer layouts, e graças ao seu blog, muito obrigada mesmo !

    ResponderExcluir
    Respostas
    1. De nada linda eu que fico super feliz em poder ajuda-la. ^^

      Excluir
  16. Anônimo16/10/13

    Ain esse tutorial me ajudou muito no meu blog !
    Parabéns amei tudooo

    ResponderExcluir
    Respostas
    1. Obrigada linda, fico contente que tenha lhe ajudado.
      Obrigada :3

      Excluir
  17. Wendy-chaaan vim agradecer por esse big tutorial, só depois que eu encontrei ele que eu consegui fazer meu primeiro layout. Estou tão feliz kkkkkk
    Muito obrigada mesmo, ajudou muuuuuito! <3
    Beijinhos e feliz 2014 *o*

    http://aprendiz-de-mangaka.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Nyu sensei, fico tão feliz que tenha conseguido fazer eu primeiro lay, e fico mais ainda mais feliz em saber que meu tutorial pode lhe ajuda, nossa nem faz ideias de como isso me alegra. O layout ficou realmente muito lindo :3 Obrigada por tudo para você também e feliz 2014. :3

      Excluir
  18. Oii ^^
    Usei todos os tutoriais e
    estou fazendo meu proximo lay com eles *-*
    Segue ?

    livingfreedom-madeinusa.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Jura? Que honra!!! Obrigada por comentar farei uma visita se eu gostar sigo, esta bem? Beijinhos

      Excluir
  19. o meu não pegou na parte de lei mais, você sabe por quê?

    ResponderExcluir
    Respostas
    1. Ultimamente isso tem acontecido experimente procurar por .mobile e colocar abaixo dele.

      Excluir
  20. Adorei me ajudou muito ♥ usei pra fazer meu lay,estou creditando ♥
    Garota Lezada

    ResponderExcluir
    Respostas
    1. Olá linda! Muito obrigada por creditar fico feliz que o tutorial tenha lhe ajudado. :3

      Excluir
  21. Eu queria muito agradecer a você.Porque se não fosse por você,meu blog nem estaria tão bonito como agora.Muito obrigado mesmo. *-*

    ResponderExcluir
    Respostas
    1. Olá Lary eu que agradeço por poder ser útil, fico realmente grata. *-*

      Excluir
  22. Muito bem explicado, obg

    ResponderExcluir
  23. Muito Bom

    http://livros-sonhos.blogspot.com.br/

    ResponderExcluir
  24. Obrigada me ajudou super

    ResponderExcluir
  25. Omg, q blog perfeito, amo seus tutoriais, eles sempre me ajudam mt, vcs tão de parabéns <3 Seus divos <3

    ResponderExcluir
  26. Nossa, esse tutorial me ajudou e muitooo, eu não tinha noção de nada em Html e agora consigo fazer meus próprios Layouts!Muito obrigada, viu? :3

    ResponderExcluir
    Respostas
    1. Hihi que booom!!! Fico feliz por poder ajudar. :3

      Excluir
  27. Amei e usei no meu blog coletivo com minhas amigass

    ResponderExcluir
  28. legal eu sei que essa postagem vai me ajudar muito
    quem quiser vai lá no meu blog só por enquanto vou estar modificando:
    www.ddebaixodagua.blogspot.com

    ResponderExcluir
    Respostas
    1. Que bom que está lhe sendo útil, obrigada por comentar e pela visita.

      Excluir
  29. Anônimo18/10/14

    Adorei, me ajudou muito, usei no meu blog e ficou perfeito.

    diamondfearless.blogspot.com

    ResponderExcluir
    Respostas
    1. Ahh, jura? Que bom fico tão feliz por isso.

      Excluir
  30. Usando no meu novo lay, mtoooo tudão amei ♥

    ResponderExcluir
  31. Mds obrigada! Foi o único tutorial pra fazer meu layout que eu realmente entendi! Obrigada mesmo! Beijos ♥

    ResponderExcluir
    Respostas
    1. Por nada Paula, fico feliz poder ajudar. Eu fiz pelo motivo de não entender muitos tutorias de como criar layouts. Mas eu que agradeço pela visita, pelo comentario e por escolher meu tutorial para lhe ajudar. Beijinhos.

      Excluir
  32. Nossa! Ajudou muuuuito! Usei essas e outras dicas para um blog de testes! Parabéns pela tuto diva!

    adeanimes.blogspot.com

    ResponderExcluir
    Respostas
    1. =3 Obrigada pelo elogio! Boa sorte com o blog.

      Excluir
  33. AMEIIIIII!!!!!
    O post me ajudou muito no meu blog!!!
    Beijinho :33

    vidadanovata.blogspot.com - Vida da Novata

    ResponderExcluir
  34. Anônimo28/12/15

    os links estão inativos, mas mesmo assim me ajudou pra caramba, eu soube pelo o que pesquisar hahahaha
    obrigadinha <3

    - dangerous (primeira vez, torcendo pra dar certo)

    ResponderExcluir
    Respostas
    1. Oie obrigada pela dica, vou atualizar ^^
      Espero que consiga fazer ^^

      Excluir
  35. Olá, recentemente eu tento seguir esses tutoriais que precisa ir em >Tema>editar HTML, porém sempre que pesquiso no ctrl+f, não acha nada..
    Só consigo usar os tutorias que usam os códigos no >Layout. Por que o HTML do meu blog é diferente?
    moji-yanime.blogspot.com

    ResponderExcluir
    Respostas
    1. Oie, acredito que não seja diferente. Todos os blogs são iguais, quando for fazer pesquisa no ctrl+f verifique que não tenha espaços antes ou depois da palavra que pesquisa exemplo, você vai procurar body{ veja se não tem espaços tipo " body { ", apague eles e com certeza você vai conseguir achar. ^^

      Excluir

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345