MENU LAVALAMP COM CSS3 E JQUERY

Eu compartilhei vários menus aqui no blogger e sites 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

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

</head>

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

<script src="http://code.helperblogger.com/lavalamp-menu.js" type="text/javascript"></script>

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)

]]></b:skin>

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:

<div class="lavalamp dark">

<ul> <li class="active">

<a href="">Home</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Blog</a></li>

<li><a href="#">Services</a></li>

<li><a href="#">Portfolio</a></li>

<li><a href="#">Contacts</a></li>

<li><a href="#">Back to Article</a></li>

<li><<a href="#">How it Works?</a></li>

</ul>

<div class="floatr"></div>

</div>

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
<div class="lavalamp dark"> com um dos códigos abaixo.

<div class="lavalamp">
<div class="lavalamp magenta">
<div class="lavalamp cyan">
<div class="lavalamp yellow">
<div class="lavalamp orange">
<div class="lavalamp dark">

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!