Menus Vanessa S.
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]
querida eu nao entendi o que coloco os likes tenho que fazer novos blogs pf me ajuda eu presiso muito q esse blog funcione
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!
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.
Como faço para centralizar as páginas estáticas no blogger? O padrão é à esquerda.
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
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 ;-;
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 😀
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?
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!
Sempre encontro aqui o que procuro.
Parabéns garota!
@AnneKira™:
facilita mesmo, ainda mais para os usuários iniciantes que sentem dificuldades em configurar menus, inserir links etc.
Obrigada pelo comentário.=)
Muito boa essa dica, facilita a vida de quem vive usando as páginas estaticas!
;-*