Menu de navegação Fashion para Blogger

Esse é o mene de navegação Fashion, 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 Attitude 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">#menu8 ul { list-style:none; font-family: Helvetica, Arial, sans-serif; font-size: 44px; letter-spacing: -2px; line-height: 1.2em; float:left; clear:both; margin:20px; border:5px solid #fff; } #menu8 ul li{ float:left; } #menu8 ul li a{ display:block; text-decoration:none; padding:5px 10px 5px 10px; background-color:#fff; width:170px; border-left:6px solid #888; } #menu8 ul li a span{ display:block; } #menu8 ul li a span.title{ color:#888; } #menu8 ul li a:hover{ border-left:6px solid #000; } #menu8 ul li a:hover span.title{ color:#df246f; } #menu8 ul li a span.text{ padding:0px 5px; font-size: 14px; font-style: italic; font-weight: normal; letter-spacing: normal; line-height: 1.4em; visibility:hidden; color:#df246f; text-align:right; border-top:5px solid #000; } #menu8 ul li a:hover span.text{ visibility:visible; } </style> <div id="menu8"><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 :