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.