Photoshop: Criando menus diferentes para o seu blog | Follow your dreams
Blogosfera

Photoshop: Criando menus diferentes para o seu blog

Olá,

Notaram que eu mudei o menu do blog? Achei que ficaria muito mais fofinho assim. Quer aprender e fazer um no teu blog também? Então vem comigo! A parte interessante desse tutorial é que você pode criar o menu da forma que desejar, não há limites! ;D

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? Qualquer dúvida comentem. Emoji5
Tags : Photoshop

67 Comentários

  1. Uma dúvida: Como faz para o menu ficar com esse efeito em que você passa o mouse e o link fica de uma cor mais clarinha?

    Seu blog e layout são muito lindos, parabéns! ^^
    oldoakthread.blogspot.com.br

    1. Dayane, esse efeito se chama “opacidade”, você pode tentar encontrar algum tutorial dele pela internet. Caso não encontre pretendo ensinar aqui no blog em breve, ok?!

      Obrigada por comentar! :)

      1. Oi Karoline estou amando seu Blog, uma dica mais útil que a outra obrigada,mas,eu estou em duvida sobre uma coisa relacionada ao menu, depois de pronto como faço pra inserir as postagens nele?

  2. Adorei a dica, mas não entendi como eu faço para deixar o plano de fundo colorido. Em que parte eu coloco o menu inteiro que eu criei? Obrigada desde já!

    1. Olá :)
      Eu não ensinei sobre o plano de fundo pois vai variar para cada template, a maioria deles não vem com essa parte só para o menu, que deve ser incluída, o que é bem mais complicado.

  3. Olá, sou Cristiane, e estou amando seu site.
    Farei a cirurgia bariátrica, e estou muito ansiosa, e para aplacar um pouco dessa ansiedade, resolvi criar um blogger para compartilhar todo esse universo de emoções que passam as gastoplastizadas kkk.
    O problema é que sou totalmente crua, e seu site esta me ajudando muito.
    Já te adicionei nos meus favoritos.
    Bjux

    gastroplastiaonline.blogspot.com

  4. To a mais de uma hora tentando fazer kkkkk. Então floor, eu fiz tudo direitinho, mas o menu do meu blog ta em branco, como faço para alterar a cor dele? Se você quiser vê como que ficou, meu blog é oablogueira.blogspot.com.br
    3beijooos

    1. Oi flor! Acho que ficou tudo em branco porque na cor das letras você usou branco, como o fundo também é branco não vão aparecer as letras, consegui explicar? @_@

      Beijos!

    2. então, eu queria deixar o fundo dele de outra cor. Queria fazer ele em rosa e as letras brancas. Alterei agora a cor das letras, coloquei rosa só pra arrumar, mas na verdade eu gostaria de alterar a cor do fundo que esta em branco. Esses beregos de HTML são bem complexos kkkkkkk. Sério, teu blog tá me ajudando demaaaaais! *o* Obrigada mesmo

    1. Oi Fernanda, tudo bom?
      Se a imagem não apareceu, alguma coisa você deixou passar. Recomendo tentar novamente do início prestando bastante atenção aos detalhes, pois todos eles são muito importantes.
      Avisa se conseguir, ok? :)
      Bjs

    1. Oi Eliane, tudo bom? :)
      Não existe um tamanho “ideal”, pode variar de acordo com a largura do template e a quantidade de páginas que serão colocadas no menu.
      Bjs

    1. Oi Luiza, tudo ótimo e com você?
      Essa forma de fazer funciona para o WordPress também, é só saber onde exatamente incluir no código. Infelizmente isso não tenho como te dizer porque vai depender do tema que você está usando. :/
      Um beijo!

  5. Oii!
    Esse tutorial nao funcionou comigo :( ficou uma imagem em baixo da outra, e sem fundo… E eu queria que fosse la no topo, tipo o #mymenuda, sabe?
    Sera que da certo? O que posso ter feito errado?
    Beeijo

    1. Carol, não ensinei a colocar fundo nesse tutorial. Ficou uma imagem embaixo da outra porque você repetiu o < center > e < / center > quando o que deve ser repetido é apenas a linha vermelha e azul, como está escrito no tutorial.
      Bjs

    1. Luana, você tem que centralizar TUDO, não cada página, se não vai ficar um abaixo do outro mesmo. Coloca só um center no início de tudo e outro fechando /center no final.
      Bjs

  6. Oi Karol! tudo bem? Adorei seu tutorial, mas meu menu está muito grande! gostaria de deixar ele menor. Como faço isso? Por enquanto ele está no meu blog grande mesmo! Beijão

  7. Ficou tão lindo que nem acredito q foi eu quem fiz haha thank you!! Com certeza meu blog vai ficar lindo com as suas dicas, amei seu blog!!

  8. Ficou tão lindo que nem acredito que foi eu quem fiz haha thank you. Com certeza meu blog vai ficar lindo com as suas dicas, só vou começar a postar nele depois de deixa-lo a minha cara e vc tem me ajudado muito <3 Como faço para redirecionar a pessoa para a página inicial pela "home" do menu? Amei seu blog!! Bjos

  9. Oi Karol, tudo bem?

    Então eu não entendi direito o sobre o link (tipo tem que clicar no marcador copiar o link da página e colocar no lugar de ‘link’?)
    e eu também não to conseguindo colocar as postagens no marcador

    me ajuda?

Deixe uma resposta para Camila Campos Cancelar resposta