Tutorial- Menu Plim

Boa noite peoples!

E aí, como estão? Estou superbem, e muito mais muito entusiasmada com essa onda de protestos pelo país! Depois de tanto tempo, finalmente esse país está acordando! 

Daí lembro do Renato Russo, do Cazuza e do Chorão "Eu sei como é difícil acreditar. Mas essa porr* um dia vai mudar♫". E cara eles estariam super orgulhosos em ver tudo isso oque ta acontecendo, estariam lutando junto com a agente, por um Brasil melhor, pelo nosso Brasil!

E cara, olhem isso >www< eu me emocionei demais! Queria muito participar, porém tenho 12 anos, nunca na vida que minha mãe deixaria.

Bom, no post de hoje trago um Menu super lindo, que gostei demais! Aprendi no tumblr Revolution HTML e passei para usarem no blogger õ/ Vejam a prévia do menu aqui >www< gostaram? Então vamos aprender!

Abra o HTML do seu blog e pressione CTRL+F e procure por ]]></b:skin> . E acima dele cole:

@-webkit-keyframes spaceboots {
    0% { margin-left:10px;}
    50% { opacity:0.0;}
    100% {margin-right:10px;}
}
.plim:hover,
.plim:focus {
    -webkit-animation-name: spaceboots;
    -webkit-animation-duration: 0.5s;
    -webkit-transform-origin:50% 50%;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}
.plim{padding: -3px -15px -15px -3px;display: inline-block;}
.pos{margin-top:250px;}

Agora vá no Layout do blog, abra um gadget HTML e cole:

<div class="pos">
<a href="http://suaurl"><img width="auto" height="auto" class="plim" src="http://static.tumblr.com/fj9qhes/hPkmiyci1/home.png"></a>
<a href="http://suaurl"><img width="auto" height="auto" class="plim" src="http://static.tumblr.com/fj9qhes/t66miyck4/about.png"></a>
<a href="http://suaurl"><img width="auto" height="auto" class="plim" src="http://static.tumblr.com/fj9qhes/zhsmiyckr/ask.png"></a>
<a href="http://suaurl"><img width="auto" height="auto" class="plim" src="http://static.tumblr.com/fj9qhes/0aqmiycld/faq.png"></a>

<a onMouseover="this.style.background='#'" onMouseout="this.style.background='#'" onClick="document.getElementById('main').innerHTML=document.getElementById('tutos').innerHTML" class="plim" title="I-FRAME"><img src="http://static.tumblr.com/fj9qhes/Bxdmiydnu/extras.png"></a>

Agora vamos entender!
No código acima, você irá alterar as partes que estão em negrito, por sua url, e pela url da imagem. Aqui está a PSD usada no exemplo do Menu, modifique de acordo com suas páginas.
No primeiro código você irá alterar o posicionamento do seu menu no cabeçalho do blog em  margin-top:250px ,então é só alterar o número e deixar na altura que preferir. Mas para posicionar melhor -para esquerda/direita- aconselho seguir esse tutorial, é super útil.

Gostaram? Espero que sim! Prometo que vou postar com mais frequência ok? Ah, estou louca para avaliar blogs! Peçam lá na página de avaliação! *-*

Beijos,
Lê.