Menu animado CSS para Blogger l

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 l, sim pois postaremos o ll logo a seguir.
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 #00BFFF(azul piscina) quando passa o mouse e pode ser
mudada ao seu gosto. OBS: Esta cor para mim é azul piscina ou outra cor que você enxergue, sim pois as cores dependem dos seus olhos.
Onde está href="#" a parte em vermelho substitua pela URL do link corespondente.
Feito todas as personalizações é só adicionar o widget, isto é tudo.

<menu class="menu1"> <a href="#" data-hover="Home"><span>Home</span></a> <a href="#" data-hover="About Us"><span>About Us</span></a> <a href="#" data-hover="Tutorials"><span>Tutorials</span></a> <a href="#" data-hover="HTML&CSS"><span>HTML&CSS</span></a> <a href="#" data-hover="Sitemap"><span>Sitemap</span></a> </menu>

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

.menu1 {position: relative; z-index: 1;}

.menu1 a {overflow: hidden; color:#fff; text-decoration: none;margin: 5px 10px;}

.menu1 a span {display: block; padding: 12px 20px; background: #00BFFF; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s;}

.menu1 a:before {position: absolute; top: 0; left: 0; z-index: -1; padding: 12px 20px; background: #FFF; color: #00BFFF; text-decoration: none; content: attr(data-hover); -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; -webkit-transform: translateX(-25%);}

.menu1 a:hover span, .menu1 a:focus span {-webkit-transform: translateX(100%); -moz-transform: translateX(100%); transform: translateX(100%);}

.menu1 a:hover::before, .menu1 a:focus::before {-webkit-transform: translateX(0%); -moz-transform: translateX(0%); transform: translateX(0%);} </style>

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

---