20 de jan de 2014

Tutorial: Layout Básico

Oi pessoas. Tudo bem com vocês? Tô amando "A Maldição do Tigre" (Acho que eu já falei isso né?), pois é, esse é um dos melhores livros que eu já li! (Exagerada? Eu? Imagina, meu bem!)

Bom pessoas divosas, estou percebendo que estamos perto de completar mais uma meta, na verdade não só uma, mas três!
Bom, estamos perto de alcançar a meta de 40 seguidores, 20.000 visitas (OMG! Como conseguimos isso tudo?) e 100 postagens. Pois é pessoal, o blog está a cada dia crescendo mais e mais e estou muito feliz por isso, porque isso recompensa toda a dedicação e amor que eu tenho por esse blog (Aí gente acho que vou chorar de emoção! -_-)

Chega de enrolação e vamos logo começar esse post.

Antes que você me mantem (É eu sei que vocês não seriam capazes de fazer isso, mas vai que... sei lá né?... acontece! Preciso me prevenir!), já vô logo avisando que o AW nunca foi criado com o intuito de ser um blog de tutoriais que ensinam modificar HTML ou de personalização de layouts, que disponibiliza goodies e etc. 
"Aí Jessica então porque tú tá fazendo um tutorial? Aff mô loca essa minah!"  Bom, porque eu recebi um pedido de ajuda (Sim, vou dar uma help pra uma people), e essa pessoa me pediu pra que eu ensinasse como fazer um layout e eu não vou recusar esse pedido.

Antes de eu começar o tutorial eu irei avisar algumas coisinhas básicas. Primeiro, nesse tutorial eu irei ensinar como personalizar um layout e não criar um, até porque eu só irei fazer modificações no modelo do próprio Blogger, segundo, personalizar um layout exige cinco coisinhas básicas: tempo, paciência, atenção, dedicação e criatividade, não dá pra criar um layout dá noite pro dia, muito menos na primeira vez, terceiro, eu sugiro que você crie um blog para testes, porque assim tem como você fazer as modificações necessárias antes de você colocar no seu blog principal.

P.S: Esse tutorial é baseado no tutorial do Cherry Bomb. 

O modelo que eu irei utilizar é o Travel (Viagem), porque a maioria dos meus layouts eu faço utilizando esse modelo e também porque ele é mais fácil de fazer modificações.

1º Passo: Para escolher o modelo Travel, você vai em modelo e escolhe essa versão:

Antes de modificarmos o HTML do seu blog, nós iremos destacar a área dos posts. Para fazer isso, ainda em modelo você vai em Personalizar e seleciona essas opções e escolhe a cor que você quer:

Bom agora nós iremos mexer na parte mais complicada de todas, o HTML. Para ter acesso ao HTML do seu blog, você vai em modelo (o mesmo lugar aonde nós fizemos as outras modificações) e clica nesse lugar:


2º Passo: Depois de ter acesso ao HTML do seu blog nós iremos tirar aquelas bordinhas de papel que ficam nas laterais:

Para fazer isso, aperte Ctrl+F e e procure: .content-outer .content-cap-top {

Logo abaixo disso você vai achar vários códigos, apegue somente esses que estão destacados. ATENÇÃO PARA OS PONTOS E VIRGULAS (;)
Clique na imagem para ampliá-la.

O resultado final é esse:

Agora vamos mudar o Background (Plano de fundo).

O background fica a sua escolha, mas vou indicar esses que são bem fofinhos:
  
Créditos: Sweet Girl

Para colocar um desses background você vai fazer o seguinte:

1º: Salve o background que você quer.
2º Vá em Modelo -> Personalização -> Plano de fundo e clica aqui:


E depois seleciona a opção de fazer o upload da imagem que você quer.

Outros tutoriais que ensinam como alterar a área do cabeçalho, postagem ou sidebar vocês terão que ver em outros blogs. Recomendo esses do Sweet Girl e do Cherry Bomb:

Centralizando título do post e dos gadgets. [www]
Colocando gadgets no cabeçalho. [www]
Personalizando a área dos comentários. [www]
Cabeçalho com letra diferente, PS [www]
Menu à esquerda deslizante. [www]
Usando qualquer fonte no blog. [www]
Bordas arredondadas. [www]
Estilos para títulos dos gadgets. [www]
Seleção colorida. [www]
Barra de rolagem colorida. [www]
Links em fade e sem sublinhado. [www]
Menus personalizados, [www] - [www]

"Terminei meu layout! Como colocarei ele?" É muito simples, vou ensinar do jeito que eu faço, porque eu não conheço outra :(

1º Passo: Vá em Modelo e clique nessa opção:

Para fazer o download do seu layout você vai na opção: Fazer download do modelo completo e logo depois você escolhe o arquivo correspondente ao seu layout para fazer o upload do mesmo e pronto!

ATENÇÃO: Meu conselho é que você faça também o download do seu modelo atual, antes de colocar o novo.

Lembrando que modificações feitas na área do Layout e não no HTML não aparecerão depois que você fazer o upload. Normalmente o cabeçalho e coisas escritas nos gadgets terão que ser colocados novamente na área do Layout e não do HTML, ok?

Bom gente é isso. Qualquer dúvida podem me perguntar e amanhã eu prometo que eu farei um post especial para vocês!

Kisses.

13 comentários:

  1. Nossa prefiro deixa meu blog do jeito que tá isso é muito difícil.
    Só acho .
    Kisses.

    ResponderExcluir
    Respostas
    1. Obrigada por comentar.
      É um pouco complicado no começo, mas depois você se acostuma e aprende mais coisas e aí tudo se torna mais fácil. Fazer o próprio layout não é um bicho de sete cabeças ^.^

      Excluir
  2. Obg por ter feito o post,eu tava indo tão bem ,mas eu fui aperta Ctrl+F e não pegou(tem o dedo do meu irmão com certeza),eu vou ver se compro outro.
    Ai quando eu comprar eu faço o layout!!!
    ~Não sei se foi pq eu bati a cabeça quando eu nasci kkk,mas eu achei isso facil!!

    ResponderExcluir
    Respostas
    1. Obrigada por comentar ^.^
      De nada, qualquer dúvida é só você me perguntar, ok?
      Não é fácil? Com o tempo fica mais fácil ainda, porque você se acostuma e aprende mais coisas :D

      Excluir
  3. Esses tipos de tutos são muito bons pra quem está começando >.<
    Kisses

    inside-oficial.blogspot.com

    ResponderExcluir
    Respostas
    1. Obrigada por comentar :D
      É verdade, tutoriais como esses ajudam muito mesmo ^.^

      Excluir
  4. esqueci que tem outro ctrl+f(eu fiz ,mas não deu mt certo não kkkk)

    ResponderExcluir
    Respostas
    1. eu acho que apaguei mais do que precisava,mas,eu consegui tira as bordas pelo menos kkkkk

      Excluir
    2. Se não conseguir fazer alguma coisa é só me perguntar, ok?

      Excluir
  5. Eu começei um outro blog totalmente novo. A primeira coisa que fiz foi mudar o modelo para o Viagem, aquele que você mostrou. Eu fui pesquisar o código .content-outer .content-cap-top { e não achei em lugar nenhum no HTML... oque eu faço?

    ResponderExcluir
    Respostas
    1. Obrigada por comentar ^.^
      Tem vezes que isso acontece mesmo... nesse caso você coloca apenas .content-outer e procura o trecho referente ao código: .content-outer .content-cap-top { completo. Se tiver mais alguma dificuldade me pergunte.

      Excluir
    2. Procurei por .content-outer mas também não encontrei... Fzr oque né? acho que vou deixar desse jeito mesmo! Mas mesmo assim obr pelo post! Estão cada vez melhores!

      Excluir
    3. Que pena :(
      Será que você tá pressionando o ctrl+f no local errado? Quer dizer, para você procurar qualquer coisa no HTML do seu blog você tem que pesquisar naquela área onde fica ele. Se você pressionar o ctrl+f, sem antes clicar naquele quadrado onde fica o HTML, você não irá pesquisar os códigos do HTML e sim da página inteira. Talvez seja isso...
      Espero ter te ajudado dessa vez.
      Obrigada pelos elogios ^.^

      Excluir

Regras:
1º: Comentários que tiver palavras de baixo calão serão excluídos.
2º: Deixe o link/url do seu blog para que eu possa visitá-lo.
3º: Pedidos de afiliações podem ser feitas através dos comentários e também através dessa página.