Menu deslizante no topo do blog

Olá! Hoje tem tutorial! Ele é um tutorial de menu deslizante no topo do blog!
Vi ele neste blog : ---- {www} ---- e resolvi repassar pra vocês

Ele fica assim

Aqui tem uma demonstração > clique < 

Continue lendo para saber mais ;)

Para começar você deve clicar em Ctrl F e procurar pelo código

 ]]></b:skin> . Depois de achar, cole abaixo  o código a seguir:

/* Aqui definimos as propriedades CSS para a lista do menu */ ul#navigation { position: fixed; margin: 0px; padding: 0px; top: 0px; right: 10px; 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:#DBDBDB; /*---cor de fundo---*/ background-repeat:no-repeat; background-position:50% 10px; border:1px solid #BCBCBC; /*---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.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); } ul#navigation li a:hover{ background-color:#BCBCBC; opacity: 1; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); } ul#navigation li a span{ letter-spacing:2px; font-size:11px; color:#fff; /*---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://i49.tinypic.com/t9bgrb.png); } ul#navigation .sobre a { background-image: url(http://i49.tinypic.com/20iueqh.png); } ul#navigation .contato a { background-image: url(http://i50.tinypic.com/2wc36sh.png); } ul#navigation .faq a { background-image: url(http://i49.tinypic.com/35b6oty.png); }

Depois de ter feito isso, procure agora por </head>. Depois de achar o código cole logo acime o seguinte:

<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>

Para finalizar 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='contato'><a href='URL-AQUI'><span>Contato</span></a></li> <li class='faq'><a href='URL-AQUI'><span>F.A.Q</span></a></li></ul>

 Depois é só editar o que está destacado! Prontinho, só visualizar e vê se tudo ocorreu bem e salvar! Beijooos