Ativar barra de navegação do Blogger - Novos templates

20 agosto, 2010

Nesta semana ajudando uma amiga a fazer o seu primeiro blog Bloggerblogspot, percebi que os novos templates disponibilizados já estão com uma funcional barra de navegação horizontal.
Só que ela precisa ser ativada para vir a funcionar. Como não encontrei nenhum tutorial nativo (pelo menos até agora não vi nada parecido), resolvi então arriscar testando um código que geralmente é usado para fazer uma lista de links, e né que deu certo gente. Aêêê...!!!
Bom, chega de blá-blá-blá e vamos ao que interessa né?!

1. Antes de tudo é bom fazer uma pequena alteração na área do Header do seu blog adicionando mais espaço que irá facilitar seu trabalho quando quiser instalar outros elementos.
Veja aqui como: "Cabeçalho do Blogger - Adicione elementos".

2. Depois de feita a alteração e se você já estiver usando alguns desses novos templates, clique em "Design" na barra superior do seu blog para automaticamente entrar em "Elementos da página". Agora clique em "Adicionar um Gadget" na área horizontal logo abaixo do título do seu blog (Cabeçalho).





 imagem - design - designer de modelo - adicionar um gadget

 3. Encontre e clique em "HTML/JavaScript" para abrir pequena janela na qual colocará o código a seguir na área "Conteúdo". Não coloque título, no meu entender ele irá poluir visualmente a sua barra de navegação.


 imagem - html/javascript - comfigurar - conteúdo

 4. Agora coloque este código abaixo (como indicado na imagem acima) e clique em salvar. Cores e tipos irá variar de acordo com o template que você escolher.
<ul>
<li><a href="Seu link aqui">Exemplo 01</a></li>
<li><a href="Seu link aqui">Exemplo 02</a></li>
<li><a href="Seu link aqui">Exemplo 03</a></li>
<li><a href="Seu link aqui">Exemplo 04</a></li>
</ul>
5. Em vermelho coloque o link, em azul o título correspondente. Para adicionar mais elementos é só repetir a parte do código verde, e para subtrair... O óbvio né?! rsrs...

6. Cores e tipos dependerá do template escolhido. Veja na imagem abaixo alguns exemplos.


 imagem - exemplos - barra de navegação

 
Espero ter ajudado a tornar seu blog mais funcional. No meu blog de teste funciona direitinho. Se você souber de uma outra forma para ativar essa barra de navegação manda um alô, OK?!




blog comments powered by Disqus
 
Tema para Blogger por :: BloggerSPhera :: Imagens, conteúdo, calibragens, etc... Por :: Burity ::