Inserindo menu horizontal no Blogger

terça-feira, 3 de agosto de 2010

Mais uma dica que o Arruma Blog não encontrou nas buscas. Seria legal poder editar aquele Gadget de 'Páginas' do seu blog e colocar no menu principal não comente as páginas que você criou  mas também links personalizados. Vamos aprender a editar esses links manualmente e com a ajuda do painel do Blogger.

Imagem representativa de menu no modelo Arruma Blog em 07-2010
Em 2010, o Blogger disponibilizou o recurso para edição de página apanas para o Blog em rascunho (também conhecido como 'Blog in Draft'), mas em 2013 eu editei esse artigo explicando melhor e atualizando ele conforme as atualizações do Blogger.

INSERINDO O MENU MANUALMENTE


Logado no Blogger, escolha o blog que deseja fazer a mudança. Clique em Modelo.
Depois, faça Backup do modelo completo do seu atual blog em seu computador para  poder resgatá-lo caso algo saia errado.

Certifique-se que no seu modelo de blog não tem nenhum gadget de página adicionado. Alguns modelos esse gadget vem como padrão.

No blog, procure por Layout e após o modelo aparecer, insira um Gadget de HTML/JavaScript logo depois do topo, como mostra a imagem I a seguir:
Imagem I - Inserindo Menu após o topo do blog

Agora é hora de iniciar a configuração do menu. Vale lembrar que o menu ficará dentro dos padrões que você escolheu dentro do seu modelo, as cores e links podem ser mudados no botão Personalizar (no menu Modelo) disponível no próprio Blogger in Draft ou no Blogger tradicional.

Dentro da caixa de HTML, copie [Não cole direto no seu blog ou site, cole no bloco de notas depois recorte e cole na sua página, é mais seguro]:

<li><a
  href="http://SEULINKAQUI" title="Inicio">Inicio</a>
</li>
<li><a
  href="http://SEULINKAQUI" title="Descreva o link, isso vai aparecer quando o mouse ficar parado sobre o link" >Autor</a>
</li>

E para cada novo link ou novo menu que você desejar inserir basta copiar o inicio das tags <li> até </li> e modificar as informações de http:// com o link da pág dentro do blog por exemplo e depois a palavra que vai ficar visível para o leitor, neste caso em negrito estão as palavras Inicio e Autor apenas, estas ficarão na tela quando o leitor entrar no seu blog no topo da página, como no Arruma Blog. Lembre-se que cada post que você cria é uma página Web que é criada, então você pode linká-la quando desejar, como fizemos no guia CONTATO
Modifique onde está escrito SEULINKAQUI pelo link desejado, podendo ser uma página dentro do seu blog, um link externo como o do Orkut ou até um e-mail (*para e-mail o link muda um pouco, mas busque no Google maiores informações).

INSERINDO MENU COM O AUXÍLIO DO PAINEL BLOGGER


Aqui é importante adicionar ou já ter adicionado o gadget de páginas.
Com o gadget adicionado em seu modelo, vá no menu Páginas. Irá aparecer o botão 'Noa página', clique nele.
Agora basta você inserir o link de outra página podendo ser interna (um post ou categoria) ou externa (link para perfil no Facebook, G+ ou Twitter) entre outros e salvar.

Para ambos, seu blog deverá ficar com uma aparência parecida com o do Arruma Blog:
Imagem II - Menu pronto no blog

 Com estas configurações feitas, você deve salvar o Gadget e verificar como ele está em sua página. Por padrão o Google vai criar botões animados no seu blog, com os links que você definiu.

Você também pode usar as páginas criadas no seu blog, com o recurso do Blogger para criar este menu.

6 comentários:

  1. oi Rafa... to precisando dá um jeito naquele layout hein... preciso de um com imagens grandes, se puder me indicar alguma coisa... vlw

    Uma ótima quarta-feira pra vc
    Beijo
    ; )

    ResponderExcluir
  2. voce explica super bem mas eu fiz tudo q vc mandou e so apareceu o nome, nao apareceu como link sera q tem como vc colocar um pouco mais detalhado ou dizer pq nao apareceu. E comecei um blog ha pouco tempo e nao sei direito esse negocio d html agora q conheci seu blog q consegui arrumar um pouco o meu e ainda assim nao ta la essas coisa, mas antes tava muito pior.

    Espero sua resposta e por favor da uma passadinha por la so pra vc me dizer o q posso melhora

    PS: Eu q postei esse comentario nao sou o autor do blog ele é meu marido mas nunca tem tempo e eu q cuido do blog.

    ResponderExcluir
  3. No blog, procure por Design e logo após o modelo aparecer, insira um Gadget de HTML/JavaScript logo depois do topo, como mostra a imagem I a seguir:

    Nessa parte eu não consegui fazer nada!!

    ResponderExcluir
  4. Para CP News:

    Cara, é simples: Você deve clicar no Gadget de Html/Java script para inserir a codificação que segue na cotinuação do post, depois disso é só salvar. Não há erro.

    Você deve ter cuidado e certeza que o seu blog é o In Design.

    ResponderExcluir
  5. Pelo menos aqui, os links ficaram lado a lado e não com essa "setinha para baixo".

    ResponderExcluir
  6. DEU CERTINHO CARA..ABRAÇO VALEU MUITO

    ResponderExcluir

Use este espaço para perguntar, questionar ou dar algum complemento sobre o artigo em questão. Todos os comentários publicados no Arruma Blog são de inteira responsabilidade dos seus respectivos autores. A finalidade do comentário é proporcionar ao leitor o poder de resposta sobre a postagem apenas. Neste campo não será aprovado comentários para publicar link e/ou material com conteúdo pornográfico de qualquer espécie, discriminatório ou ofensivo de qualquer natureza; que enviar informações sobre atividades ilegais e/ou incitar crimes ou violência. Para finalidades comerciais ou contato direto com o autor damos a opção de 'entrar em contato no topo da página'.

É expressamente proibido utilizar o espaço de comentários para engajar-se em atividades de cunho comercial, como vender produtos, procurar anunciantes e patrocinadores, divulgar informações pessoais de contato, além de veicular banners de qualquer espécie. Também serão apagados comentários de auto-promoção ou que não sejam pertinentes ao artigo em questão.

Todos os comentários são moderados e poderão ser excluídos caso sejam considerados inadequados, ofensivos ou alheios ao objetivo do blog. Este é blog é protegido pela lei de direitos autorais vigente no Brasil.


















 
Arruma Blog © 2009 - 2013 | Desenhado por Bubble Shooter | Direitos reservados | Obrigado pela visita