Como colocar um menu igual do Mac em seu blogger

Hoje eu vou mostrar como inserir um menu igual do sistema operacional Mac em seu bloghospedo no blogger .Com esse menu seu blog ficará muito mais interessante,primeiro veja umexemplo aqui do que eu estou falando.pronto então vamos lá.

Vá em Layot>Editar Html,eu aconselho você a baixar o template do seu blog primeiro antes de começar porque se caso der alguma coisa errada ou você não gostar,ai vai ficar bem mais facíl.

Depois que baixar o template,copie o código css abaixo e cole junto com o css do seu blog.
Antes de=]]></b:skin>

Código css:

/* dock - top */
.dock {
    position: relative;
    height: 50px;
    text-align: center;
}
.dock-container {
    position: absolute;
    height: 50px;
    background: url();
    padding-left: 20px;
}
a.dock-item {
    display: block;
    width: 40px;
    color: #000;
    position: absolute;
    top: 0px;
    text-align: center;
    text-decoration: none;
    font: bold 12px Arial, Helvetica, sans-serif;
}
.dock-item img {
    border: none;
    margin: 5px 10px 0px;
    width: 100%;
}
.dock-item span {
    display: none;
    padding-left: 20px;
}

/* dock2 - bottom */
#dock2 {
    width: 100%;
    bottom: 0px;
    position: absolute;
    left: 0px;
}
.dock-container2 {
    position: absolute;
    height: 50px;
    background: url();
    padding-left: 20px;
}
a.dock-item2 {
    display: block;
    font: bold 12px Arial, Helvetica, sans-serif;
    width: 40px;
    color: #000;
    bottom: 0px;
    position: absolute;
    text-align: center;
    text-decoration: none;
}
.dock-item2 span {
    display: none;
    padding-left: 20px;
}
.dock-item2 img {
    border: none;
    margin: 5px 10px 0px;
    width: 100%;
}

Agora coloque o código abaixo,antes da tag <head> se você nã0 tiver consigindo achar pressione Ctrl+F para localizar.

E por utimo,é o html.cópie o código e cole entre as tags <body> e </body>.

Observação:Se você colocar o código logo depois da tag <body> o menu aparecerá antes do titulo do seu blog ,se você colocar antes do código do menu do seu blog ele aparecerá logo acima do menu .

Utimo Código:

<div class='dock' id='dock'>

<div class='dock-container'>
<a class='dock-item' href='Coloque aqui o link'><img alt='home' src='http://img535.imageshack.us/img535/2659/homei.png'/><span>Home</span></a>
<a class='dock-item' href='Coloque aqui o link'><img alt='contact' src='http://img714.imageshack.us/img714/8392/emailf.png'/><span>Contact</span></a>
<a class='dock-item' href='Coloque aqui o link'><img alt='portfolio' src='http://img62.imageshack.us/img62/6531/portfoliow.png'/><span>Portfolio</span></a>
<a class='dock-item' href='Coloque aqui o link'><img alt='music' src='http://img52.imageshack.us/img52/9199/musice.png'/><span>Music</span></a>
<a class='dock-item' href='Coloque aqui o link'><img alt='video' src='http://img100.imageshack.us/img100/8296/videoo.png'/><span>Video</span></a>
<a class='dock-item' href='Coloque aqui o link'><img alt='history' src='http://img714.imageshack.us/img714/1688/historyl.png'/><span>History</span></a>
<a class='dock-item' href='Coloque aqui o link'><img alt='calendar' src='http://img714.imageshack.us/img714/3306/calendar.png'/><span>Calendar</span></a>
<a class='dock-item' href='Coloque aqui o link'><img alt='rss' src='http://img97.imageshack.us/img97/9104/rsszu.png'/><span>RSS</span></a>

</div>
</div>
<script type='text/javascript'>

$(document).ready(
function()
{
$('#dock').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 40,
proximity: 90,
halign : 'center'
}
)
}
);

</script>

Observação:Coloque o link de destino dos icones onde está pedindo no código acima(Destacado de vermelho)

Exemplo:

Pronto,depois é só salvar o modelo e ver como ficou seu blog.

Qualquer dúvida deixe um comentário que estarei respodendo imediatamente a seu comentário