PROMOÇÃO - Magazine Luiza - NÃO PERCA!

Encontre no blog...

06/09/2015

Como criar um menu no Blogger utilizando apenas uma lista de links

blogger_neon

Menus a partir de uma lista de links

Complementando o artigo Como criar um menu simples na nova interface do Blogger (2015), que utiliza lista de páginas estáticas (independentes), vamos mostrar nesta dica como se fazer um menu simples utilizando o gadget [Lista de Links].

menu horizontal

Como criar um menu no Blogger utilizando apenas uma lista de links - Visual Dicas

menu vertical

Como criar um menu no Blogger utilizando apenas uma lista de links - Visual Dicas

A vantagem de se utilizar uma lista de links para o seu “menu”, diferentemente de uma lista de páginas, é que você poderá utilizar qualquer URL de destino, podendo ser  além de páginas estáticas, posts do seu próprio blog, marcadores, URL’s externas ou até mesmo listas de Feed de uma forma bem prática.

Portanto, para criar um menu simples, horizontal ou vertical, utilizando apenas uma lista de links, siga o exemplo abaixo:

Criando uma lista de links

Entre no http://draft.blogger.com, faça o login e entre em [Painel].

Acesse:  http://www.blogger.com

Se você estiver desconectado, faça o login utilizando a sua conta do Google. No nosso exemplo vamos usar o Blog de Teste.  Entre no blog, clicando no link correspondente.

Como criar um menu no Blogger utilizando apenas uma lista de links - Visual Dicas

No menu lateral selecione [Layout].

Como criar um menu no Blogger utilizando apenas uma lista de links - Visual Dicas

Clique em [Adicionar um Gadget]. Você poderá acrescentar o seu menu em qualquer ponto do layout para depois arrastá-lo no local desejado.

Como criar um menu no Blogger utilizando apenas uma lista de links - Visual Dicas

Na janela Adicionar um gadget, role a tela até encontrar Lista de links. Clique no link ou no botão [ + ].

Como criar um menu no Blogger utilizando apenas uma lista de links - Visual Dicas

Em [Configurar lista de links]  adicione os links e que serão os destinos dos itens do seu menu. Veja todos os detalhes abaixo em “criando itens do menu” ….

Como criar um menu no Blogger utilizando apenas uma lista de links - Visual Dicas

Criando itens do menu

No exemplo, vamos construir um menu principal e para isto, é recomendável termos um item chamado “Home”, “Página Inicial”, ou “Início”.

Na janela para configurar a sua lista de links, em [Novo nome do site] digite o nome que dará para o item. Vamos dar o nome de “Início”. Agora digite o URL da home do blog, ou seja, o próprio endereço do seu blog. Clique no botão [Adicionar Link].

Como criar um menu no Blogger utilizando apenas uma lista de links - Visual Dicas

Para editar ou deletar o link adicionado, clique em [Edit] ou [Delete] que ficam ao lado do link adicionado. Veja no exemplo, onde aparecem ao lado do nosso primeiro link denominado “Início”.

Como criar um menu no Blogger utilizando apenas uma lista de links - Visual Dicas

Tudo certo, então clique no botão [SALVAR].

Como criar um menu no Blogger utilizando apenas uma lista de links - Visual Dicas

Agora, assim por diante, vá acrescentando todos os links que formarão o seu menu, de acordo com os tipos mencionados anteriormente, sendo eles:

1- Páginas Estáticas: São páginas criadas independente das postagens, onde não há hierarquia cronológica. Para criar uma página estática ou autônoma, leia o artigo: Como criar um menu simples na nova interface do Blogger (2015).

Para incluir URL’s de páginas estáticas, entre na página e  copie o endereço. Para isto, no menu lateral do painel do Blogger entre em [Páginas] e clique [Visualizar] quando você passa o cursor do mouse sobre o link da página que você deseja inserir no menu.

Como criar um menu no Blogger utilizando apenas uma lista de links - Visual Dicas

No nosso exemplo, vamos escolher a página "Quem somos!”. Copie o endereço, que no nosso exemplo é: http://visualdicas2000.blogspot.com/p/quem-somos.html

Obs.: No Blogger, todo link de página estática tem a letra /p precedendo o nome, que no exemplo é /quem-somos.htm.

Como criar um menu no Blogger utilizando apenas uma lista de links - Visual Dicas

Volte para [Layout] <<< [Lista de links] e clique em [Editar].

Como criar um menu no Blogger utilizando apenas uma lista de links - Visual Dicas

Na janela Configurar lista de links, descreva o nome do item em [Novo nome do site] e cole o endereço em [Novo URL do site].

Clique no botão [Adicionar Link] e não esqueça de clicar em [SALVAR] depois.

Como criar um menu no Blogger utilizando apenas uma lista de links - Visual Dicas

2- Posts do blog: Você poderá inserir no seu menu qualquer postagem do seu blog. Isto é muito útil para você divulgar algum item em especial como destaque…

Entre em [Postagens].  Escolha o post que deseja incluir no seu menu e clique no link [Visualizar] que aparece quando você passa o cursor do mouse sobre o título da postagem..

Como criar um menu no Blogger utilizando apenas uma lista de links - Visual Dicas

Copie o URL da postagem. No exemplo, vamos escolher o post “Crie enquetes personalizadas”….

No nosso exemplo o link é: http://visualdicas2000.blogspot.com.br/2010/07/crie-enquetes-personalizadas.html

Como criar um menu no Blogger utilizando apenas uma lista de links - Visual Dicas

Volte para o gadget Lista de links, de um nome para o item e cole no campo [Novo URL do site]. Clique no botão [Adicionar link] e depois em [SALVAR].

Como criar um menu no Blogger utilizando apenas uma lista de links - Visual Dicas

3- Marcadores: São categorias do blog, que ajudam na organização e navegação de suas postagens..

Nota: Se você ainda não usa marcadores, leia o artigo do Dicas Blogger que ensina passo a passo como criar e colocar marcadores no blog: Como inserir marcadores nos posts.

Para inserir postagens relacionadas ao seus marcadores, acesse o marcador que se deseja colocar no menu e copie o seu endereço URL.

No nosso exemplo, escolhemos o marcador “blog Squids”. O link para isto é:  http://visualdicas2000.blogspot.com/search/label/blog%20Squids

Observe que o link para marcadores é formado de /search/label/nome do marcador.

Como criar um menu no Blogger utilizando apenas uma lista de links - Visual Dicas

Da mesma forma que nos exemplos anteriores, insira o link no gadget Lista de links, defina o nome do item em [Novo nome do site], clique me [Adicionar Link] e no botão [SALVAR].

Como criar um menu no Blogger utilizando apenas uma lista de links - Visual Dicas

lightbulb_48

Dica: Se desejar mostrar apenas títulos das suas páginas do marcador, leia: Como mostrar apenas títulos nas páginas dos Marcadores do Blogger…

4- URL externo: Links externos são endereços que permitem o acesso à páginas de outros sites ou blogs. Links externos são ótimos para divulgar outros sites que você possui, por exemplo, ou oferecer acesso às redes sociais como o Facebook ou Twitter.

Volte para o gadget Lista de links, em [Novo URL do site] digite o endereço do link externo, e como nos outros exemplos, digite o nome do item, [Adicionar Link] e [SALVAR].

No nosso exemplo, vamos definir o endereço do twitter: http://twitter.com/visualdicas

Como criar um menu no Blogger utilizando apenas uma lista de links - Visual Dicas

5- Feed’s:  Feed’s são listas de atualização de conteúdo de um determinado blog ou site, e podem ser acessados através de links sem que se necessite visitar o blog ou o site em si.

Os feeds mais comuns para o “Blogger” possuem as seguintes estruturas:

38_16x16Feed dos posts (posts mais recentes)

http://seublog.blogspot.com/feeds/posts/default

38_16x16Feed dos comentários (comentários mais recentes)

http://seublog.blogspot.com/feeds/comments/full

38_16x16Feed dos marcadores (marcadores)

http://seublog.blogspot.com/feeds/posts/default/-/label

ATENÇÃO: Substitua “seublog” pelo nome do blog e “label” pelo nome do marcador

No nosso exemplo vamos escolher o feed de posts mais recentes. Portanto o URL do feed será: http://visualdicas2000.blogspot.com/feeds/posts/default

lightbulb_48

Dica: Se desejar mostrar apenas os títulos das postagens do feed leia: Aprenda a criar e exibir listas personalizadas dos seus posts (apenas para o Blogger)

Da mesma forma, volte para o gadget Lista de links e acrescente o endereço do feed e o nome. Clique em [Adicionar Link] e em [SALVAR].

Como criar um menu no Blogger utilizando apenas uma lista de links - Visual Dicas

Colocando título no menu

Você também poderá colocar um título no menu (que é opcional). No nosso exemplo vamos utilizar o título “Menu de Teste”, por se tratar de um menu vertical.

Volte novamente para o gadget Lista de Links e digite o nome para o campo [Título]. Depois clique em [SALVAR].

Como criar um menu no Blogger utilizando apenas uma lista de links - Visual Dicas

Veja abaixo como ficou nosso “Menu de Teste”

Como criar um menu no Blogger utilizando apenas uma lista de links - Visual Dicas

Alterar a ordem dos itens do menu

Para alterar a ordem do itens do menu, volte para o gadget Lista de links.

No campo Classificação você poderá classificar os itens do menu por ordem alfabética ou por ordem alfabética inversa.

Como criar um menu no Blogger utilizando apenas uma lista de links - Visual Dicas

Se preferir, você poderá ordenar o menu manualmente.  Basta clicar nas setas para cima ou para baixo que aparecem ao lado de cada item do menu alterando a ordem dos itens da forma que desejar.

Como criar um menu no Blogger utilizando apenas uma lista de links - Visual Dicas

Após concluir a classificação dos itens, clique no botão [SALVAR].

Como criar um menu no Blogger utilizando apenas uma lista de links - Visual Dicas

Veja abaixo o nosso menu agora com os itens reordenados. Para ver o nosso menu em ação, visite o blog de teste: visualdicas2000.

Como criar um menu no Blogger utilizando apenas uma lista de links - Visual Dicas

Mudando o menu de posição no layout

Para alterar a posição do nosso menu, no painel do Blogger volte para [Layout]. Clique com o mouse sobre a barrinha que aparece à esquerda o gadget, que no nosso exemplo é Menu de Teste, e arraste até a nova posição desejada.

Como criar um menu no Blogger utilizando apenas uma lista de links - Visual Dicas

Após definido a nova posição, clique no botão [Salvar organização].

Como criar um menu no Blogger utilizando apenas uma lista de links - Visual Dicas

Criando um menu horizontal

1) Para criar um menu horizontal, arraste o gadget Lista de links (Menu de Testes no nosso exemplo) até a posição mais próxima de header.

Atenção: Caso você já tenha um menu horizontal, substitua pelo novo gadget.

Veja que no nosso exemplo substituímos o gadget Páginas pelo nosso Menu de Teste. na posição logo abaixo de header, que no nosso exemplo está localizado em crosscol.

Como criar um menu no Blogger utilizando apenas uma lista de links - Visual Dicas

2) Edite o gadget Menu de Teste, excluindo o Título. O gadget passará a ser definido como Lista de links.

Como criar um menu no Blogger utilizando apenas uma lista de links - Visual Dicas

3) Finalmente clique no botão [Salvar organização].

Como criar um menu no Blogger utilizando apenas uma lista de links - Visual Dicas

Veja como ficaria o nosso menu horizontal:

Como criar um menu no Blogger utilizando apenas uma lista de links - Visual Dicas

ATENÇÃO: Alguns templates de terceiros não aceitam esta configuração para o menu horizontal, entretanto, este tutorial é valido para a maioria dos templates e todos os layouts originais do Blogger…

byALF 


Leia também:

Como criar um menu simples na nova interface do Blogger (2015) 

Aprenda a criar e exibir listas personalizadas dos seus posts (apenas para o Blogger)

Como mostrar apenas títulos nas páginas dos Marcadores do Blogger…

2 comentários:

Poções de Arte disse...

Muito bom o tuto. Estou pesquisando para mudar algumas coisas num outro blog que tenho. Obrigada.
Abraços.
Márcia.

TecWeb Tutors disse...

Uso essa lista de links no menu horizontal.
Porém daz uns 10 dias que procuro na internet como criar submenus no menu horizontal que usa a lista de links.
Não achei nada na internet ensinando!

Postar um comentário

Gostou do Post? Então espalhe!

Quem está curtindo...

Encontre no blog...

Fique mais.... Leia os nossos artigos!!!

Gostou? Então espalhe!

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Web Analytics