Menu azul horizontal CSS3 brilhante

Olá e bem-vindo ao Mult-focos. Vamos ver neste post um lindo menu azul horizontal CSS3 brilhante, muito simples de configurar e adicionar em seu blog.

Encontre outros modelos de Menus clicando AQUI

Demonstração
Como adicionar em seu blog

• Ir para o painel do blogger->layout 
• Clique em Adicionar um Gadget. 
• Na janela Adicionar um gadget->HTML/JavaScript. 
• Copie o código JS abaixo e cole-o dentro da caixa de conteúdo. 
• Salvar o gadget. 
• Arraste o gadget e reposicione-o onde você quer mostrá-lo. 
• Clique no botão Salve (canto superior direito). 

Todas as configurações constam no código JS, isto é tudo.

<style type="text/css">.menu li{list-style:none;display:inline}.menu li a{-moz-transition:all 270ms ease-in-out 0s;-webkit-transition:all 310ms ease-in-out;-o-transition:all 270ms ease-in-out;background:url("https://lh3.googleusercontent.com/-4neFa4dL8Ew/VGclOAo-xMI/AAAAAAAAIYg/3vyVEdDOsDI/w300-h50-no/noop-menu-blogger.PNG") repeat scroll 0 0 transparent;border:1px solid #1357AF!important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style>
<a href="http://mult-focos.blogspot.com.br/" style="position: absolute;z-index:-11;"><img src="http://goo.gl/WeMibL" /></a>
<div class="wg-shining-menu">
    <ul class="menu">
        <li><a href="http://mult-focos.blogspot.com.br/">Home</a></li>
        <li><a href="AQUI URL">Produto 1</a></li>
        <li><a href="AQUI URL">Produto 2</a></li>
        <li><a href="AQUI URL">Produto 3</a></li>
        <li><a href="AQUI URL">Produto 4</a></li>
        <li><a href="AQUI URL">Produto 5</a></li>
        <li><a href="AQUI URL">Produto 6</a></li>
    </ul>

</div>

See the Pen Menu horizontal CSS3 brilhante by Mairink (@Oemes) on CodePen.

---

---