Tutorial: Menu ao lado do post

Não sei se vocês já viram algum blog com um menu ao lado do post, mas é um bom lugar para colocar o menu, além de ficar muito fofo.

Nós já fizemos um layout com esse menu, olha:  http://layout-teste3.blogspot.com/

Mas vamos ao tutorial!


Primeiro vá no painel do blogger e depois "Design > Editar HTML" do seu blog desejado e procure (Ctrl + F) por: <div class='column-center-outer'>

ABAIXO dele, cole o código a seguir:

<div id='pag'>
<a href='LINK' title='NOME DA PÁGINA'><img src='LINK DA IMAGEM'/></a>
<a href='LINK' title='NOME DA PÁGINA'><img src='LINK DA IMAGEM'/></a>
<a href='LINK' title='NOME DA PÁGINA'>ir<img src='LINK DA IMAGEM'/></a>
<a href='LINK' title='NOME DA PÁGINA'><img src='LINK DA IMAGEM'/></a>
</div>

Em vermelho é o link da imagem, em verde é o link da página e em azul é o nome da página. Lembre-se de editar com as informações corretas.

Você pode aumentar ou diminuir o número de imagens acrescentando ou diminuindo a linha abaixo:

<a href='LINK' title='NOME DA PÁGINA'><img src='LINK DA IMAGEM'/></a>

Agora procure (Ctrl + F) por: ]]></b:skin>

ACIMA dele cole o código a seguir:

#pag{
float: left;
margin:0 -109px;
width:120px;
}
#pag a{
padding:5px 0;
display:block;
width:114px;
height:47px;
}
#pag a:hover{
EFEITO QUE VOCÊ QUER USAR QUANDO PASSAR O MOUSE NA IMAGEM}

Vermelho: Flutuando a left (esquerda), poderá tambem mudar para right (direita)
Laranja: Largura total do menu, poderá mudar de acordo com seu gosto
Amarelo: Largura total da sua imagem
Verde: Altura total da imagem

E então, o que acharam do tutorial? Qualquer dúvida deixe um comentário!
E se tiverem alguma ideia de tutorial para eu postar aqui no blog, pode deixar um comentário e, se possível, vou atender a sugestão.

Beijos,
Camy!