Menu Lavalamp com CSS3 e jQuery

Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

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.

Menu Lavalamp com CSS3 e jQuery

 

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:

 

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!

Já pensou em ser um(a) Blogueiro(a) mais Profissional?

Está cansado(a) de ser um blogueiro mediano(a) e que não tem resultados com seu Blog, não ganha dinheiro e não recebe as visitas que gostaria?

Você chegou aqui procurando como aprofundar seus conhecimentos em Blog, como Ganhar Dinheiro com seu Blog, aplicar as melhores técnicas de SEO, divulgar seu Blog e fidelizar seu público alvo. E posso te ajudar com essas coisas e muito mais, elevando o nível de qualidade do seu projeto.

Desenvolvi um curso completo, totalmente online, cobrindo tudo o que é necessário para um Blog atingir seu potencial máximo, detalhe por detalhe, que vão te tornar um Blogueiro de Elite:
  • Técnicas de produção de conteúdo
  • Fidelização do Público alvo
  • Divulgação e Técnicas de SEO
  • Métodos e técnicas de Monetização
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

Esta é sua chance de ser mais profissional e ter um blog eficiente, completo e que pode ser sua fonte de renda permanente. Sou Blogueiro desde 2007 e condensei todo este conhecimento dentro do curso Blogueiro de Elite para entregar a você.

19 Comentários

  1. Olá Kemuel,o post está bem explicado e de fácil aplicação.No meu caso eu preferia este menu no lugar onde ficam as páginas criadas dentro do blogue e não como mais um widget. Possível esta alteração?
    Obrigado e Abraço

    Responder

    • Todos os codigos antes de serem postados aqui são testados. Todos funcionam perfeitamente bem. Tenho vários blogs de testes e em todos funcionaram; como você pode ver no Demontração. O problema é você, não os codigos.

      Responder

  2. Oi, agora já dá mas a sombra sobre os links não se move… já dei espaços no local dentro do editar html, apaguei o Qj e voltei a colocar, já refiz e nada… pode me dar uma dica o porquê acontece? valeu!

    Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.