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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_qt0NBTe0GnWyPE-Tl3sFrq0mRRW2wxJQPQOepcFHyYg7FjLtkH-Dk7ZpkAYbdhxqoT1qw5Mqi21m5aYnME0CmaA6DC-BKZK_mB4avR3uiQ0w9EVnZ1pb7KBh2bexhLAq73vRBkdgpMlv/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLiHvZNpGZhjKjpBYHUiRG0-DTMpJcWQ9Yb7552C2Y3cIlQUmAG9g4qqVt7-lwMNTDCDcoBV2aLRf5c2NIqdivp3I_XLU-A04biFTafmEA9XmMmM1tQ6AkbEXZTo8aGtdJtnv3-HRtC8qR/s128-no/Sobre+n%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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDwTNxFPLsoTasZG2fxgqxzRt9vn44tES1nMVhZlrUr66iSeba7ccrZde4lCYt-tjY6g2x31Av3jqMZXW_AcpZ0cSYZ9z6AaOGmiWfsv-ypi_WeC5kiRrqEH1Wt61NmI5tX73DDvYR5g0B/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin38qPW7KBGXTKA4GvZTSz03hZO545uOekjhk6BkhG_Fr_fV9af5K-zYP5hIQI8ku7U5QFbpYms4P_cQ1nUMij-GXGytOhinatHzRxYTp4wVn7Q556yLwzSoRmfUUTsjqvjsMYKFH8YcyJ/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA9B9VVfrjDCd0lb_Pad8nE8Q5AF9WPpy4CIYLGOkIbkHUr5q5zqUGvHdbyKaPWWxJ-kYpUgY7FfEHgu0tz_so13ueI3o2ZzLeO1b5zaZ35ZlsC5eBialU4ObZXioDmpO6lk8Si5eZ7uk5/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvrVqI0AWzOyOjU38SIXUfN-fBuBqBxFEP7hSR7yIV4ix7ZF8YKGPmWoTF2jaSlUpA9GiF8tLbYxYl6Mr7KtiIIELMagAcmLQlovlViyScIXNeDs_6sTzbVSy09O0p_EBU00a0I849KRKP/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ2Y_wFIKqlT3I820wo8gxrpCjco5mYJ0C0-AYl-2QIc2jNcLYQWzkRYnhFg5kGnSKr55mYBgbzWRYcYNE6_XE4CWfo0UD7wmqSGzgH724O6QEndydyrRBO-3lMQO2NIz2hJ1wlPw8yI5m/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlgOa69qv7ejbqOq62LtFXzY3PFs3-R4y4PsrVLg1eL0l9o0yIanS8BUdoRXNQnYlwRluVPh9X8yxbjASW-wGd2lFMpre0eVm8Dlvu-d2HqaArJUgMySZ_3S5-SY91unJdf5yfbM-JGPsa/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoXvE4p2QIGYJ5iL3izhhpSmdDWGfhv-znxK1eC91XyjccuVypGrdbLY8QUVtytQxQWZJfbzh_-ytorcGm92cU0WVT0a5fvlv3G4HMsIs6QsWn312OtwUkG265RPMInwKqpoG4S6Gvll-J/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVtmS4c8bo33F9CENAaGwRoXREIbW5LSEh6_21q_QCReeQmNJHwYHwdJgxCUxYwr41aJKa4OEq0wvklZDiYOZuafUmxk55LxIrxj0qQSPLiJMv3cXoG2dlZG30WSawqlhhZqTvpriPBUCH/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPtW998Pjny0bTVYaxSmceylV2oI4Q8vjEeRwvM5hc-pu4WdtuhtRenvA9Z57lZUkXgVYbYPqBV2Jr3diUidKvt2HN9Y_bAFLpvVE9xPz-Jp2WEvrRgU6CSjlDnUz0Qhk7ZUD6XDuQDMP7/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.

---

---