Menu na lateral das postagens do blog (ao lado do post)

Yo queridos coelhos fofos! Vocês já depararam com algum blog, ou site com um menu na lateral (lado) das postagens? Hoje vou mostrar como fazer isso! É muito fácil e rapidinho até mesmo para quem está começando no HTML. O menu é basicamente uma imagem, então prepare um menuzinho bem fofo para usar. Vamos lá ao tutorial? Os créditos vão para o blog Curiosa.

Brevia do efeito

1. Em seu HTML procure pelo código abaixo:

<div class='column-center-outer'>

E abaixo adicione isso:

Códigos

<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'><img src='LINK DA IMAGEM'/></a>
<a href='LINK' title='NOME DA PÁGINA'><img src='LINK DA IMAGEM'/></a>
</div>

2. Agora procure pela tag: ]]></b:skin> e acima dele você adiciona esse código:

Códigos

#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}

◤Entendendo o código◥

• Em roxo: É a onde você coloca a URL da pagina que quer direcionar.

• Em vermelho: É o nome da página, ela vai aparecer quando passar o mouse sobre o menu.

• Em azul: É a onde você coloca a URL da imagem.

• Em verde: A direção do seu menu mude para  left (esquerda) ou  right (direita)

• Em Laranja: Largura do menu

• Em verde neon: Largura total da sua imagem

• Em marrom: Altura total da imagem.

Então gostaram? Espero que sim, não esqueçam de comentar e se tiverem algum pedido ou sugestão será um prazer ajudar.