guia de blogueira

Guia de Blogueira - Criando um layout

23:19


Hoje vim trazer uma novidade que há bastante tempo eu queria trazer para vocês. Lembram que esses dias eu comentei com vocês que iria trazer um Guia de Blogueiras? Então hoje enfim sai o primeiro post dessa coluna aqui do blog. Bom para quem não sabe, clica aqui que eu expliquei nesse post.
Essa ideia do Guia de Blogueiras eu já estava querendo fazer há muito tempo, desde o começo do ano. Mas só esse mês que eu decidi colocar em prática. Comecei esboçando na agenda do blog os posts que seriam feitos sobre o assunto, e até o momento dividi em vários posts por assunto, ou seja, estarei sempre trazendo coisas novas nessa tag/coluna aqui do blog, provavelmente 1 post/semana.
E o primeiro post que eu decidi trazer é um guia de como criar um layout desde o início. Como vocês devem saber, no início do blog o foco dele era postar tutoriais para personalizar o blog, e aos poucos fui deixando de lado e mudei o foco dele. Mas até hoje, muuuitas pessoas procuram o blog, e comentam nas postagens antigas pedindo ajuda no design do blog. E como sei que isso é muito importante no blog, o design é a primeira coisa que um visitante vê ao entrar no blog, e tem que estar bem organizado, não precisa ser lindo, a organização já ajuda muito.
Clique em leia mais e vamos começar ao trabalho!



Iremos começar um layout básico desde o início de tudo!

Escolha o Modelo


Depois de você ter criado o blog, colocado o nome, URL e feito todo aquele processo, o próximo passo é escolher o modelo. Vamos usar o Travel (Viagem) na versão que tem umas "bordinhas" de papel no cabeçalho. E aos poucos ir mudando e personalizando ele. Para isso vá em modelo > Design de Modelo > Modelo > E escolha o modelo a Viagem, depois escolha o modelo Travel (azul com branco).



                  

 Escolha do Plano de Fundo

Agora vá em "Plano de fundo" vai aparecer a imagem que está no fundo do blog, e embaixo escrito "Remover Imagem" clique ali. Vai ficar um fundo azul mas já vamos resolver isso.


                                    



- Plano de fundo: É o principal, quando a gente entra num blog é praticamente o primeiro a se ver. Não use cores fluorescentes, prefira sempre tons de cinza ou clores claras. Assim você não deixa um clima poluído no blog. Ou também vale apostar na escolha de um escuro também. Encontre aqui vários backgrounds para deixar seu blog com a sua cara.

          

Imagem de background

Depois de ter escolhido a imagem que será seu plano de fundo, temos algumas sugestões aqui, clique na setinha com pontinha pra baixo do lado da imagem que estava no fundo, então vá em "Fazer upload da imagem" . Escolha o arquivo que você quer que fique como background do blog.




           

Agora vá em layout e escolhe o modelo que a setinha está apontando, assim a sua sidebar ficará do lado direito do blog. Caso não queire escolha outros modelos, recomendo que escolha o do lado direito, como na imagem.



- Colunas: ou a sua sidebar fica na direita, ou na esquerda. Se você optar por duas colunas num blog fica feio, e na minha opinião 2 colunas é usado para colocar muitos gadgets, que é a mesma coisa que desorganização.

                


Após isso vá em "Ajustar Larguras", esse é mais ou menos o tamanho "padrão" dos blog, mas ai você pode ir ajustando no tamanho da sua preferência, ou até se encaixar no seu estilo.




- Larguras: Uma coisa que eu não suporto são blogs muitos largos, realmente não fica muito bom. Mas essa escolha é uma opção de cada um.

                   

Personalizar cores

O próximo passo é onde vamos arrumar a fonte e as cores da fonte, vá para a opção avançado e vá em Texto da página, que é a fonte, a cor e o tamanho do texto das suas postagens. Recomendo que use Arial.
E as seguintes cores pro texto:
(copie código por código e vá testando)

#969696 | #666666 | #000000



                    

Próximo passo é o plano de fundo da página, deixe os dois transparentes como mostra a imagem abaixo.




              


Vá para Titulo do blog e deixe a cor em transparente e o tamanho em 0px .
A intenção é o nome do blog não aparecer no cabeçalho, pois vamos colocar uma imagem.



         
            

Agora vá em plano de fundo de postagem, e deixe na cor branco.



                    


Depois disso vá em Plano de fundo da barra lateral, que ai é a sidebar.
Deixe a cor da moldura transparente e na cor do plano de fundo coloque uma cor clara que agrade a você.




                      

O resto não tenho muito o que dizer. Então você edita o que falta, se quiser. Mas use cores que combinem com as que você está usando. E não altere o que já foi feito até agora. Depois disso salve.

                   

Retirando bordas feias

Depois de ter feito tudo isso vamos editar o template, para ficar com estilo e não ter mais aquela cara de template pronto do blog. Primeiro vamos tirar aquelas ondinhas que ficam em cima do template.



 Vamos em Modelo, editar HTML, e procurar por : content-outer .content-cap-top {

Apague todo o código marcado e visualize, ficará assim



                

Pronto, agora ele já está menos feinho. A parte difícil já foi, agora vamos deixar ele mais personalizado e bonitinho, para isso separei algumas postagens que serão úteis para vocês.


E nessa página de Goodies, temos outras posts para ajudar na personalização.
Dúvidas ou sugestões? Comentários abaixo!

You Might Also Like

38 Chocolates viraram Cupcakes

  1. Oi Giselle, muito interessante e útil o seu post! Adorei =D

    ResponderExcluir
  2. Oi flor! Seu post ficou hiper completo, parabéns!
    Amei a sua ideia de fazer um guia para blogueiros também, é sempre bom ver pessoas que compartilham conosco a sua experiência como blogueiro, amei!

    Beijinhos

    www.doceabril.com.br

    ResponderExcluir
    Respostas
    1. É verdade, eu adoro compartilhar coisas aqui no blog.
      E vou gostar bem dessa tag.
      Obrigada Midia
      Beijos

      Excluir
  3. Muito bem explicado adorei as dicas, bjs

    http://dicascoisasdemulher.blogspot.com

    ResponderExcluir
  4. Adorei o post, é bem útil, e super necessário,vou começar a faze rum layout novo
    beijos

    ResponderExcluir
  5. Adorei isso, vou admitir: sou pessima nisso e acho que depois disso irá ajudar muito. Bjs

    http://asgarotasdonl.blogspot.com.br/

    ResponderExcluir
  6. Adorei o post, e é super útil para as pessoas que estão começando a aprender a fazer layouts, não é verdade??
    Passa no meu blog e comente o que achou http://invasao-de-pandas.blogspot.com.br/!

    ResponderExcluir
    Respostas
    1. Sim é muito bom mesmo. E ajuda muito quem ainda nao sabe ne
      Beijos

      Excluir
  7. Fazer um tuto desses tem que ter muita disposição amiga!! Parabéns pela utilidade e riqueza de detalhes...^^

    beijos beijos

    ¦ Blog Dany's Place

    ¦ Tutorial e Dicas

    ResponderExcluir
    Respostas
    1. Demorou um poucao mesmo para fazer rs.
      Fico feliz que gostou.
      Beijos

      Excluir
  8. Gostei e favoritei, c: não sou muito boa com essas coisas

    Beijos, Joy
    http://blog-acridoce.blogspot.com.br/

    ResponderExcluir
  9. Eu sempre edito o meu e eu amo ele mas tô mega triste pq ele ta demorando anos pra carregar, tô pensando seriamente em encomendar um!
    Beijos da Cássia:*
    www.nosolhosdequemviu.blogspot.com

    ResponderExcluir
    Respostas
    1. É eu vi lá que tava demorando mesmo.
      Deve ser algum script que ta fazendo isso.
      Beijos

      Excluir
  10. ahhh curti! Esse tipo de post é muito bom!
    Bom saber que fazer um lay não é tão dificil assim kkk, o dificil é os detalhes ne?
    bjs

    ResponderExcluir
    Respostas
    1. É verdade amiga, nao é tao dificil. Apenas exige um conhecimento de html, e disposição ne
      Beijos

      Excluir
  11. Esses tutoriais sempre são uteis, parabéns pela ideia do Guia de Blogueira ;)

    ResponderExcluir
  12. O post da varias dicass otimas para quem não sabe mecher em um layout ainda,o ultimo do me blog é free mais eu até que gosto de fazer os meus propios.
    Amei seu blog muito fofo ele!
    bonecadeetiqueta.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Eu tbm gosto, e faz tipo bastante tempo que nao mudo esse rs
      Beijos

      Excluir
  13. Ótimo tuto meu amor!

    Parabens!

    Teamo!

    -> As inscrições para o ENEM 2013 já encerraram! Como está a sua preparação? Acesse: www.estudajovem.com.br - Estuda Jovem!

    ResponderExcluir
  14. Eu também faço meu layout mais ou menos assim, porém retiro a borda de papel do modelo viagem primeiro, depois vou fazendo o restante!
    O post é muito útil flor!
    Kissus

    modaetutorial.blogspot.com

    ResponderExcluir
  15. Por fim fazer um layout nem é tão difícil assim ^^
    fashion em cores -.com

    ResponderExcluir
  16. Amei o post Giselle, realmente é o que toda blogueira precisa aprender! Gostei bastante.
    Ah e muito obrigada pela visita no Confidence(Garotas em palavras)! Espero que goste do blog, vem muitas novidades por aí :D
    Inclusive, tem texto novo viu? O título é: Pra que amar se temos sorvete? Dá uma passadinha lá, tenho certeza de que vai gostar!
    Beijos linda, Lindo blog <3

    ResponderExcluir
    Respostas
    1. Concordo, é bem facil e seria legal se todas souvbessem ne
      Beijos, vou la ver logo

      Excluir
  17. Adorei o post, arrumei tudinho ! >.< Só um probleminha, e a foto ? Como faz ? Como coloco ?


    ResponderExcluir
  18. Oi Giselle! Tudo bem?
    Adorei seu post, ficou muito bom! Meu blog vai fazer 1 ano semana que vem e vi que ainda tenho muitas coisas a aprender quanto ao layout e outras funções!
    Gostaria de saber como você fez para colocar os ícones das redes sociais logo abaixo da sua foto e descrição de perfil.
    Agradeço desde já! Beijinhos e muito sucesso com o blog.
    Bárbara

    http://barbarapereiraa.blogspot.com.br

    ResponderExcluir
  19. Barbara, obrigada pelo carinho linda.
    Então, a foto de perfil está em um gadget e os icones estão em um gadget separado. Foi apenas isso que eu fiz, confesso que quando fiz até pensei que estavam muito distantes um do outro rs.
    Beijos linda

    ResponderExcluir

Deixe um recadinho sobre o blog. Obrigada!

Related Posts Plugin for WordPress, Blogger...