Menu ao lado do post

Oii genteeein, ao longo do tempo que eu estou com esse lay todos me perguntam como fazer esse menu que tem ali do lado esquerdo da sua tela, e hoje eu vou ensinar mais ou menos como faze-lo. Mas use a criatividade...  Nada de copiar hein.


Vá no html do seu blog 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='http://2.bp.blogspot.com/-9BnhK42dt7s/Tk_Sto_i9fI/AAAAAAAAAcA/2LRyqaZpHbQ/s1600/home.png'/></a>
<a href='LINK' title='NOME DA PÁGINA'><img src='http://2.bp.blogspot.com/-dldAfv4m0YE/Tk_SuNTcOvI/AAAAAAAAAcE/6HxQRmVoJ_I/s1600/about.png'/></a>
<a href='LINK' title='NOME DA PÁGINA'><img src='http://2.bp.blogspot.com/-5UIETcBekms/Tk_Ss00yaII/AAAAAAAAAb4/7mzxwNVPDgc/s1600/faq.png'/></a>
<a href='LINK' title='NOME DA PÁGINA'><img src='http://2.bp.blogspot.com/-4IckqUJlnsE/Tk_StUVVlrI/AAAAAAAAAb8/xCvTD47LqAM/s1600/goodies.png'/></a>
</div>

Em vermelho é o link da imagem, "link" e "nome da página" estão no código com instruções...

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

ACIMA dele cole o código a seguir:

/* ----- Menu Beside - By Trashy Girl(Juu) ----- */

#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 é só isso, bem fácil né? Se usar me convide pra ver o resultado ok? Vou amar saber que você usou... Beijos!