Como fazer layout

Oi Chocolateiros On ! 
Tudo , hoje eu passei pela prova de Historia e me entregaram a de ciências eu passei com a nota máxima que legal ne ? Amanha eu encaro a de Geografia e acabou tudo ainda bem não aguentava mais essa vida de prova isto é muito chato , mais enfim hoje eu não sabia oque postar e nem sei oque postar eu vou dar mais olhadas aqui e vou postar .
.A postagem de hoje é como fazer um layout eu peguei de um blog como muita gente não sabe fazer ne eu sou uma Ashashahshs Bom vamos a postagem de hoje ! 
1. Faça as imagens necessárias (sidebar - topo e base, cabeçalho/header e postagens - topo e base) para se criar um layout.


2. Vá no Painel do Blogger e crie um novo blog. É nele onde você vai codificar o layout.


3. No blog onde você criou, vá em Design > Editar HTML.


4. Vá no Pastebin onde se encontra o meu código base (http://pastebin.com/tp4ScmAQ) e o copie.


5. Apague todo o código que está lá e cole o meu código base.


6. Vamos editar os créditos do HTML. Essa é a parte mais fácil. O código (abaixo) tem espaço para colocar o nome do blog e a URL do blog. Apenas mude o que está lá pelo o que é necessário.
Nome: Nome do Blog
URL: http://URL-DO-BLOG.blogspot.com/
Código by: Ana Carolina - Art Design Encomendas
NÃO RETIRE OS CRÉDITOS OU VAI PARA A LISTA NEGRA!


7. Vamos editar as cores. Vocês podem pegar os códigos das cores no Photofiltre (veja como aqui).

Cor dos links: Aperte F3 ou CTRL + F e procure por #FF0066. Substitua todos os #FF0066 que forem encontrados pelo código da cor que você desejar.

Cor do texto: Aperte F3 ou CTRL + F e procure por #000000. Substitua todos os #000000 que forem encontrados pelo código da cor que você desejar.

Cor do meio da sidebar: Aperte F3 ou CTRL + F e procure por #FFBFD9. Substitua todos os  #FFBFD9 que forem encontrados pelo código da cor que você desejar.

Cor do meio das postagens: Mesmo esquema da sidebar (acima).

Cor do background: Para quem não sabe, background é o fundo do layout. Aperte F3 ou CTRL + F e procure por #FFFFFF. Substitua todos os #FFFFFF que forem encontrados pelo código da cor que você desejar.


8. Vamos editar as imagens. Vocês podem hospedar as imagem nesse site.

Topo = parte de cima (onde fica o título.)
Base = parte de baixo (o final).

Topo da sidebar: Procure por http://static.tumblr.com/vnmu0ry/mDglpzhcy/sidebar1.png e substitua pelo link da imagem do seu topo da sidebar.

Topo das postagens: Procure por http://static.tumblr.com/vnmu0ry/XjMlpzhp2/post1.png e substitua pelo link da imagem do seu topo das postagens.

Base das postagens: Procure por http://static.tumblr.com/vnmu0ry/zZXlpzhpt/post2.png e substitua pelo link da imagem da sua base das postagens.

Base da sidebar: Procure por http://static.tumblr.com/vnmu0ry/Ht9lpzhdx/sidebar2.png e substitua pelo link da imagem da sua base das postagens.


9. Vamos editar o cabeçalho/header.

Antes de mexer nessa parte do código é preciso mapear o cabeçalho/header. Para isso, vocês devem entrar no seguinte site: http://www.image-maps.com/. É fácil mexer nele, mas para quem não souber mesmo, conheço dois tutoriais legais aqui e aqui.

Depois de mapear, pegue seu código no Image Maps e volte para o blog. Procure por <div style='text-align:center; width:1100px; margin-left:auto; margin-right:auto;'>. Quando encontrar, apague do  início do código até a tag </div> (para não ter erros veja o que apagar clicando aqui).

Agora é só colar o código que você copiou no lugar do que você apagou.

10. Vamos editar os créditos principais. Procure por <div id='credits'>. Logo abaixo terá o seguinte código:
Código by: Ana Carolina - Art Design Encomendas (<a href='http://artdesignencomendas.blogspot.com/'>http://artdesignencomendas.blogspot.com/</a>) | Layout by: Seu Nome
Primeiramente troque o "Seu Nome" por realmente o seu nome. Se quiser colocar um link juntamente coloque <a href="LINK">SEU NOME</a>.
Opcional: Como eu saí do Art Design Encomendas, podem apagar somente o nome "Art Design Encomendas" dos créditos e mudar o link do blog pelo do meu Flickr que é http://www.flickr.com/photos/carol_liina/. Mas isso fica à sua opção.


11. Visualize e se estiver tudo certo, salve.

12. O layout está finalmente pronto! Se conseguiu fazer tudo sem erros, comente esse post, ficarei feliz em saber.

Avisos e instruções
(É importante ler!)

1. Visualize antes de salvar o código (clique em "Visualizar") para ver se está tudo certo com o layout.

2. Pode usar o código onde e quando quiser, mas está proibido retirar os créditos ou plagiar.

3. Não pode repassar o código para ninguém.

4. O código base está no Pastebin: http://pastebin.com/tp4ScmAQ

5. Não esqueça de fazer as imagens antes da codificação! As larguras em pixel (px) das imagens são:
Cabeçalho - recomendado: 1100px (máximo:1260px )
Sidebar - 300px
Postagens - 600px

6. Eu uso os programas Photoshop CS5, Photofiltre, Photofiltre Studio X e Photoscape. Podem baixar o Photoshop no PsTutorials4You e os demais programas no Softonic.

7. Podem hospedar as imagens no seguinte site: http://www.tumblr.com/themes/upload_static_file.
Beijos meus amores
Créditos: Art Desing


12 comentários:

  1. Respostas
    1. Thanks , quero ver depois O seu tbm é lindo eu tbm amo BEIJOS

      Excluir
  2. Este tutorial é bem últil para as pessoas que não sabem muito bem criar um layout! *u*

    Radioactive {}

    ResponderExcluir
  3. Ai gente
    amei a dica!
    O seu voce quem fez?
    Vou tentar fazer o meu.
    obrigada pela dica flor!
    http://loveandei.blogspot.com.br/2013/09/vamos-falar-de-musica.html

    ResponderExcluir
  4. Dúvida: Aonde tem o " Pastebin"?!

    ResponderExcluir
  5. Nossa esse post é muito util, amei seu blog tudo bem organizado e bem feito! Sempre que você poder da uma passadinha lá no meu blog! talytaxavier.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Thanks eu tento ser bem organizada ashash Beijos muito obrigado querida vou passar lá sim !

      Excluir
  6. Duvida: Cadê os tutos do header ?

    ResponderExcluir

-Segue,Retribui? Retribuo se eu gostar do blog.
-Não Ofender ninguém.
-Não falar palavrões .
-Sempre deixar o link do seu blog para retribuir.
-Leia o post antes de comentar!
-Comentários sem conteúdo serão ignorados.
-Leio todos os comentários e respondo
♥❤∞ ☆ ★ ✖ 。◕‿◕。® ™ ☏✿゚✤
❝❞✥ ✦ ✧ ✩ ✫ ✬ ✭ ✮ ✯ ✰ ✱ ✲ ✳ ❃ ❂ ❁ ❀ ✿✼ ✻ ✺ ✹ ✸ ✷ ₪ ❃ ❂ ❁ ❀ ✿ ✾ ✽ ✼ ✻ ✺ ✹ ✸ ✷
✶ ✵ ✴ ❄ ❅ ❆ ❇ ❈ ❉ ❊ ❋ ❖(◕‿◕✿) 。◕‿◕。 ⊱✿◕‿◕✿⊰(◡‿◡✿)(◕〝◕)◑▂◐ ◑0◐ ◑︿◐ ◑ω◐ ◑﹏◐ ◑△◐ ◑▽◐
●▂● ●0● ●︿● ●ω● ●﹏● ●△● ●▽●
⊙▂⊙ ⊙0⊙ ⊙︿⊙ ⊙ω⊙ ⊙﹏⊙ ⊙△⊙