Adicionando Menu com Efeito

Hello! Tudo bom com vocês? Vamos atualizar a nossa página de tutoriais hoje com mais um menu super legal, fofo e fácil de usar. Menu Flow tem um lindo efeito ao descansar o mouse e como é de costume deixei tudo organizado para vocês.

-------------------------------------------------------------------------------------
Copie o código abaixo cole em HTML/Java Script, adicione o link dos sites e salve. <style> #Efeitonew a img{ display:inline; margin-right:2px; margin-left:1px; margin-top:1px; margin-bottom:1px; padding: 3px; background: #F5F5F5; border:1px dashed #DCDCDC; -webkit-transition: 0.5s; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; outline: dashed 1px #DCDCDC; outline-offset: -10px; -moz-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } #Efeitonew a:hover img{ outline: solid 3px transparent; opacity: 0.5; outline-offset: -20px; } </style> <div id="Efeitonew"> <center> <a href="ENDEREÇO DO SITE" target="_blank"title="Nome do site / Blog"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpmHjsCKVo3XCM6cdf1ql53eQcpZN6hdISBfPxDhRTTXyACe0WqWaSf2UKs0fuEjU-bGxhwgNUgBL99IG1moUhfYGTpf4oX_2MTu9UeCxEXmbwrsTJDomNMTdyRJOM-sQvzZEKORyKqagz/s1600/olhos.jpg"width="50px" height="50px" /></a> <a href="ENDEREÇO DO SITE" target="_blank"title="Nome do site / Blog"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiHtBplORsIFXs5qnh3N_l9K03Dq1_SWEa4H8ndV4JLZpXMDEolD-oF4vAq2aiYLY-EbdmDCvDOWByjcIMXj1XthB1wdjSSNiiibqenhtO2wd_Eg6siagUZU9vMm1GYTgIyOiUbVIGN0JG/s1600/boca.jpg"width="50px" height="50px" /></a> <a href="ENDEREÇO DO SITE" target="_blank"title="Nome do site / Blog"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguX0gIR_KMwOOthqBnVh15CDzbw1qbozoLyaDaYgohi2AsEW6jNEnAzKJLBbNpNhUQDN_UVvc0Vr1DXFJGl8TCPV4YjR9miWmnGQ_VtzVFY8pF8Dd68O6g9QNQvOZb0PMg5CkORgR3faq2/s1600/sapato.jpg"width="50px" height="50px" /></a> <a href="ENDEREÇO DO SITE" target="_blank"title="Nome do site / Blog"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie8VjsSbS4kdHIq58fVro4pSEBNjSgmHF52Uc4AN5jaWw78RCqnJ7seUPs2xfn7AFR7x8xS1E2iqvcvPFD5zD-c79I0JgKHqBGtiQg_t9nls9IGKFwU0dvYFVVlFIJjSqUXhYZYNt-EA-Q/s1600/sapato_.png"width="50px" height="50px" /></a> <a href="ENDEREÇO DO SITE" target="_blank"title="Nome do site / Blog"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP_pUn1VHyzs2JJL48a5kd54n09tOKW91B_pb1dGPZwjDFWBOdH52FJT_W5YycYtNUUPKAza0ZUVuqvsDM3bnoIf5jef0PLo9_OhNzrl-BBKD54Rf7cLUI4Gm3c0n8A-Z40nGHnhkP8A-V/s1600/nail.png"width="50px" height="50px" /></a> <a href="ENDEREÇO DO SITE" target="_blank"title="Nome do site / Blog"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpo7qy-40YNZjS3UGKWlPcoTzSLsJrrJTYRCIKHZY13Z1Za5NDE-dFd-hnEqDodXsz-9vkp95ehFTrtkGqKn3gN0863fKK6Mz_fYfyW2VEbINAISUgiqNR9XsJKOYzpDSY5LeVD55h1DIX/s1600/kawaii.jpg"width="50px" height="50px" /></a> </center> </div>

OBS: Para adicionar mais ícones copie o codigo abaixo e cole a cima das tags </center> </div> que está localizada no final do código do Menu Flow.

<a href="ENDEREÇO DO SITE" target="_blank"title="Nome do site / Blog">
<img src="ENDEREÇO DA IMAGEM"width="50px" height="50px" /> </a>