Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1508408623
Vida do cache: 1508451823
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Menus

Menu automático para Páginas Estáticas

Depois que o Blogger disponibilizou a criação de páginas estáticas nativas no blog, a maioria de nós, blogueiros, utilizamos este recurso para criar páginas fixas, geralmente são usadas com informações de: “contato“, “sobre“, “parcerias“, entre outras.

Como vocês já devem ter notado, quando criamos uma página estática e inserimos conteúdo, após salvá-la e publicá-la, aparece a opção de escolha do local que você deseja mostrar o link da sua página “Mostrar páginas como”.
Se você escolher a opção “Guia na parte superior”, será criado uma linkbar logo abaixo do cabeçalho do blog, automaticamente.

Ocorre que alguns blogs usam menus horizontais instalados logo ali, abaixo do cabeçalho, e acaba que no final ficam aparecendo 2 menus: o que você já tinha instalado e o criado através da opção “páginas”.

Para facilitar, hoje vou ensinar como criar e estilizar um menu automático em “Guia na parte superior”.
Você verá como estilizar um menu para suas páginas estáticas de forma que todos os links existentes de suas páginas apareçam automaticamente neste menu, sem necessidade de inclusão dos links de forma manual.

Não preciso nem lembrar que para ativar este menu é necessário que você já tenha páginas estáticas criadas não é?
E para que os links de suas páginas estáticas fiquem na linkbar você deve escolher a opção “Guia na parte superior” ao publicar ou editar suas páginas.

Bom, então vamos lá.

Menu horizontal para o gadget “Páginas”

1. Vá no menu “modelo”>>Editar HTML” não precisa marcar a opção “Expandir modelos de widgets”.
Copie o código abaixo e coloque-o antes de ]]></b:skin

/*---- Páginas Menu ----*/
#PageList1 {
width: 100%;
height: auto;
background: #ccc; /*---- edite a cor de fundo ----*/
}
#PageList1 ul li a {
color:#fff; /*---- edite a cor da fonte ----*/
background:#333; /*---- edite a cor de fundo ----*/
text-decoration: none;
font-weight: bold;
font-size: 15px;
padding: 8px 8px 8px 8px;
}
#PageList1 ul li a:hover {
color:#000; /*---- edite a cor de fundo ----*/
background:#fff; /*---- edite a cor da fonte ----*/
position: relative;
left: 1px;
top: 1px;
}

Edite as cores de fundo e da fonte de acordo com seu gosto.
Você pode adicionar vários outros efeitos para melhorar o seu menu de páginas estáticas, como CSS3 border-radius ou sombra no texto.
Agora cada vez que você criar uma página estática, o link irá aparecer automaticamente no novo menu que você acabou de criar.

[alerta]Atenção: Este tutorial aplica-se aos antigos modelos de layout (Templates minima). A eficácia da dica aqui apresentada não foi testada nos novos Designer de Modelo.[/alerta]



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

12 Comentários

  1. Camila disse:

    querida eu nao entendi o que coloco os likes tenho que fazer novos blogs pf me ajuda eu presiso muito q esse blog funcione

  2. Priscila disse:

    Oi Vanessa, você descobriu como centralizar o menu na nova interface do blogspot??

    Não da pra começas a postar sem antes eu arrumar isso…
    NAO SEI MAIS O QUE FAZER!

    • Vanessa disse:

      Priscila,
      Depende muito do modelo de template que vc usa. Os templates Designer de modelo já possuem menu. Este tutorial se aplica apenas aos modelos mais antigos.

  3. Heli disse:

    Como faço para centralizar as páginas estáticas no blogger? O padrão é à esquerda.

  4. Spa For Nails disse:

    Moça, uma pergunta: tem como mudar a fonte? Já coloquei font-family em todos os lugares possíveis e nenhum funcionou :/. Brigada n.n

  5. Jun disse:

    Mas Clau, tem uma coisa me incomodando: aliás, duas. É que embaixo dos numerozinhos que marcam a hora do post, tem tipo um pontilhado (não é dashed) que tá me irritando e não sei como tirar! Como faço? Tá feio :(
    E outra coisa, o link do menu que está ativo está em negrito e não consigo achar onde tira também, acho que os bolds que têm no código, os que sobraram, não tem relação, um é das definições de fonte lá em cima e outr é dos coments. Onde vou também? ._.
    Desculpa a perturbação, aliás ;-;

  6. Jun disse:

    Pode deixar Clau, fiquei arrastando os gadgets aqui e consegui! Você é 10, moça :)
    Ps.: Faço Direito e admiro você por já ser uma profissional da área e entender tanto de outras coisas tão diferentes e legais como blogar 😀

  7. Jun disse:

    Clau, não tô conseguindo! ,_,
    Quando vou salvar e publicar já aparece direto aquela página seguinte, que me pergunta se quero editar ou visualizar a página… O código deu certo mas sem estar com as guias no cabeçalho ele não funciona, e não consigo achar essa página pra escolher o cabeçalho de jeito nenhuuum >_< Como faço?

  8. The Morning Star disse:

    Obrigado, Clau!

    Você sempre salva a minha vida quando eu precso de algum código html hehehe!

    Estou colocando seu site na lista de "Blogs recomendados" do meu próprio blog. Meus parabéns pela qualidade dos artigos =)

    Bjos!

  9. Bruno Resende Ramos disse:

    Sempre encontro aqui o que procuro.

    Parabéns garota!

  10. ::Clau:: disse:

    @AnneKira™:
    facilita mesmo, ainda mais para os usuários iniciantes que sentem dificuldades em configurar menus, inserir links etc.
    Obrigada pelo comentário.=)

  11. AnneKira™ disse:

    Muito boa essa dica, facilita a vida de quem vive usando as páginas estaticas!
    ;-*

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.