Como criar menu Metro UI para Blogger

Olá e bem-vindo ao Mult-focos. Neste post vamos mostrar como criar menu Metro UI para Blogger. Com visual inspirado na interface do Microsoft Windows 8, este menu ficou realmente muito bonito e arrojado, veja um demo clicando no botão abaixo ou em result no Box de códigos.

Menu dropdown com ícones sociais para Blogger

DEMO
Como adicionar em seu blog

• Copie o código CSS do Box de códigos Vá ao painel do Blogger, modelo, editar HTML, use Ctrl+F e localize ]]></b:skin>
• Acima desta tag cole o código CSS 
• Agora copie o código HTML faça as modificações de URLs e adicione seu menu como se adiciona uma gadget, se não sabe adicionar um gadget aprenda AQUI. 

Bem pessoal isto é tudo.

<div class="HBTmetromenu">
<div data-navid="om-nav" class="tile-bt-extralarge solid-violetred shadow-black margin-5 floatleft HBTMetroMenu">
<a href="AQUI URL" class="gradient">
<img src="https://lh4.googleusercontent.com/-TnCN1xopqRA/VEbGNv7UVzI/AAAAAAAAHkA/ksHYfJNJaSA/s128-no/home.png" alt="" />
<span class="light-text">Página Ínicial</span>
</a>
</div>
   
<div data-navid="om-nav" class="tile-bt-large solid-coral shadow-red margin-5 floatleft HBTMetroMenu">
<a href="AQUI URL" class="gradient">
<img src="https://lh5.googleusercontent.com/-8OrWukOy1_M/VEbG69VUjlI/AAAAAAAAHkc/Sj3n3a38Xuc/s128-no/Sobre%2Bn%C3%B3s.png" alt="" />
<span class="light-text">Sobre nós</span>
</a>
</div>
   
<div data-navid="om-nav2" class="tile-bt solid-purple shadow-blue margin-5 floatleft HBTMetroMenu">
<a href="AQUI URL" class="gradient">
<img src="https://lh4.googleusercontent.com/-vMMKnYgsDHA/VEbHK4LjOjI/AAAAAAAAHk4/CiG9R8eORKI/s128-no/rss.png" alt="" />
<span class="light-text">Rss Feeds</span>
</a>
</div>
   
<div data-navid="om-nav" class="tile-bt-large solid-red shadow-red margin-5 floatleft HBTMetroMenu">
<a href="AQUI URL" class="gradient">
<img src="https://lh4.googleusercontent.com/-lJEaqRw_Zk8/VEbIGX-Zr2I/AAAAAAAAHlM/SVgHGPMrF00/s128-no/Tutoriais.png" alt="" />
<span class="light-text">Tutoriais</span>
</a>
</div>
     
<div data-navid="om-nav2" class="tile-bt solid-darkred shadow-red margin-5 floatleft HBTMetroMenu">
<a href="AQUI URL" class="gradient">
<img src="https://lh5.googleusercontent.com/-sbiXahkbcCA/VEbIfkw9w2I/AAAAAAAAHlk/B-HpRUuPnbs/s128-no/contato.png" alt="" />
<span class="light-text">Contato</span>
</a>
</div>
     
<div data-navid="om-nav2" class="tile-bt solid-black shadow-black margin-5 floatleft HBTMetroMenu">
<a href="AQUI URL" class="gradient">
<img src="https://lh6.googleusercontent.com/-ZCMF9TArn5k/VEbFMFWKTtI/AAAAAAAAHjo/gd9VNoTjPyM/w160-h128-no/Arquivo.png" alt="" />
<span class="light-text">Arquivo</span>
</a>
</div>
     
<div data-navid="om-nav2" class="tile-bt solid-orange shadow-black margin-5 floatleft HBTMetroMenu">
<a href="AQUI URL" class="gradient">
<img src="https://lh3.googleusercontent.com/-Ovws1X-N08I/VEbIwi2HIZI/AAAAAAAAHl8/pXYex23VXaU/s128-no/youtbe.png" alt="" />
<span class="light-text">YouTube</span>
</a>
</div>
     
<div data-navid="om-nav2" class="tile-bt solid-darkblue shadow-blue margin-5 floatleft HBTMetroMenu">
<a href="AQUI URL" class="gradient">
<img src="https://lh3.googleusercontent.com/-ZfBkbu0f7pk/VEbJBjkJoVI/AAAAAAAAHmY/utFlyFjGl24/s128-no/face.png" alt="" />
<span class="light-text">Facebook</span>
</a>
</div>
     
<div data-navid="om-nav" class="tile-bt-large solid-blue shadow-blue margin-5 floatleft HBTMetroMenu">
<a href="AQUI URL" class="gradient">
<img src="https://lh4.googleusercontent.com/-oCxQ-kYEH18/VEbJZJHAT6I/AAAAAAAAHmw/Y7HxxDZ9Kg0/s128-no/foto.png" alt="" />
<span class="light-text">Fotos</span>
</a>
</div>
     
<div data-navid="om-nav2" class="tile-bt solid-olive shadow-green margin-5 floatleft HBTMetroMenu">
<a href="AQUI URL" class="gradient">
<img src="https://lh5.googleusercontent.com/-Mda7JNTHoSo/VEbJoTG-gWI/AAAAAAAAHnI/B_K94Q8Ozx8/s128-no/m%C3%BAsica.png" alt="" />
<span class="light-text">Music</span>
</a>
</div>
     
<div data-navid="om-nav" class="tile-bt-large solid-blue-2 shadow-blue margin-5 floatleft HBTMetroMenu">
<a href="AQUI URL" class="gradient">
<img src="https://lh5.googleusercontent.com/-nobKwxshBBQ/VEbKGIbHuOI/AAAAAAAAHnk/WaV4b-TnRG8/s128-no/google-plus.png" alt="" />
<span class="light-text">Google Plus</span>
</a>
</div>
</div>








  

See the Pen nCKLD by Mairink (@Oemes) on CodePen.

---

---