Menu Lavalamp com CSS3 e jQuery

Eu compartilhei vários menus aqui no Dicas Blogger até agora. O primeiro foi um Puro CSS3 menu para blogger e o segundo foi Menu horizontal com submenu e caixa de busca e o terceiro foi um Elegante menu css3 lateral vertical para blog e o quarto que foi o Menu multi level com CSS3.

Desta vez eu quero compartilhar com vocês um incrível menu Lavalamp com CSS3 e jQuery; como mencionado no título, ele funciona com CSS3 e jQuery. Você pode usar esse menu em 6 cores mudando apenas uma palavra no código HTML. Este menu foi desenhado por Insidesigns e eu fiz alguns ajustes para funcionar perfeitamente com qualquer blog do blogger.

Demonstração

Agora vamos ao tutorial e ver como adicionar esse menu Lavalamp com CSS3 e jQuery no blogger.

Como adicionar o Menu Lavalamp com CSS3 e jQuery no blogger?

1. Acesso o Painel do Blogger e navegue até Modelo > Editar HTML

(Veja: Como acessar o código XML/HTML na nova interface do blogger)

2. Encontre o seguinte código (use CTRL + F para encontrar o código)

3. Adicione o código abaixo logo acima/antes do código encontrado

Nota: Se você já tiver adicionado o jQuery library no seu blog. Delete a parte do código que está destacada.

Adicionar o estilo CSS

1. Encontre o seguinte código (use CTRL + F para encontrar o código)

]]>

2. Depois de encontrar o código acima; adicione o seguinte código antes do código encontrado

/*LAVALAMP MENU BY http://www.dicasblogger.org/ START*/ .lavalamp { position: relative; border: 1px solid #d6d6d6; background: #fff; padding: 15px; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); border-radius : 10px; -moz-border-radius : 10px; -webkit-border-radius : 10px; background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204))); background : -moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204))); height: 18px; font-family: calibri; } .magenta { background : rgb(190,64,120); background : -webkit-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91))); background : -moz-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91))); border: 1px solid #841144; } .cyan { background : rgb(64,181,197); background : -webkit-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187))); background : -moz-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187))); border: 1px solid #2f8893; } .yellow { background : rgb(255,199,79); background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43))); background : -moz-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43))); border: 1px solid #c08c1f; } .orange { background : rgb(255,133,64); background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24))); background : -moz-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24))); border: 1px solid #c04f11; } .dark { background : rgb(89,89,89); background : -webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54))); background : -moz-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54))); border: 1px solid #272727; } .magenta li a , .cyan li a, .yellow li a , .orange li a, .dark li a{ color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.40); } .lavalamp a { text-decoration: none; color: #262626; line-height: 20px; } .lavalamp ul { margin: 0; padding: 0; z-index: 300; position: absolute; } .lavalamp ul li { list-style: none; float:left; text-align: center; } .lavalamp ul li a { padding: 0 20px; text-align: center; } .floatr { position: absolute; top: 10px; z-index: 50; width: 70px; height: 30px; border-radius : 8px; -moz-border-radius : 8px; -webkit-border-radius : 8px; background : rgba(0,0,0,.20); -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; } /*LAVALAMP MENU BY http://www.dicasblogger.org/ END*/

Clique em Salvar modelo

Adicionar o menu

1. Acesse o painel do seu blog
2. Clique na guia “Layout“
3. Clique em ‘Adicionar um gadget’ → Escolha tipo’HTML/Javascript’ e cole o seguinte código:

• Home

• About
• Blog
• Services
• Portfolio
• Contacts
• Back to Article
• <How it Works?

Substituir # com os seus links
Substitua Home, About, Blog e etc. com o texto que você quer que apareça no menu.
Se você quer mudar a cor de fundo do menu, substituir

com um dos códigos abaixo.

Finalmente, salvar o seu widget e está feito.

Eu tentei o meu melhor para manter este tutorial tão fácil quanto possível, se você ainda está tendo problema para seguir o tutorial, então sinta-se livre para compartilhar o seu problema através da área de comentários abaixo, vou tentar dar a resposta tão logo o tempo permita.

Até a próxima!