17 de dez. de 2012

Tutorial ; Menu igual ao do blog ( pedido )

               
 Oi lindas , hoje venho trazendo um tutorial do menu aqui do blog que foi a pedido da  Vitoria 
Vamos conferi ??

                                                           Exemplo do menu ;



                                         Vá em Editar HTML > F3 e procure por ;
                                                         ]]></b:skin>


                                                       Acima da tag cole:


  /* Aqui definimos as propriedades CSS para a lista do menu */ul#navigation { position: absolute; margin: -25px; padding: 0px; top: 0px; right: 150px; list-style: none; z-index:999999; width:721px;}ul#navigation li { width: 103px; display:inline; float:left;}ul#navigation li a { display: block; float:left; margin-top: -2px; width: 100px; height: 25px; background-color:#d4d4d4; /*---cor de fundo---*/ background-repeat:no-repeat; background-position:50% 10px; border:1px dashed #8d898b; /*---cor da borda---*/ -moz-border-radius:0px 0px 10px 10px; -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -khtml-border-bottom-right-radius: 10px; -khtml-border-bottom-left-radius: 10px; text-decoration:none; text-align:center; padding-top:80px; opacity: 0.8; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);}ul#navigation li a:hover{background-color:#CAE3F2;opacity: 1;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);}ul#navigation li a span{ letter-spacing:2px; font-size:13px; color:#3e3d3e; /*---cor do link---*/ text-shadow: 0 -1px 1px #fff;}/* Aqui definimos as imagens de fundo para os links dos itens da lista do menu*/ul#navigation .home a{background-image: url(http://i1234.photobucket.com/albums/ff411/SweetLG/homee.png);}ul#navigation .sobre a {background-image: url(http://i1234.photobucket.com/albums/ff411/SweetLG/sobre.png);}ul#navigation .foryou a {background-image: url(http://i1234.photobucket.com/albums/ff411/SweetLG/fpryou.png);}ul#navigation .tutoriais a { background-image: url(http://i1234.photobucket.com/albums/ff411/SweetLG/tuto.png);}ul#navigation .png a { background-image: url(http://i1234.photobucket.com/albums/ff411/SweetLG/png.png);}


                                                         Procure por ;
                                                           </head> 

                                                 Acima da tag cole:



<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/><script type='text/javascript'>$(function() { var d=300; $(&#39;#navigation a&#39;).each(function(){ $(this).stop().animate({ &#39;marginTop&#39;:&#39;-80px&#39; },d+=150); }); $(&#39;#navigation &gt; li&#39;).hover( function () { $(&#39;a&#39;,$(this)).stop().animate({ &#39;marginTop&#39;:&#39;-2px&#39; },200); }, function () { $(&#39;a&#39;,$(this)).stop().animate({ &#39;marginTop&#39;:&#39;-80px&#39; },200); });});</script>


                                                  Agora procure por 
                                                       <header>

                                                    Acima da tag cole:


<ul id='navigation'> <li class='home'><a href='URL-AQUI'><span>Home</span></a></li> <li class='sobre'><a href='URL-AQUI'><span>Sobre</span></a></li> <li class='foryou'><a href='URL-AQUI'><span>For You</span></a></li> <li class='tutoriais'><a href='URL-AQUI'><span>Tutoriais</span></a></li> <li class='png'><a href='URL-AQUI'><span>Png's</span></a></li></ul>


É isso créditos ;   

22 comentários:

  1. Esse menu é super lindo. Ótimo tutorial *u*

    Garota Differente

    ResponderExcluir
  2. Nossa! Fico muito muito muito feliz que meu pedido está sendo atendido. Tudo bem explicadinho.

    Amei!

    http://aerafeminina.com

    Obrigada

    Bjos!

    ResponderExcluir
    Respostas
    1. Que bom que gostou linda , estou fazendo com o maior carinho beijos

      Excluir
  3. Amei o tutorial *-*
    http://fasesdegarota.blogspot.com.br

    ResponderExcluir
  4. Eu não entendo nadica de nada de html e olha que tenho um curso basiquinho de webdesign, rs. Acho que foquei mais no photoshop do que no resto, kkk.
    Bjus

    Rafa
    Rafaelando.com

    ResponderExcluir
  5. Já usei um menu desses no meu antigo lay... da um up no visu! - Gostaria de saber se vc deseja fazer troca de seguidores, (vc segue meu blog e eu sigo o seu) Diz a resposta, deixa um comentario no meu blog... Abraços!

    docefuturo.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Haha com certeza ele é lindo , pronto fofinha seguindo :)

      Excluir
  6. OOi hanny Claro que o Inspires 7 pode ser afiliado do 'HM :)

    Já vou te colocar! pode me colocar também


    beijoos//nspires7

    ResponderExcluir
    Respostas
    1. Oi de novo kkkk, vc pode fazer um tutorial ensinando a como colocar

      Atualmente

      185 Postagens
      567 Comentários

      Excluir
    2. Aiim obrigada linda , já te coloquei também , é logico que eu faço o tuto linda , estou terminando um post , assim que termina-lo atendendo o seu pedido !

      Excluir
  7. Vlw Lo , vou tentar fazer rsrsrs ,agora não sei se va dar certo !Bjos até mais ♥

    louquita.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Eu testei e deu certo mais foi no modelo travel do blog , espero que der certo fofinha beijinhos

      Excluir
  8. Oii , gostei muito de seu blog. Ele é muito lindinho, organizado demais.
    Conheci hoje e já me apaixonei . Volto aqui hein , pode me esperar.
    Seu blog é muito maravilhoso e merece sucesso.
    Visita o meu , se puder seguir me sentirei honrada. Só não repara porque ainda está em fase de mudanças.
    Que Deus te abençoe ! (:
    Booas Feestas !
    Beijinhos , a paz de Christ ;* ;*

    >> http://girls-of-christ.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Ooi linda , obrigada pelo carinho e com toda certeza do mundo vou te seguir , aim te espero sim aqui :) seja muito bem vinda beijiinhos e boas festas para você também ♥

      Excluir
  9. Que menu divo *u*
    Já to usando .
    Amor ser não for incomodo faz afiliação comigo ?

    Kissus ,
    my-doce-kawaii.blogspot.com.br ♥

    ResponderExcluir
    Respostas
    1. Claro linda , já te coloquei nos meus afiliados beijinhos ♥

      Excluir
  10. Amei seu blog parabéns você explica super bem explicado.

    ResponderExcluir