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

Encontre no blog...

07/04/2011

Como criar um menu no seu “blogger” utilizando apenas uma lista de links

 

ATENÇÃO: ESTE ARTIGO FOI SUBSTITUIDO PELO ARTIGO:


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

atualizado em 06/09/2015

Menus verticais e horizontais a partir de uma lista de links

Complementando o artigo Como criar um menu simples no seu “blogger”, que utiliza lista de páginas estáticas (autônomas), vamos mostrar nesta dica como se fazer um menu simples utilizando o gadget [Lista de Links].

 image

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.

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].

Obs.: Se você não usa o draf.blogger, entre em http://blogger.com

image

Escolha o blog que deseja alterar e clique em [Design]. No nosso exemplo, vamos utilizar o “Blog de Teste”.

Em [Elementos de página] clique no link [Adicionar um Gadget], em qualquer local do layout. Em nosso exemplo vamos utilizar o gadget na barra lateral, criando a princípio um Menu Vertical.

image

Na janela [Adicionar Gadget] role a tela até encontrar o gadget [Lista de Links]. Clique no link ou no botão [+]  par iniciar a configuração da lista…

image

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” ….

image

Criando itens do menu

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

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

image

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

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

image

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 no seu “blogger”.

Para incluir URL’s de páginas estáticas, entre na página e  copie o endereço. Para isto, entre em [Postagens] >>> [Editar páginas]. Escolha a página e clique no link [Visualizar].

image No 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.

imageVá para [Design] <<< [Elementos de página] e clique no gadget [Lista de Links].

image

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

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

image

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 em [Postagens] >>> [Editar Postagens]. Escolha o post que deseja incluir no seu menu e clique no link [Visualizar].

image

Copie o URL da postagem. No tutorial, vamos escolher o post “Exemplo do chat”….No nosso exemplo o link é: http://visualdicas2000.blogspot.com/2010/08/exemplo-do-chat-xatcom.html

image

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

image

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.

image

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].

image

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

image

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…

image

Clique em [Adicionar Link] e em [SALVAR].

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.

image

Veja abaixo como ficou nosso “Menu de Teste”

image

Alterar a ordem dos itens do menu

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

Clique no link [Editar] e altere os nomes de cada item, colocando uma numeração na frente, seguindo a sequência que você quer que apareça no blog.

Por exemplo, vamos colocar o nº 1 em Inicio, pois será o primeiro item da lista, e o nº 6 em Siga-nos no Twitter, que será o último… Veja como seguindo a figura abaixo:

image

Depois de todos itens alterados, altere a classificação para [Colocar em ordem alfabética]

image

Volte a classificação para [Não Classificar], fixando a lista nesta ordem.

Agora altere novamente todos os itens, eliminando os números que você inseriu anteriormente…

image

Se a ordem ficou da forma como você deseja, clique no botão [SALVAR].

Agora veja como ficou o nosso “Menu de Teste”

image Para ver o nosso menu em ação, visite o blog de teste: visualdicas2000

image

Mudando o menu de posição

Para alterar a posição do seu menu, volte em  [Design] e [Elementos de página].

image

Clique em [Lista de links], que no nosso exemplo está denominado de [Menu de Teste] e arraste até o local desejado…

Para criar um menu horizontal, posicionaremos o gadget na barra horizontal.

image

Clique no botão [VISUALIZAR]. Se desejar fazer alterações clique em [Editar].

Se tudo estiver correto, clique no botão  [Salvar].

Veja como ficaria o menu horizontal utilizando uma lista de links em nosso exemplo…

image

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…


Leia também:

Como criar um menu simples no seu “blogger”

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…

ATENÇÃO: ESTE ARTIGO FOI SUBSTITUIDO PELO ARTIGO:


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

14 comentários:

Séries e Fimes disse...

Olá amigo, desde já venho agradecer a sua ajuda. Deve ter dado bastante trabalho.

Tânia Souza disse...

Fiz agora no meu blog, o que eu queria era exibir colunas, mas desse jeito ficou bacana tbem, obrigada por compartilhar.

Guimarães, LSP disse...

Grandes dicas.
Obrigado

Romances Deliciosos disse...

Eu gostaria muito de agrdecer a este blog que me ajufou infinitamente em relação aos indicadores do blog. Com ele eu consegui realizar modificações no meu blog que estou tentando a muito tempo. Fica aqui o meu agradecimento e podem ter certeza de que será divulgado sempre que alguem me perguntar.

Celi Jandy disse...
Este comentário foi removido pelo autor.
Celi Jandy disse...

Olá, parabéns pela iniciativa, suas dicas me ajudaram bastante, estou começando agora e sempre surgem muitas dúvidas, you are beautiful, thanks.

Tritani GP (Araçatuba-SP) disse...

Olá!

Apaguei a lista de páginas no blogger sem querer; ao acessar a lista de gadgets, não consigo recuperá-lo, pois o sistema informa que o gadget "já foi adicionado".

Pode me ajudar?

Grato.

Unknown disse...

Boa tarde? Tudo bem?
Estou tentando colocar o menu no meu blog, mas estou com muita dificuldade.
O blog é http://mangakarobsonsilva.blogspot.com/p/sobre-robson-silva.html
Eu coloquei o Menu em uma lista de links só, somente em um gadget.
Eu fui alterando no n URL da Lista de links, fazendo assim por exemplo:
http://mangakarobsonsilva.blogspot.com/p/sobre-robson-silva.html
E assim fiz com todos os links do menu. Mas quando clico em qualquer item da lista, nenhum funciona, apenas o início funciona. Diz que a página não esta localizada no blog.
Eu queria colocar esse menu na parte superior em forma horizontal, li suas explicações, mas acho que como estou com dificuldade no início, o restante não esta funcionando bem.
Também não entendi como vou fazer para colocar as postagens em cada item do menu, pois meu blog já estava pronto, então tenho varias postagens e preciso organiza-las no menu. Se puder me dá uma ajuda.
Tá meio complicado.
Obrigado!

byALF disse...

Olá Robson,

Primeiro você deve criar uma página, como Sobre, por exemplo. Depois verificar qual a URL desta página e finalmente colocar na sua lista de links. A URL que você me passou (link) realmente não existe, pois você não criou uma página para ele...

Visual Dicas

Josué disse...

Sabe como consigo, se for possível, excluir esse /p/ das páginas que criei ? Tipo, eu até gostei da ideia de criar menu com páginas, mas links desse tipo : http://exemplo.blogspot.com.br/p/photo é meio feio. Existe um modo de deixar só http://exemplo.blogspot.com.br/photo ?
Se sim, como consigo fazer, mas detalhe, quero que seja com menu horizontal, e que não haja a presença de 2 menus no meu blog.

byALF disse...

Josué,

Leia o link: http://visualdicas.blogspot.com.br/2012/02/como-criar-um-menu-simples-na-nova.html

(Como criar um menu simples no Blogger)

Visual Dicas

WWW.DECOREDO.BLOGSPOT.COM.BR disse...

ESTOU FAZENDO TUDO QUE ENCONTRO NA NET, ´PARA MELHORAR MEU BLOG. VOU TENTAR SEGUIR SUAS DICAS
OBRIGADA
MARCIA

Despertar disse...

Para criar um menu de separadores com endereço web é necessário criar páginas estáticas?? Obrigada

Blogger disse...

Do you need free Facebook Followers?
Did you know that you can get these ON AUTOPILOT AND TOTALLY FOR FREE by registering on Like 4 Like?

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