dicas blog
Home » , , » Como adicionar um menu lavalamp no blogger

Como adicionar um menu lavalamp no blogger

3
Nesse tutorial  vou  mostrar  como  adicionar  um  menu  com  efeito jQuery mágico  ao  passar  o  mouse   hover  por  cima  dos  botões,   o  efeito  acompanha  o  seu   movimento  gerando   um  efeito  muito  divertido  de  perseguição  que  chama  muito  a  atenção.  para   que  nunca  viu   ou  esta  começando  a  blogar   a  pouco  tempo  de repente  pode  estar  procurando  um  menu  com  efeitos de  movimentos  ao  passar  o  mouse,  ou esta  pesquisando    como  colocar no  blogger  um  menu  com  efeitos especiais  e  não  sabe  o  nome  pesquise  por  menu  (lavalamp) ou  (MagicLine) e  você   vai  encontrar  vários  modelos  e   estilos  par  seu  blogger,  bom  deixa   de  papo  e   vamos  ao  tutorial  para a instalação.
Veja  uma demos tração clique no botão  abaixo.

 Demo

Tutorial para blogger e blogspot.

primeiro  vá em  modelo  e procure pelos trechos  abaixo.

]]></b:skin>  e adicione  o  código abaixo acima dela.

/*começo do  menu lavalamp*/

.lavalamp {
    margin-left:40px; /*ajuste da  margem esquerda*/
    margin-top:30px;  /*ajuste da  margem top */
    font-size:24px;  /*tamanho da fonte*/
    position: relative;
    background: #;
    padding: 15px; /*ajuste distancia entre botões*/
    border-radius : 10px;
    -moz-border-radius : 10px;
    -webkit-border-radius : 10px;
     height: 18px;
     font-family: calibri;
}

.magenta li a , .cyan li a, .yellow li a , .orange li a, .dark li a{
 color: #000; /*cor do texto*/
 text-shadow: 0 -1px 0 rgba(0,0,0,.40);

}

.magenta li a , .cyan li a, .yellow li a , .orange li a, .dark li a:hover{
 color: #fff; /*cor do  texto hover*/
}

.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: 40px;
    border-radius : 8px;
    -moz-border-radius : 8px;
    -webkit-border-radius : 8px;
    background : #39C; /*cor do  botão*/
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
}

/*final do  código   do menu lavalamp*/

Tutorial  atualizado:código na caixinha abaixo.


agora procure  por <head>  e  adicione   o  código abaixo abaixo  dela.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="https://sites.google.com/site/menunomedois/ultimospostagens56/menulev.js" type="text/javascript"></script>

Tutorial  atualizado:código na caixinha abaixo.


agora procure  por </head> e  adicione  o código  abaixo abaixo dela.

<!--começo do html do menu-->
<div class="lavalamp dark">
 <ul>
  <li class="active"><a href="">Home</a></li>
  <li><a href="#">Novidades</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Serviços</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Contatos</a></li>
  <li><a href="#">Tutorial</a></li>
  <li><a href="#">Parceiros</a></li>
 </ul>
 <div class="floatr"></div>
</div>
<!--final  do  html do  menu-->
 
Tutorial  atualizado:código na caixinha abaixo.

Nos locais  aonde tem  um# coloque seus links destinos agora salve  o  modelo.

As principais  partes  do  código  estão marcadas para  facilitar  sua  personalização, como ajustes trocas  de cor margens para esquerda e  direita.

Ajuste  a  margem  do  topo  como  preferir.

Duvidas  ou  dificuldades   você  pode  perguntar que dou  o  suporte  a  você obrigado.

3 comentários:

  1. Acho que vou usar esse menu.Cara seu blog é muito perfeito,tem vários tutoriais bacanas aqui :D
    Já virei leitora!

    http://princesadopanico.blogspot.com.br/

    ResponderExcluir
  2. Adorei seu blog! Tutoriais muito bons!

    http://saiadeferro.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Ola Judite Cypreste,obrigado pela sua visita!

      Excluir