Menu Deslizante

Olá Anjos! 

Hoje vou ensinar a colocar o menu deslizante que nem no Template Magic Wing. Eu aprendi no Mundo Blogger e no Kawaii World, fiquei em dúvida qual deles creditar, então vai os dois ^^

1- Vá no HMTL do seu blog, aperte CTRL+F e procure por:

]]></b:skin>

 2- ACIMA disso, 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/sobre.png);
}
ul#navigation .tutoriais a   {
    background-image: url(http://i1234.photobucket.com/albums/ff411/SweetLG/sobre.png);
}
ul#navigation .png a     {
    background-image: url(http://i1234.photobucket.com/albums/ff411/SweetLG/sobre.png);
}

Não vou explicar todo o código, mas acho que dá para entender só olhando.

3- Procure por:

 </head>

4- Acima disso, 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>

5- Agora procure por:

<header>

6- ACIMA disso, 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>

 Mude as partes em vermelho para a url e o nome da sua página.

Meus querides! Caso vocês gostem desse blog e queiram continuar me acompanhando, eu ainda escrevo, mas em outro blog. Não posto apenas tutoriais, mas continuo escrevendo e falando de vários assuntos, inclusive a blogosfera. Caso queira visitar (sério ótimo uma visita): clique aqui para ir ao blog Serenar