Tutorial Menu deslizante no topo do blog

Vamos continuando com a maratona!!!!
Agora é um menu *-* (*quase caindo por estar postando como nunca*)
By: Kawaii World
Ele ficará assim:

1ºPasso:
Vá em Modelo Editar HTML e procure por  ]]></b:skin>  e acima do código 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);

}

É só editar o que está em negrito


2ºPasso:
Procure por </head> e acima dele 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> 


3ºPasso:
Agora procure por <header> e acima dele 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>


Demora um pouco mas fica super Kawaii!!!
Agora uma pausa para descanso.

Espero que tenham gostado.


Kissus!!!