Menu horizontal com imagem animada e descrição para o Blogger

Mais um menu do site Timpanus, veja AQUI o efeito...

Hospede o arquivo jquery em um site como o Google Site

jquery-1.4.2.min.js

Agora copie este código abaixo e cole no HTML/Javascript colando depois o endereço do arquivo jquery no local indicado.

<style>
.container{
    width:900px;
    height:140px;
    margin:0 auto;
    position:relative;
    overflow:hidden;
    border:3px solid #fff;
    background-color:#fff;
    -moz-box-shadow:1px 1px 6px #000;
    -webkit-box-shadow:1px 1px 6px #000;
    -moz-border-radius:0px 0px 20px 20px;
    -webkit-border-bottom-left-radius:20px;
    -webkit-border-bottom-right-radius:20px;
    border-radius:0px 0px 20px 20px;
}
ul#menu{
    list-style:none;
    position:absolute;
    bottom:0px;
    left:10px;
    font-size:22px;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    color:#999;
    letter-spacing:-1px;
}
ul#menu li{
    float:left;
    margin:0px 4px 2px 0px;
}
ul#menu a{
    cursor:pointer;
    position:relative;
    float:left;
    bottom:-95px;
    line-height:20px;
    width:130px;
}

.link1,
.link2,
.link3,
.link4,
.link5,
.link6{
    width:64px;
    height:74px;
    display:block;
    left:40px;
    top:220px;
    position:absolute;
}
.link1{
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiQJ6Np2OdeyP0ATOX1JKE0B0SAHLVEhvabPqebcqpt6b-Nbl0pl1RfArS-oeIaOQfUEcz5Aqodal1d5LNETSBTSGZ22VhWBAAcdImA8737jtVxbCDp708j7T4oK-2e1xUuLbTwdO2k0qY/s320/home.png) no-repeat top left;
}
.link2{
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZssjGQJjoD485aHfaATgqgDZHYYH_4dvfUMpIgxBXOa-1gu7UCZ9MrsTLCefBiKt5gHFnq-e3uAoNNiEXqxikO93z0FluV6s-g2cBkAd0kv5cAV9vSNmMJEBvBTLApahgt5Mljza-SrAT/s320/folder.png) no-repeat top left;
}
.link3{
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq-X3O_3tOpoo3jgEendW5ZOllDLt1ajvOh1zgrT0XahUQg_36Tr0a9wNPjmCbEHIqUunetZq4r2DDDyqPKa00nwpO3hPnd1z90wZh_ihyse_UJSAWFbW76Fx-_suC2WJy0IXf5ltT-Uam/s320/warning.png) no-repeat top left;
}
.link4{
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9BDo4UPIjztexv0CNpTZp_5ExrCOnV2aw8S84hPEnrKx6d8iQcJTfZj2LUt3MTOBmC0968maKOAJ2Q8rkbJzFc1qiXka9seFZd-6tzEpY3egvSttmFNYi4Mvgz0-k_FB6CXgSkgu6s7JL/s320/rss.png) no-repeat top left;
}
.link5{
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnybeFNYV4AvMmw3BP6iXgSReY_USNyAtiJC6PJtVez30-ji86Hf8mhAJmt5Bj6KbJtAhVR8TPOB6muPG0mwlJ-uaU6AKNwRTMtOqV7W7Rs6Oh0BljESICsNVKXpkUIzq1td2G_9Uf_r1-/s320/tag.png) no-repeat top left;
}
.link6{
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcPn19OkDuzdDLc7ejB6TGOV0Oh3YzUYTE11c9Ym2l04wiAv4hFElKE5sFOJBkSTpah2v-LM1-ZRW4_w9TgUkwpOMaiunRuxjSgkpxUJKRrqaLRzbHrZvEn3jxGvVhJ1Lx0AdOb8iXa4vE/s320/mail.png) no-repeat top left;
}
ul#menu span.title{
    display:block;
    height:26px;
    text-shadow:1px 1px 1px #000;
    color:#B7B7B6;
    text-indent:10px;
}
ul#menu span.description{
    width:100px;
    height:80px;
    background-color:#B7B7B6;
    border:3px solid #fff;
    color:#fff;
    display:block;
    font-size:14px;
    padding:5px;
    -moz-box-shadow:1px 1px 6px #000;
    -webkit-box-shadow:1px 1px 6px #000;
    box-shadow:1px 1px 6px #000;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
}

ul#menu a:hover span.description{
    background-color:#808080; color: #cc0000;
}
ul#menu a:hover span.title{
    color:#cc0000;
}

</style>


<script src='AQUI O ENDEREÇO DO ARQUIVO JQUERY'/></script>

 <script type="text/javascript">

$(function() {
    $('#menu > li').hover(
        function () {
            var $this = $(this);
            $('a',$this).stop(true,true).animate({
                    'bottom':'-15px'
                }, 300);
            $('i',$this).stop(true,true).animate({
                    'top':'-10px'
                }, 400);
        },
        function () {
            var $this = $(this);
            $('a',$this).stop(true,true).animate({
                    'bottom':'-95px'
                }, 300);
            $('i',$this).stop(true,true).animate({
                    'top':'50px'
                }, 400);
        }
    );
});
 </script>

Agora vá até o HTML de seu blog e procure pelo seguinte código (para ficar acima da header)

<div id='header-wrapper'>

e cole o próximo código.

<div class='container'>
<ul id='menu'>
<li>
<a href='ENDEREÇO DE SEU BLOG/'>
<i class='link1'/>
<span class='title'>Home</span>
<span class='description'>
Início
</span>
</a></li>
<li>
<a href='ENDEREÇO DA PÁGINA ARQUIVO/'>
<i class='link2'/>
<span class='title'>Arquivo</span>
<span class='description'>
Publicações antigas
</span>
</a></li>
<li>
<a href='ENDEREÇO DA PÁGINA COM REGRAS DE USO DO SEU BLOG/'>
<i class='link3'/>
<span class='title'>Política</span>
<span class='description'>
Regras de uso
</span>
</a>
</li>
<li>
<a href='ENDEREÇO DO FEED/'>
<i class='link4'/>
<span class='title'>Feed</span>
<span class='description'>
Assine
</span>
</a>
</li>
<li>
<a href='ENDEREÇO DA PÁGINA MARCADORES/'>
<i class='link5'/>
<span class='title'>Marcadores</span>
<span class='description'>
Índice
</span>
</a>
</li>
<li>
<a href='mailto: ENDEREÇODOSEUEMAIL/'>
<i class='link6'/>
<span class='title'>Email</span>
<span class='description'>
Contato
</span>
</a>
</li>

</ul></div>

Para ficar no footer do blog cole antes de: 

<!-- end outer-wrapper -->
</body>
</html>

• Para conseguir o endereço da página de marcadores, clique AQUI 
• Para conseguir o endereço da página de aquuivos clique AQUI

Crédito do menu: Timpanus
Crédito pelos ícones: Dry Icons