Menu de navegação Attitude para Blogger

Esse é o mene de navegação Attitude, desenvolvido com HTML e CSS, foi adaptado para a plataforma blogger. E assim, posso dizer que é um dos mais impressionantes e elegantes menus de navegação para blogger e wordpress que já vi. Vem com cores escuras, se você acompanha o blog Mundo Informal, certamente já viu alguns outros widgets menu de navegação para blogger entre eles: Menu de navegação Blue White para blogger , Menu de navegação Fashion para Blogger, Menu de navegação Dashed Rich para blogger, e esse é um já entra para essa lista.

Demonstração

O que esse menu oferece?

• Funciona corretamente em todos os principais navegadores como o Firefox, Opera, Google Chrome e Internet Explorer.
• Tem rápido carregamento.
• Nenhum Javascript de terceiros necessário.
• Menu baseado em CSS

Como adicionar o menu de navegação do Blogger Widget

1° passo: Acesse o painel do Blogger , escolha o blog que você deseja instalar, selecione a opção "Layout" e clique em "Adicionar um Gadget".

2°passo: Agora selecione na lista "Html/Javascript" e cole o código abaixo:

<style type="text/css"> #menu3 ul { list-style:none; font-family: Helvetica, Arial, sans-serif; font-size: 44px; font-weight: bold; letter-spacing: -2px; line-height: 1.2em; border-top:4px solid #000; border-bottom:4px solid #666; float:left; clear:both; margin:20px; } #menu3 ul li{ float:left; } #menu3 ul li a{ display:block; text-decoration:none; background-color:#ccc; padding:10px 10px 5px 10px; color:#666; width:170px; } #menu3 ul li a span{ display:block; text-align:center; } #menu3 ul li a span.title{ } #menu3 ul li a:hover span.title{ color:#000; } #menu3 ul li a span.text{ padding:0px 5px; font-size: 13px; text-transform: uppercase; letter-spacing: -1px; line-height: 2em; text-align:right; margin-top:-20px; color:#f0f0f0; font-weight:bold; background-color:#000; visibility:hidden; } #menu3 ul li a:hover span.text{ visibility:visible; } </style> <div id="menu3"><ul><li><a href=""><span class="title">About</span><span class="text">Who we are</span></a></li><li><a href=""><span class="title">Portfolio</span><span class="text">What we do</span></a></li><li><a href=""><span class="title">Blog</span><span class="text">What we talk about</span></a></li><li><a href=""><span class="title">Contact</span><span class="text">How to get in touch</span></a></li></ul></div>

3°passo: Salve e pronto!

Share This :