título

Seu blog mais bonito: O Básico

24/02/2013



Eu estava navegando por alguns grupos do Facebook e vi que algumas blogueiras têm dúvidas em relação á HTML e design do blog. A verdade é que, não são todos os blogueiros que tem facilidade com códigos e nem todo blogueiro tem $$ para bancar alguém que faça isso por ele. Por essas e por outras, resolvi fazer um post com algumas dicas e tutoriais para deixar o template do seu blog mais "a sua cara". Primeiro vamos ás dicas:

1) Sempre tenha o seu 'Modelo' salvo no computador, o atual, é claro. Assim, toda vez que você fizer uma mudança nos códigos e algo der errado, você não precisa entrar em pânico. Para salvar seu modelo atual, antes de qualquer mudança, vá em 'Modelo' e lá no canto direito da tela, abaixo da sua foto você encontra o "botão" Fazer Backup/Restaurar. Clique e selecione Fazer Download do Modelo Completo (1), salve em um lugar que você saiba e coloque um nome para identifica-lo. Agora para fazer o download do modelo antigo, basta selecionar o arquivo, logo abaixo. (2)


2) Prefira o Modelo Viagem (Travel). Ele é mais simples e fácil de lidar e todos (ou a maioria) dos tutoriais de HTML e CSS funcionam nele. Para você escolhe-lo, basta ir em "Modelo" e rolar a página, os modelos 'Travel' são os últimos. Coloque o cursor sobre o segundo e clique em 'Aplicar ao Blog' e pronto, você vai ir para o ponto de partida (Modelo Viagem Bruto). 


Agora você já tem o modelo bruto que está pronto para ser lapidado. Você pode ficar tranquila/o pois os gadgets da sidebar (como o de seguidores) continuarão em seus devidos lugares, nenhum deles irá sumir. Enfim, eu apliquei o modelo viagem no meu blog de testes (que vai nos acompanhar nessa jornada de tutoriais e dicas de HTML, CSS e afins) e a primeira coisa que vamos aprender é a retirar aquele efeito "papel" do cabeçalho e os "dentinhos" no topo da página. 

Vá em Modelo > Editar HTML. Aperte CTRL + F e procure por  content-outer .content-cap-top { 
Quando encontrar, apague as partes do código que estão em vermelho: 

.content-outer .content-cap-top {
  height: $(content.imageBorder.top.space);
  background: transparent $(content.imageBorder.top) repeat-x scroll top center;
}

.content-outer {
  margin: 0 auto;
  padding-top: $(content.margin);
}

.content-inner {
  background: $(content.background);
  background-position: left -$(content.imageBorder.top.space);
  background-color: $(content.background.color);
  padding: $(content.padding);
}

Salve o modelo. Como a área dos posts e o cabeçalho irão ficar 'invisíveis' clique em personalizar (ao lado de editar HTML) > avançado > plano de fundo da postagem e selecione a cor que você deseja (eu sugiro cores neutras como o preto, branco, cinza ou bege). Agora, se a área da postagem ficar meio confusa com a sidebar, vá até 'ajustar larguras'. Quanto maior o medidor de "todo blog", maior a área de postagens e quanto maior o medidor de "barra lateral" maior será a sidebar.



Vá em Modelo > Editar HTML e marque a caixinha 'Expandir Modelos de Widget'.
Agora dê CTRL + F e procure por main-inner .column-center-outer {
Você irá encontrar esse código: 

.main-inner .column-center-outer {
  background: $(post.background.color) $(post.background.url) repeat scroll top left;
  _background-image: none;
}

Apague todo o código anterior e substitua por este:

.post-outer {
margin: 4px 2px 10px;
background:#fff;
padding: 20px 10px;

}

Agora visualize e, se tudo estiver certinho, é só salvar as mudanças.


Vá em Modelo > Editar HTML e dê CTRL + F e procure por /* Posts
Logo abaixo, cole este código: 

.post img{
border: 0; /* borda na imagem em zero, não altere */
margin: 0 -30px 0 -30px; /* margem da direita e esquerda, não altere */
padding: 0; /* espaço entre margens e imagem, não altere */
width:650px; /* tamanho máximo da imagem, pode e deve ser alterado */
}

(Créditos do código á Camila's Designs) Você só pode alterar o que está em negrito. Troque o número (650) pela largura total da sua imagem. Certifique-se de que ela está "centralizada" e não alinhada a direita ou esquerda (caso contrário ela ficará fora do post). Eu utilizei este código, mas ainda assim não ficou na largura do post, então eu fui até Modelo > Personalizar > Ajustar Larguras e diminuí o marcador de "todo o blog" até que a imagem ficasse na largura total, a minha se ajustou com o número 1004.

Vá até Modelo > Editar HTML e dê CTRL + F e procure por; 

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner { (se sua sidebar for direita)
.main-inner .fauxcolumn-left-outer .fauxcolumn-inner { (se sua sidebar for esquerda)

Você irá encontrar mais ou menos este código:



.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
  margin-left: $(content.padding);
  background: $(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;
}

Agora substitua o que está em negrito por transparent;
O código irá ficar assim:


.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
  margin-left: $(content.padding);
  background: transparent;
}

O fundo dos gadgets ficará transparente, agora para realmente separa-las, você precisa colocar cor. Utilize a  tabela de cores para isso.

Dê CTRL + F e procure por /* Widgets
Você irá encontrar este código:

.sidebar .widget {
border-bottom: 2px solid $(widget.border.bevel.color);
padding-bottom: 10px;
margin: 10px 0;
}

Agora substitua o código acima por:


.sidebar .widget {
  border-bottom: 2px solid $(widget.border.bevel.color);
  padding-bottom: 10px;
  margin: 10px 0;
background: #FFFFFF; 
}

Enfim, essa é a primeira parte do "básico", no próximo post irei abordar outros assuntos que considero básicos também. Você pode acompanhar a evolução dos tutoriais através deste link, vendo "ao vivo" os resultados. Se tiver alguma dúvida, basta deixar nos comentários. Ando pesquisando bastante para esta série de posts e ando aprendendo bastante, espero poder ensinar á vocês tudo que eu estou aprendendo. E aí, o que vocês acharam do post? 

11 comentários:

  1. Gente, socorro, como assim??? Eu ameeeeei o seu blog!! Adorei cada detalhe e cada cantinho dele haha Vou viver aqui agora, te juro!! <333

    Parabéns linda!!
    http://www.garotadabossa.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Awwwn que amor *-* Fico muito, muito feliz que você tenha gostado! Viva aqui, tem biscoitos.. Você sempre será bem vinda <33

      Obrigada Querida!!!
      Beijos, beijos

      Excluir
  2. Muito boas essas dicas!Olha, onde vocÊ escreve essas letras fofinhas?
    Beijos,Geo.
    tgeekstyles.blogspot.com

    ResponderExcluir
  3. Amei as dicas até porque quem personaliza meu blog sou eu. Ele pode não ter O layout, mas acho bem bonitinho simples assim do jeito que tá.
    E o modelo viajem realmente é o mais fácil, fora que acho até o mais simpático de todos.
    Beijos

    ResponderExcluir
    Respostas
    1. Que bom que você gostou!! Sabe aquele ditado "menos é mais"? Poisé, acho que um blog com um design mais simples e um conteúdo bem trabalhado é bem melhor do que um que tem 'o layout' e um conteúdo ruim.
      Na hora de personalizar eu prefiro o viagem. Não me acerto com os outros. haha

      Beijos, beijos

      Excluir
  4. Adorei o blog e as dicas! Me ajudarm muito com meu blog.

    http://coisasqueeufizporthalita.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Que bom que gostou do blog e das dicas, Thalita!!! *-*

      Beijos, beijos

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

    ResponderExcluir
    Respostas
    1. Que legal! Seu blog é muito lindo mesmo, parabéns. :D

      Beijos, beijos

      Excluir

Related Posts Plugin for WordPress, Blogger...