Menu em 3D para Blogger

Olá amigos Mult-focos,  esta precisando de um menu?

Tenho uma linda sugestão para você, um Menu em 3D para Blogger.

Fácil de configurar e instalar, além de um visual atraente.

Veja seu visual ao vivo clicando em DEMO.


DEMO

Se lhe agradou, vamos a sua instalação.

Adicionando código CSS

1-Entre no painel do Blogger

2- Clique em Modelos > Editar HTML

3- Use a tecla Ctrl +F  e localize > ]]></b:skin> copie e cole o seguinte código acima dela.

 /* 3d Flipping Menu By RealcomBiz.com */  
     .block-menu {  
       display: block;  
       background: #000;  
     }  
     .block-menu li {  
       display: inline-block;  
     }  
     .block-menu li a {  
       color: #fff;  
       display: block;  
       text-decoration: none;  
       font-family: 'Passion One',Arial,sans-serif;  
       -webkit-font-smoothing: antialiased;  
       -moz-font-smoothing: antialiased;  
       font-smoothing: antialiased;  
       text-transform: uppercase;  
       overflow: visible;  
       line-height: 20px;  
       font-size: 24px;  
       padding: 15px 10px;  
     }  
     /* animation domination */  
     .three-d {  
       -webkit-perspective: 200px;  
       -moz-perspective: 200px;  
       perspective: 200px;  
       -webkit-transition: all .07s linear;  
       -moz-transition: all .07s linear;  
       transition: all .07s linear;  
       position: relative;  
     }  
       .three-d:not(.active):hover {  
         cursor: pointer;  
       }  
       .three-d:not(.active):hover .three-d-box,  
       .three-d:not(.active):focus .three-d-box {  
         -moz-transform: translateZ(-25px) rotateX(90deg);  
         -webkit-transform: translateZ(-25px) rotateX(90deg);  
         -o-transform: translateZ(-25px) rotateX(90deg);  
         transform: translateZ(-25px) rotateX(90deg);  
       }  
     .three-d-box {  
       -webkit-transition: all .5s ease-out;  
       -moz-transition: all .5s ease-out;  
       -ms-transition: all .5s ease-out;  
       -o-transition: all .5s ease-out;  
       transition: all .5s ease-out;  
       -webkit-transform: translatez(-25px);  
       -moz-transform: translatez(-25px);  
       -o-transform: translatez(-25px);  
       transform: translatez(-25px);  
       -webkit-transform-style: preserve-3d;  
       -moz-transform-style: preserve-3d;  
       -ms-transform-style: preserve-3d;  
       -o-transform-style: preserve-3d;  
       transform-style: preserve-3d;  
       pointer-events: none;  
       position: absolute;  
       top: 0;  
       left: 0;  
       display: block;  
       width: 100%;  
       height: 100%;  
     }  
     .front {  
       -webkit-transform: rotatex(0deg) translatez(25px);  
       -moz-transform: rotatex(0deg) translatez(25px);  
       -o-transform: rotatex(0deg) translatez(25px);  
       transform: rotatex(0deg) translatez(25px);  
     }  
     .back {  
       -webkit-transform: rotatex(-90deg) translatez(25px);  
       -moz-transform: rotatex(-90deg) translatez(25px);  
       -o-transform: rotatex(-90deg) translatez(25px);  
       transform: rotatex(-90deg) translatez(25px);  
       color: #FFE7C4;  
     }  
     .front, .back {  
       display: block;  
       width: 100%;  
       height: 100%;  
       position: absolute;  
       top: 0;  
       left: 0;  
       background: black;  
       padding: 15px 10px;  
       color: white;  
       pointer-events: none;  
       -moz-box-sizing: border-box;  
       box-sizing: border-box;  
     }  

4-Visualize, em seguida salve.

Adicionando código HTML

Copie todo o código abaixo, cole no bloco de notas e faça as devidas alterações.

Onde aparece “LINK” e onde aparece Nome do link.

Feito as mudanças vamos colocar o código.

 <ul class="block-menu">  
 <li><a href="LINK" class="three-d">  
 Nome do link  
 <span class="three-d-box"><span class="front">Nome do link</span><span class="back">Nome do link</span></span>  
 </a></li>  
 <li><a href="LINK" class="three-d">  
 Nome do link<span class="three-d-box"><span class="front">Nome do link</span><span class="back">Nome do link</span></span>  
 </a></li>  
 <li><a href="LINK" class="three-d">  
 Nome do link  
 <span class="three-d-box"><span class="front">Nome do link</span><span class="back">Nome do link</span></span>  
 </a></li>  
 <li><a href="LINK" class="three-d">  
 Nome do link  
 <span class="three-d-box"><span class="front">Nome do link</span><span class="back">Nome do link</span></span>  
 </a></li>  
 <li><a href="LINK" class="three-d">  
 Nome do link  
 <span class="three-d-box"><span class="front">Nome do link</span><span class="back">Nome do link</span></span>  
 </a></li>  
 </ul>  

Finalizando

1-Vá a layout > Adicionar um Gadget (na seção do cabeçalho)

2-Escolha HTML / JavaScript e cole o código em conteúdo

Salve e pronto, seu blog vai ganhar um lindo e funcional menu.