Oxi

Oi, vim aqui para dar as instruções de como editar meu código, espero que isso esclareça suas dúvidas! Antes de tudo, a única regra é nunca retirar os créditos e editar o layout!

1. Em seu editor de imagens faça o post, a sidebar, seu header, uma imagem para o fundo da data e outra para a barra de rolagem!;

2. Entre aqui e copie todo meu código base teclando Ctrl C; Depois entre no painel do Blogger, clique no nome de seu blog, vá em Modelo, Editar HTML, Prosseguir, tecle Ctrl A e delete tudo, no lugar cole meu código teclando Ctrl V

3. Vamos editar os créditos do código agora. Achem a parte que diz o seguinte e edite:

NOME: PLACE DESIGNS (substitua pelo nome do seu blog!)
URL: PLACEDESIGNS.BLOGSPOT.COM (substitua pelo link do seu blog!)
LAYOUT BY: AMANDA ROSA (substitua pelo seu nome!)
CÓDIGO POR: AMANDA ROSA. (não retire meus créditos!)

4. Quando precisar pesquisar algum código no html, tecle Ctrl F. Abaixo de "body {" você pode mudar a fonte, logo abaixo o tamanho dela, depois a cor, que você pode pegar o código aqui e depois em 'background' o fundo do blog;

5. Vamos editar a cor dos links agora? Em "a:link {", vai encontrar "color: #4E98FF" e então substitua o código da cor com a ajuda da tabela de cor linkada acima! Faça o mesmo em "a:visited {", que é a cor do link que já foi visitado antes; Em "a:hover {" mude o código da cor que quer que fique quando passamos o mouse sobre o link!

6. Agora vamos editar a data do post! Pesquise por: ".main-inner h2.date-header {" e logo abaixo pode encontrar o link de uma imagem, substitua pelo link da imagem que você fez, sugiro que faça do mesmo tamanho; Para pegar o link de uma imagem, faça o upload em uma nova postagem e depois clique com o botão direito do mouse em "Copiar URL da imagem"; Logo depois também vai encontrar "height: 20px;" que é a altura da imagem, mude para o valor necessário! Também há a cor, tamanho, fonte,...

7. Agora vamos ao topo da sidebar! Ache: ".sidebar h2" Vai encontrar o link "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW5vWMvuqLBWNQoTMjwsFVS2FdAQM4se8IkdjEUVQqc-xcZ29fF-PWhbu1xsmJCdsiK5W9yRumgTK9vHJzLkY1VxzQDjXmVHGGn0ayKhGJ8V_dvA4g6AKpvEhjlFDVYxYwA5v__qFmGg/s1600/sidebar1.png" substitua-o pelo da sua imagem, que pode pegar como disse anteriormente; Logo acima, verá "width: 296px; height: 90px;" o primeiro é a largura da imagem e o segundo altura, mude para o necessário! Também vai encontrar ali a fonte, tamanho, cor,... Não vou explicar tudo direitinho se não vai demorar, kk

8. Agora é a vez da imagem de topo do post, ache "/* Posts" e substitua o link da imagem que vai achar ali pelo seu. Em "color:" mude o código da cor; Em "h3.post-title a:hover {" substitua o código da cor que quer que fique quando passamos o mouse sobre o link; Agora vamos ao fundo do post, ache ".post-body {" e faça a mesma coisa, mude o link da imagem! Em ".post-footer {" também, a parte de baixo da sidebar;

9. Em "/* Widgets" pode mudar a cor dos links da sidebar, e em ".sidebar .widget" vai achar um link de imagem também, substitua pelo link da sua imagem da parte debaixo da sidebar; Em ".sidebar .widget-content" mude o link pelo da imagem de fundo;
CORRIGINDO ERRO: No Internet Explorer alguns códigos não funcionam, e surgem alguns errinhos, como o da sidebar; Nesse navegador fica um espaço entre o meio da sidebar e a parte debaixo! Por tanto, quando fizer a imagem da parte debaixo, deixe um espacinho de mais ou menos 2 dedos, para isso não acontecer!! Exemplo:

10. Ache "#footer-wrapper {" esse é o código que configura a cor da barra de créditos que fica lá embaixo no blog; Os códigos "border-top:10px groove #9FC5FF; background: #C2DAFD;" o primeiro é a borda, o segundo o fundo;

11. Agora vamos à barra de rolagem! A quem não sabe, uso imagens para dar aquele efeito sombreado, então procure por "::-webkit-scrollbar-thumb:vertical {" e substitua o link da imagem atual pela que você fez; Por isso pedi a imagem da barra de rolagem, aqui tem um modelo, façam daquele mesmo tamanho; Depois repita o link da imagem no código de baixo "::-webkit-scrollbar-thumb:horizontal {", e no outro (::-webkit-scrollbar {) ponha o link da barrinha que não se mexe!

12. Ache "a img {", esse é o código da borda das imagens linkadas!, modifique-o assim:

background: #C8C0F8; (cor do fundo)
padding: 4px; (espaço entre o fundo e a imagem)
border: 1px solid #8E7EEB; (cor da borda)

 Em "a:hover img {" mude da mesma forma, mas para as cores que quer que apareçam ao passar o mouse;

13. Agora ache "<div id='footer-wrapper'>" e edite a mensagem dos créditos; Vai ver isso:
LAYOUT POR: AMANDA ROSA // CÓDIGO POR: AMANDA ROSA //  PLACE DESIGNS // PLACEDESIGNS.BLOGSPOT.COM // PLÁGIO É CRIME!
Em layout por ponha seu nome, vale lembrar: não tire meus créditos!, sei reconhecer meu código! No lugar de Place Designs ponha o nome de seu blog, depois o link, e se quiser deixe o "Plágio é Crime".

14. Por fim, faça o mapeamento de sua imagem no Image-Maps, com a ajuda desse tuto, copie o código obtido e cole acima de "</header>";

Clique em Salvar Modelo e prontinho, você acaba de codificar um layout! Espero que tenha ajudado! Fiz esse tuto como a famosa Ana Carolina fez para seu código! Bem, qualquer dúvida, me envie um e-mail para: place.designs@yahoo.com

Obs: Com meu modelo de comentário, é necessário desativar o postado por, marcadores, ...

http://fimk.blogspot.com.br/2013/02/tutorial-fazendo-header-no-photoshop.html