Menu Horizontal com CSS e Jquery (efeito hover) para Blogger - BlogSpot 1

Olá pessoal. Rodando pela net, e ao me deparar com o blog Template novo Blog, vi um artigo que ensinava passo a passo como instalar um menu horizontal com CSS e Jquery com efeito hover, Veja o demo > AQUI < e me lembrei que um leitor do blog me pediu para publicar o tal menu. O criador do menu foi o Soh do blog Soh Tanaka. O  menu é ótimo para quem gosta desse efeito e para aqueles que não tem nenhum menu horizontal, será ótimo. Fiz algumas alterações, pois os iniciantes, não iriam entender. Vamos ao que interessa...

Primeiro você deve criar uma imagem com 80px de altura onde metade de cima dela (40px) aparecerá quando o menu estiver em estado normal e a metade de baixo no estado hover (quando passa o mouse por cima), como neste exemplo:

Feito a figura, hospede em seu site preferido, pode ser em qualquer lugar, reserve o link da imagem. Agora vá em Design ~> Editar HTML e procure por esse trecho no seu template  ]]></b:skin>, adicione todo o código ABAIXO desse trecho.

<style type='text/css'>

.container {
    width: 520px;
    height: 100px;
    position: absolute;
    top: 10%; left: 60%;
    margin: 0px 0 0 -80px;
    overflow: hidden;
}
img {border: none;}
ul#topnav {
    margin: 10px 0 20px;
    padding: 0;
    list-style: none;
    font-size: 1.1em;
    clear: both;
    float: left;
    width: 520px;
}
ul#topnav li{
    margin: 0;
    padding: 0;
    overflow: hidden;
    float: left;
    height:40px;
}
ul#topnav a, ul#topnav span {
    padding: 10px 10px;
    float: left;
    text-decoration: none;
    color: #fff;
    clear: both;
    height: 20px;
    line-height: 20px;
    background: #1d1d1d;
}
ul#topnav a {    color: #7bc441; }
ul#topnav span {
    display: none;
}

ul#topnav.v2 span{
    background: url(coloque aqui a url da imagem) repeat-x left top;
}
ul#topnav.v2 a{
    color: #555;
    background: url(coloque aqui a url da imagem) repeat-x left bottom;
}
</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function() {
           $(&quot;#topnav li&quot;).prepend(&quot;<span/>&quot;); //Throws an empty span tag right before the a tag

    $(&quot;#topnav li&quot;).each(function() { //For each list item...
        var linkText = $(this).find(&quot;a&quot;).html(); //Find the text inside of the a tag
        $(this).find(&quot;span&quot;).show().html(linkText); //Add the text in the span tag
    });

    $(&quot;#topnav li&quot;).hover(function() {    //On hover...
        $(this).find(&quot;span&quot;).stop().animate({
            marginTop: &quot;-40&quot; //Find the span tag and move it up 40 pixels
        }, 250);
    } , function() { //On hover out...
        $(this).find(&quot;span&quot;).stop().animate({
            marginTop: &quot;0&quot; //Move the span back to its original state (0px)
        }, 250);
    });
   
});
</script>

Feito isso, altere as partes de vermelho com a URL da imagem que você hospedou anteriormente, salve,  volte em Design, ~> Elementos da Página  ~> Adicione um Gadget HTML/JavaScript e em seguida, cole todo o código abaixo.

<ul class='v2' id='topnav'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Services</a></li>
<li><a href='#'>Portfolio</a></li>
<li><a href='#'>Blog</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>

Feito tudo, procure uma posição acima das postagens e abaixo do seu banner.(header), como mostra o demo que vimos no início do artigo. Lembrando que temos que alterar as seguintes partes do código acima. onde está # é o lugar que será inserido o seu link desejado. E de acordo com o que você quer que apareça nos botões, você irá alterar onde está "home" ou "services", ai vai de sua imaginação.

Qualquer dúvida não deixe de me contatar.

Até a próxima!