Cabeçalho

O Blog Html e Css tem como objetivo esclarecer todas as tuas dúvidas sobre design, codificação e personalização de blogs. Pede um tutorial, ou tira as tuas dúvidas. Estou aqui para te ajudar e faço-o de bom grado. Sugestões e perguntas são sempre bem-vindas. Obrigado pela visita e volta sempre.
- Zé Pedro Silva.

12/08/2013

Big Tutorial: Editar e Aplicar Tema PSD - Parte 3

Hey visitantes *-*, nesta última parte deste Big Tutorial sobre editar e aplicar no blog um Tema PSD, vamos fazer as últimas alterações na codificação do Tema PSD.

Nesta última parte do big tutorial, vou disponibilizar o Menu PSD, ensinar a alterá-lo, ensinar a mapeá-lo e ensinar a posicioná-lo no blog, com CSS.
Eu sei que há outras formas de mapear o menu, mas eu vou ensinar, da forma que eu acho mais simples, e para não ser tão confuso, vou disponibilizar todos os códigos, e ensinar a colocá-los.

Primeiramente, peço-te que faças o download só do Menu PSD, clicando no link abaixo.

•• Menu PSD

Agora de acordo com as explicações desta imagem (print), peço-te que alteres o texto do menu (se necessário), e que o centres.

Depois de teres guardado o menu, em formato .psd, vais ter de mapeá-lo. Para o fazeres segue o tutorial já postado cá no blog, clicando aqui.

Depois de teres o Código HTML, do menu, cria outra miniaplicação HTML/JAVASCRIPT, por baixo da miniaplicação da Descrição do Blog. Nessa miniaplicação que crias-te, cola lá o código do menu, já mapeado. Depois de guardares, o menu vai aparecer assim (print). Como viste, o menu está desalinhado, vamos ter de o chegar mais para cima; para ficar sobreposto em cima do menu do tema. Para isso, basta usar uma div, tal como fizemos para alinhar a descrição do blog.

Então, vai ao HTML do teu blog, e acrescenta o código abaixo, por baixo do código da descrição (print). Guarda o tema.
/*POSICIONAMENTO DO MENU*/
.posicionarmenu {
margin-top:-76px;
margin-left: 20px;
position:absolute;
}
Agora para o menu ficar posicionado, tens de fazer uma última coisa. Vai à miniaplicação, onde colas-te o código do menu e faz as seguintes alterações.
  • acrescenta <div class="posicionarmenu"> antes de todo o código do menu;
  • acrescenta </div> no final de todo o código do menu.
Vê a imagem de exemplo (print).
E pronto, chegámos ao fim de toda a Edição, Codificação e Personalização do Tema PSD. Espero que todos tenham chegado a este resultado (print). Podes ver o meu resultado online, clicando aqui.
E termina assim este Big Tutorial de três partes. Todo o tutorial, foi feito por mim, Zé Pedro Silva. Por favor, não copies, nem reblogues. E se usares, dá os devidos créditos.

8 Comentários:

  1. Muito bom tutorial, bem explicado!
    Obrigado pela sua visita ao Prince Teen, Volte Sempre!
    Abraço ~>http://www.princeteen.com/

    ResponderEliminar
    Respostas
    1. Muito obrigado Leandro, tentei explicar tudo o máximo que consegui. Agradeço-lhe também pela sua visita aqui. Abraço.

      Eliminar
  2. n cheguei a isto http://static.tumblr.com/h7lhpxe/1ZJmrdgqo/resultadofinal-zepedrosilva-hc-bigtutorial-edicao-codificacao-temapsd-photoshop-blogger.png

    ResponderEliminar
    Respostas
    1. Se seguires bem o Big Tutorial, desde o início, tenho a certeza que chegarás ao resultado, a que eu cheguei.

      Eliminar
  3. Muito obrigada mesmo estava precisando d+ desse tutorial *---*

    ResponderEliminar

« »