Menu animado CSS para Blogger ll

Olá amigos Mult-focos, salve, salve!
Temos neste post um menu animado muito simples e de visual atraente para seu Blogger, é o Menu
animado Css para Blogger ll.
Como se trata de um widget é só seguir os mesmos passos de adição de um widget, não sabe como veja AQUI.

Copie o código HTML do box abaixo cole em um documento de texto e siga os passos abaixo, para visualizar como funciona o menu clique em result.

Personalização

As nomenclaturas dos links pode mudar para sua necessidade.
As cores dos links estão #ff9900 (Laranja) e #00FF00 (verde) quando passa o mouse e podem ser
mudadas ao seu gosto.
Onde está href="#" a parte em vermelho substitua pela URL do link correspondente.
Feito todas as personalizações é só adicionar o widget, isto é tudo.

<menu class="menu2"> <a href="#" data-hover="Home">Home</a> <a href="#" data-hover="Blogger">Blogger</a> <a href="#" data-hover="Tutoriais">Tutoriais</a> <a href="#" 

data-hover="HTML&CSS">HTML&CSS</a> <a href="#" data-hover="SEO">SEO</a> <a href="#" data-hover="Comtato">Contato</a> <a href="#" data-hover="Social">Social</a> <a 

href="#" data-hover="Sitemap">Sitemap</a> </menu>

<style>menu a {position: relative;  display: inline-block; padding:12px; text-decoration: none; font: 15px Verdana; -webkit-text-shadow: 1px 0px #666; -moz-text-

shadow: 1px 0px #666; text-shadow: 1px 0px #666;}

.menu2 a {color: #FF9900;text-decoration: none;}

.menu2 a:before {color: #00FF00;text-decoration: none; content: attr(data-hover); position: absolute; opacity: 0; -webkit-transform: scale(1.1) translateX(10px) 

translateY(-10px) rotate(4deg); -moz-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg); transform: scale(1.1) translateX(10px) translateY(-10px) 

rotate(4deg); -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; 

pointer-events: none;}

.menu2 a:hover::before, .menu2 a:focus::before {text-decoration: none; -webkit-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg); -moz-transform: scale

(1) translateX(0px) translateY(0px) rotate(0deg); transform: scale(1) translateX(0px) translateY(0px) rotate(0deg); opacity: 1;} </style>

See the Pen Menu animado CSS para Blogger ll by Mairink (@Oemes) on CodePen.

---