Menu com CSS3 animado incrível para Blogger

Existem muitos menus por toda parte na internet. Hoje eu estou trazendo alguns ótimos e em CSS3, para seu Blog. Juntos eles formam uma coleção de menus animados. Vale a pena conferir e quem sabe, utilizar em seu blog.

Quer ver uma demonstração?

DEMONSTRAÇÃO

1. Vá em Design > Elementos da Página [Recomendo fazer Backup de seu Template]
2. Clique em Adicionar Gadget, logo abaixo do cabeçalho

    3.  Selecione HTML/Javascript e deixe o título em branco. Depois escolha um dos códigos abaixo, e cole o código no seu widget.

Você pode mudar o texto destacado em VERMELHO  com o título do menu e VERDE com seus links.

Adicionar Menu Azul Elementar

<style type="text/css">.menu li{list-style:none;display:inline}.menu li a{-moz-transition:all 270ms ease-in-out 0s;-webkit-transition:all 310ms ease-in-out;-o-transition:all 270ms ease-in-out;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUuiqBLlwqRlAKxTFQMWaIbmJfwgbbgTkbZqv1NpK7jCudgCXWUBSMBSX0vBNGImDpbt2LmJtpRsv8P_rlbnn9LriNvt4pbFPrbYFnsg5it2M4Bb2qaSvuxP7SOJmeZH9Rqlb9ifA_Na4/s1600/noop-menu-blogger.png") repeat scroll 0 0 transparent;border:1px solid #1357AF!important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style><a href="http://netoopsblog.blogspot.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbZWwnrLfzzQ14bTv3Z70OCvgT2DIux1e5_a3L8MQrjTtNZijoQ_EdZHQ_Xl5lAJ9F8hexhjoWhyphenhyphenF0mQR2-YO3gSY_T9YOK7H4BGRlI3LEEIDhBt33Tq0e5nGNt3vQxASZHJwS3GxAvfs/s1600/1x1juice.png" /></a> <div class="noop-menu-blue"> <ul class="menu"><li><a href="http://netoopsblog.blogspot.com/">Home</a></li><li><a href="#">Features</a></li><li><a href="http://netoopsblog.blogspot.in/search/label/Spice%20your%20Blog">Products</a></li><li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Widgets">Contact</a></li><li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Tips">Tips</a></li><li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Tricks">Tricks</a></li><li><a href="#">About</a></li></ul></div>

Adicionar Menu Verde

<style type="text/css">.menu li{list-style:none;display:inline}.menu li a{-moz-transition:all 270ms ease-in-out 0s;-webkit-transition:all 310ms ease-in-out;-o-transition:all 270ms ease-in-out;background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkq8GLIAlymChpm2OddqWJMmViknRIZP1RRZZKrZpK-xscZe9uy9DUJ3Y25S0_iTg1g9ZBg_UHaWn8Rlfj8NmlbztaaI13JwuIkspmyo1ziWUoYvAV2v3L4c6HtmDG2y5guraqW2iqYZM/s1600/netoops-menu-blogger+green.png") repeat scroll 0 0 transparent !important; border: 1px solid #0E8410 !important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style><a href="http://netoopsblog.blogspot.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbZWwnrLfzzQ14bTv3Z70OCvgT2DIux1e5_a3L8MQrjTtNZijoQ_EdZHQ_Xl5lAJ9F8hexhjoWhyphenhyphenF0mQR2-YO3gSY_T9YOK7H4BGRlI3LEEIDhBt33Tq0e5nGNt3vQxASZHJwS3GxAvfs/s1600/1x1juice.png" /></a> <div class="noop-menu-green"> <ul class="menu"><li><a href="http://netoopsblog.blogspot.com/">Home</a></li><li><a href="#">Features</a></li><li><a href="http://netoopsblog.blogspot.in/search/label/Spice%20your%20Blog">Products</a></li><li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Widgets">Contact</a></li><li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Tips">Tips</a></li><li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Tricks">Tricks</a></li><li><a href="#">About</a></li></ul></div>

Adicionar Menu Roxo Uva

 <style type="text/css">.menu li{list-style:none;display:inline}.menu li a{-moz-transition:all 270ms ease-in-out 0s;-webkit-transition:all 310ms ease-in-out;-o-transition:all 270ms ease-in-out;background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu2P8x0fbAg9F2gEdcVsSX6gWIJDLQFVaAkWA-UK2nGh7AUGMOJHFe57opLVKuhWtHYm2O_Iwww_fNumHAWjsy2OpcCnRuFlT24Epg5cXbq-aMAjudp0n24cRLv9YNnzFovzTwTGyBS-Y/s1600/netoops-menu-blogger+purple.png") repeat scroll 0 0 transparent !important; border: 1px solid #7D0FAF !important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style><a href="http://netoopsblog.blogspot.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbZWwnrLfzzQ14bTv3Z70OCvgT2DIux1e5_a3L8MQrjTtNZijoQ_EdZHQ_Xl5lAJ9F8hexhjoWhyphenhyphenF0mQR2-YO3gSY_T9YOK7H4BGRlI3LEEIDhBt33Tq0e5nGNt3vQxASZHJwS3GxAvfs/s1600/1x1juice.png" /></a> <div class="noop-menu-purple"> <ul class="menu"><li><a href="http://netoopsblog.blogspot.com/">Home</a></li><li><a href="#">Features</a></li><li><a href="http://netoopsblog.blogspot.in/search/label/Spice%20your%20Blog">Products</a></li><li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Widgets">Contact</a></li><li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Tips">Tips</a></li><li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Tricks">Tricks</a></li><li><a href="#">About</a></li></ul></div>

Adicionar Menu Azul Claro

 <style type="text/css">.menu li{list-style:none;display:inline}.menu li a{-moz-transition:all 270ms ease-in-out 0s;-webkit-transition:all 310ms ease-in-out;-o-transition:all 270ms ease-in-out;background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj_zX8if5ffjxqV3JdpuqqOPrII-gocd6qF1DW6rZ-kcS2xkLtTha773GrZc0nG_xuaL6WXbUOhwYTLYa1xwT_AgODnjTU0knvrmE6ksAthL8TbbeFWhb_t9WjRDOV1NhaCxjxxQjp7kU/s1600/netoops-menu-blogger+skyblue.png") repeat scroll 0 0 transparent !important; border: 1px solid #138F93 !important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style><a href="http://netoopsblog.blogspot.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbZWwnrLfzzQ14bTv3Z70OCvgT2DIux1e5_a3L8MQrjTtNZijoQ_EdZHQ_Xl5lAJ9F8hexhjoWhyphenhyphenF0mQR2-YO3gSY_T9YOK7H4BGRlI3LEEIDhBt33Tq0e5nGNt3vQxASZHJwS3GxAvfs/s1600/1x1juice.png" /></a> <div class="noop-menu-skyblue"> <ul class="menu"><li><a href="http://netoopsblog.blogspot.com/">Home</a></li><li><a href="#">Features</a></li><li><a href="http://netoopsblog.blogspot.in/search/label/Spice%20your%20Blog">Products</a></li><li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Widgets">Contact</a></li><li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Tips">Tips</a></li><li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Tricks">Tricks</a></li><li><a href="#">About</a></li></ul></div>

Adicionar Menu Marrom Árvore

<style type="text/css">.menu li{list-style:none;display:inline}.menu li a{-moz-transition:all 270ms ease-in-out 0s;-webkit-transition:all 310ms ease-in-out;-o-transition:all 270ms ease-in-out;background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCwQb90sYT0rB1t8W7xCUuUrRAbnh9TRaYNlfvp3ofh2SgEGypbTvuUCOxhYhIiK8doD2ikwrinLElI_b5hQFxwnnvOXT5l_VrMj0iu30uD-awniDSmfTsO7f3HEX14nyCbRrIWsGlKIU/s1600/netoops-menu-blogger+brown.png") repeat scroll 0 0 transparent !important; border: 1px solid #7C4B12 !important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style><a href="http://netoopsblog.blogspot.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbZWwnrLfzzQ14bTv3Z70OCvgT2DIux1e5_a3L8MQrjTtNZijoQ_EdZHQ_Xl5lAJ9F8hexhjoWhyphenhyphenF0mQR2-YO3gSY_T9YOK7H4BGRlI3LEEIDhBt33Tq0e5nGNt3vQxASZHJwS3GxAvfs/s1600/1x1juice.png" /></a> <div class="noop-menu-brown"> <ul class="menu"><li><a href="http://netoopsblog.blogspot.com/">Home</a></li><li><a href="#">Features</a></li><li><a href="http://netoopsblog.blogspot.in/search/label/Spice%20your%20Blog">Products</a></li><li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Widgets">Contact</a></li><li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Tips">Tips</a></li><li><a href="http://netoopsblog.blogspot.in/search/label/Blogger%20Tricks">Tricks</a></li><li><a href="#">About</a></li></ul></div>

Espero que tenham gostado! Até a próxima!

Fonte: NetOops

Share This :