Dicas para Blogs: Como Fazer Layout (parte 1)


Olá! Hoje aqui no Blog, vamos dar início na TAG de Dicas para Blogs, onde vamos conversar um pouquinho sobre vários assuntos da Blogosfera, e eu vou dar algumas dicas e sugestões sobre Seguidores, Divulgação, Layouts, Midia Kit e tudo que envolve esse universo que a gente tanto adora! Conto com a sugestão de vocês para continuar fazendo conteúdo pra essa tag, tá? ♥

Para começar, eu decidi fazer um tutorial de como fazer seu próprio Layout. Algumas pessoas sabem, outras não, mas o Theme aqui do blog, foi feito por mim, em mais ou menos um mês, nas minhas horas vagas. Fucei, achei tutoriais que se encaixassem no que eu queria, contei com a ajuda de algumas pessoas que me ajudaram a resolver alguns erros, e finalmente, consegui deixar o blog do jeito que eu queria. Ultimamente eu percebi que tem um errinho na contagem das páginas, mas já estou tentando resolver.. ahuahau mas de resto, por enquanto o blog vai ficar assim! ♥

O primeiro passo para criar um layout, é criar um blog de teste. Se tudo der errado, você exclui e começa do zero, ok? O importante é não desistir e seguir o tutorial certinho. Naquela setinha ali em baixo, quando você clica, aparece diversas opções, mas vamos direto na opção Modelo.


Aí, vai abrir essa tela aqui em baixo. Clique em Personalizar.


Quando abrir essa Janela, você vai escolher o Modelo Viagem 2. Normalmente, os tutoriais de HTML que vamos trabalhar lá na frente, funcionam melhor nesse modelo. Então, pra não dar nenhum tipo de erro, ou pra que algum tutorial não funcione, vamos usar esse, tá?


Na lateral esquerda desse painel, é onde vamos configurar as Larguras, cores do Plano de Fundo, de qual lado você quer que fique a Sidebar, e as cores dos links, títulos e etc. Essa parte é de todas a mais legal, e a mais difícil na minha opinião. Quando você trabalha com cores, é legal ver qual cor combina mais visualmente com outra. Pra isso, existe uma ferramenta na internet, que ajuda bastante na hora de combinar as cores em um layout ou em qualquer trabalho digital. É a roda das Cores.
Funciona assim ó: você escolhe uma cor, por exemplo: Verde Escuro. A cor que está de frente pra ela na Roda, é a cor que mais combina, no caso, a Vermelha. Mas as cores próximas à cor vermelha, combina também ex: Laranja e Rosa/Lilás. Deu pra entender como funciona? O gráfico ajuda bastante na hora de saber quais cores usar com quais cores. Então, aproveite essa parte, e divirta-se com seu Layout, teste, pergunte pras pessoas o que elas acharam, e enfim.. Não tenha pressa! 

Depois que você escolher as cores do seu Layout, vamos tirar esse fundo de papel amassado e as bordinhas dele do modelo no seu layout. Pra isso, agora lá na página Inicial, clique no botão ao lado de Personalizar, o Editar HTML.

quando a página abrir, aperte CTRL+F ou F3 e procure por:

.content-outer .content-cap-top {

Agora, é só apagar algumas partes do código. Cuidado pra não apagar coisas que não podem ser apagadas, ok? As partes que deverão ser apagadas, estão com marcador azul, aqui em baixo:

height: $(content.imageBorder.top.space); background:transparent $(content.image.Border.top) repeat-x scroll top center;}
.content-outer {
 margin: 0 auto;
 padding-top: $(content.margin);}
.content-inner {
 background: $(content.background); background-position: left -$(content.image.Border.top.space); background-color: $(content.background.color); padding: $(content.padding);}

ATENÇÃO: Só apague o que tiver marcado MESMO, tá? Não apague nem uma vírgulazinha a mais. Agora visualize, se estiver tudo ok, e o papel tiver saído do seu layout, já pode salvar.

Agora acalme-se que eu volto na semana que vem com mais uma parte (a última, prometo) kkkkkk dessa categoria de fazer seu próprio Layout, tá? 

Quando eu fiz o meu, eu usei o tutorial do Blog da Camy (Keep Camy) mas ela vai fechar o blog =( , e eu achei interessante fazer o meu próprio pra quando as pessoas virem me perguntar como eu fiz, e qual tutorial eu usei. 

Pensando em melhorar a frequência  de postagens com dicas, e em manter vocês sempre atualizados com o que tem de mais novo aqui no blog sobre o assunto, pensamos em criar um Mailing, o que vocês acham? 



Um beijo!

21 comentários:

  1. Blogs que dão dicas de como fazer layout e html são os melhores! ahahha Sério, eu tive e tenho muita dificuldade com meu blog, é tudo tão complicado e graças a esses blogs eu consegui fazer algo ao menos que preste! ahahahha Bjsss

    http://theblancnoir.blogspot.com

    ResponderExcluir
  2. Oi Mari! Sempre que eu tinha que fazer alguma coisinha no meu blog fazia logo nele mesmo e claro às vezes dá algo errado. Meu blog tá fachado pra eu tentar dar uma arrumadinha nele. Estou esperando aqui pela última parte do tutoria. Você vai ensinar como passar o layout já todo personalizado para o blog principal? Beijos (=

    http://palavras-e-sentimentos.blogspot.com

    ResponderExcluir
    Respostas
    1. Oi Sam! Na segunda eu já libero a segunda e última parte, tá? Mas ó, levar o layout do teste pro seu é simples.. só copiar todo o texto do HTML de um e colar no outro (mas tem que apagar todo o HTML do seu mesmo.. visualizar, corrigir o que tiver faltando e pronto! É super simples esse último passo, viu?

      Beijos e qualquer dúvida, pode falar comigo! ♥

      Excluir
    2. Ah, obrigada Mari!! Eu ativei meu blog e vou fazer as modificações no blog de teste. Já vou dar uma olha na segunda parte do tutorial. Estou seguindo aqui, pois alem de gostar do blog não quero perder nenhuma dica. Beijos *--*

      Excluir
    3. Obrigada Sam! Vou dar muitas dicas legais por aqui sim.. se quiser dar alguma sugestão, seja sempre bem-vinda, tá? Espero que você consiga fazer tudo certinho...

      Beijos!

      Excluir
  3. não consigo consigo achar o cod q vc pedi pra achar

    ResponderExcluir
    Respostas
    1. Oi Kah! você tentou localizar o código através do ctrl+f?

      Excluir
  4. Que perfeito ! Estou fazendo , agora vou lá na parte 2 beeijos haha

    ResponderExcluir
  5. Não consegui encontrar o código, tentei no ctrl f e no F3 :(

    ResponderExcluir
    Respostas
    1. Você instalou a base certa? Tem que dar uai!

      Excluir
  6. Não consegui achar o codigo, instalei a base certa, o que eu faço? :((

    ResponderExcluir
    Respostas
    1. Oi Mel! Quando você aperta o F3 ou ctrl+f5 o mouse tem que estar clicado dentro do código HTML, senão não acha mesmo!
      Beijos

      Excluir
  7. Vou tentar fazer o meu nas férias.

    www.crespasecacheadas.blogspot.com

    ResponderExcluir
  8. Esta semana começo a fazer o meu \õ/

    http://digadicaa.blogspot.com.br/

    ResponderExcluir
  9. Amei suas dicas acabei de criar o meu e ja personalizei do meu jeitinho suas dicas sao otimas!!

    ResponderExcluir
  10. Mari, onde está a outra parte agora? haahah vou inaugurar meu blog semana que vem e não tenho template bom!! Me ajuda.

    Adorei o tutorial.

    ResponderExcluir
    Respostas
    1. Oi! Todos os posts da série estão aqui: http://www.meninatecontei.com/p/dicas-para-blogs.html beijos e boa sorte!

      Excluir
  11. Adorei o post me ajudou muito.

    http://simplesmenteperfeita-p.blogspot.com.br

    ResponderExcluir
    Respostas
    1. muito legal!!!
      http://taissydias.blogspot.com visitem lá beijosss....

      Excluir

O Blog Menina, te contei? é um blog de Moda, DIY e Lifestyle