20 de ago de 2012

Insira um menu CSS3 lateral vertical em seu Blog

Atualização: 06/12/13

Menu de navegação CSS3

Internet afora encontramos diversos tipos de menus, o menu que trago hoje é bastante intuitivo, já que ele fica fixo na lateral esquerda do seu blog, e serve para fixar páginas importantes. E o melhor desse menu, é que ele foi criado em CSS3, o que faz seu carregamento muito mais rápido.

O menu acompanha 5 ícones. Entre eles o Home (Início), About us (Sobre), Archive (Arquivo), Tags (Marcadores) e Contact (Contato). Mas você pode mudar esses ícones e texto para o que você quiser. 

Veja o exemplo abaixo:



Como eu já disse anteriormente, o menu é feito completamente usando CSS3 e utiliza apenas uma imagem e rapidamente pode ser instalado. Todo o crédito vai para Tutorialzine e Dicas Blogger.
Você pode ver uma demonstração aqui:  DEMO

Como instalar o menu:

1° passo: Acesse o painel do Blogger, escolha o blog que você deseja instalar, selecione a opção "Modelo" e clique em "Editar HTML".

2°passo: Agora usando o atalho Ctrl + F, procure por:  ]]></b:skin>


3° passo: Cole o código abaixo antes de ]]></b:skin>




Salve seu template, pois o estilo do menu já foi adicionado. Agora só falta inserir a estrutura Html do menu.


Para isso, acesse Layout → Clique em Adicionar um Gadget → Escolha HTML/JavaScript → Copie o código abaixo e cole no gadget.



Substitua onde está escrito SEU LINK pelo pelos endereços de seu blog.

Salve e pronto! Está feito!

Qualquer duvida não hesite em perguntar. Use a área de comentários. Até a próxima!
Compartilhe essa postagem!
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

Recomendamos para você »

0 comentários

Seja livre para expor seu pensamento!

Se preferir, antes, leia nossas regras para comentários...
(Atenção: Comentários "Anônimo" não serão publicados. Escolha "Nome/URL". Obrigado!)
Bom comentário!

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
Pré-Designed by BlogThietKe Designed by @Mundo_Informal
© 2012-2014 .::Mundo Informal::. Todos os direitos Reservados
Licença Creative Commons
...See you!
Voltar ao topo