➸♚ Fluffy White { h i a t u s }: Menu vertical com Imagem ao Lado

Oi meus cupcakes mordiveis! *w*

Eu encontrei um tutorial muito legal e fofo vejam:

Bom, eu aprendi no Bunny Crazy (não, a dona não sou eu ahaha, já me vieram perguntar também) mas vou aqui ensinar-vos e pôr umas imagens como extra ;)

Então vamos lá, recomendo a começar por criar um novo gadget na barra lateral onde vai colocar o menu, e pôr lá este código:

<img src="LINK DA IMAGEM QUE FICA DE LADO" align="right" />
<div class="menu">
<a href="URL1">Link 1</a>
<a href="URL 2">Link 2</a>
<a href="URL 3">Link 3</a>
<a href="URL 4">Link 4</a>
<a href="URL 5">Link 5</a>
<a href="URL 6">Link 6</a>
<a href="URL 7">Link 7</a>
</div>

Obvio que só vão aparecer os codigo, agora vão a editar HTML, apertem CTRL + F e pesquisem por:

]]></b:skin>

Depois de encontrarem isso, coloquem a cima este código:

.menu a {
margin-right: 144px;
background: #f0d1ff; /* Cor da caixinha */
border-left: 4px double #9c37cb; /* Borda */
font-family: Palatino linotype; /* Fonte */
font-style: italic; /* Estilo da fonte */
text-transform:lowercase; /* Estilo da fonte - uppercase: maísculas e lowercase: minúsculas */
display: block; /* Exibir em bloco */
font-size: 10pt; /* Tamanho da fonte */
color: #e359f3; /* Cor do texto */
padding: 3px; /* Margem interna */
text-align: left; /* Alinhamente do texto */
margin-bottom: 1px;
}
.menu a:hover {
border-left: 6px solid #c252cf; /* Borda em hover */

Bom, o código está com as cores que eu pus aqui no blog, então modifiquem tudo ao vosso gosto.
Deixem-me dizer-vos que tal como a dona do Bunny Crazy usei uma imagem com o tamanho 132x173.
Pré visualizem e vejam se ficou bom ^^

E pronto, se for feito com atenção e cuidado tudo fica bem, certo...?
Qualquer dúvida perguntem ;)

E agora vamos ás imagens que eu fiz e editei para vocês usarem neste menu se quiserem

Asiáticas