Criando menus diferentes para o blogger no Photoshop

Antes de começar, tenho duas informações importantes:
- Não é preciso salvar uma cópia do seu template, pois não vamos mexer nele.
- Esse é um tutorial avançado, para fazê-lo você deve ter conhecimento básico de Photoshop ou qualquer outro editor de imagens que você quiser usar.

Vamos lá!


1 - No editor de imagens, crie o menu exatamente como ele aparecerá no seu blog, com os nomes das páginas e os enfeites que desejar (eu usei corações). O meu ficou assim:

2 - Delete o plano de fundo. Agora, com a ferramenta de cortar, corte e salve como PNG separadamente uma imagem para cada título de página. Exemplo:

3 - Caso você tenha feito um enfeite que separa as páginas, corte e salve como PNG também. Lembre-se de deixá-lo bem centralizado. Só é necessário salvar 1 enfeite, já que são todos iguais.
O meu ficou assim:

ATENÇÃO: Deixe todas as imagens (de páginas e separador) com a mesma altura.


4 - Agora que você já tem tudo salvo em imagens, acesse sua conta do https://picasaweb.google.com (use o mesmo login do blogger). Faça o Upload de todas as imagens.


5 - Vá no painel do blogger, em LAYOUT. Crie um novo widget e escolha "HTML/Java Script". Deixe sem título e na descrição cole o código a seguir:

<center>

<a href="LINK"><img src="URL DA IMAGEM" /></a>
<img src="URL DO ENFEITE SEPARADOR" />

</center>

Observações:

- As linhas onde há "center" são para deixar o menu centralizado, não mexa nelas. Só as remova caso você não queira o menu centralizado.
- A linha vermelha é referente à página, então copie e cole quantas vezes precisar. No meu menu, por exemplo, há 5 páginas (Início, Sobre, Parceiros, Templates e Contato), então repeti essa linha 5 vezes.
- Se você usou um enfeite separador, copie e cole a linha azul entre cada linha de página. Se você não usou apenas remova essa linha azul.

Agora vamos substituir os links:

- Em LINK, cole o link da página.

- Em URL DA IMAGEM cole a url da imagem referente a essa página, a que você hospedou no Picasa.

- Em URL DO ENFEITE SEPARADOR cole a url da imagem do enfeite separador, também hospedada no Picasa.

6 - Salve o widget e veja como ficou.

Deu certo? Compliquei muito? Me avisem deixando um comentário, por favor. Contribua para que eu melhore à cada tutorial e tenha sempre coisinhas bacanas pra vocês. <3

Um beijo e até o próximo post!

- See more at: http://www.karolinevendramini.com/2013/04/criando-menus-diferentes-para-o-blogger.html#sthash.IPm3xBe8.dpuf

Creditos : (www)