Menu Barrinhas Vertical Com Imagem [005]

Yo meus amados visitantes! Trago mais um menuzinho kawai para vocês!!! Menu de barrinhas aquele de ladinho que eu acho muito simpley mas e muito fofo. Eu nunca o usei mas pretendo usar no meu próximo layout, então vamos lá. Quer dar ima olhadinha antes? Basta clicar no botão mais abaixo e ver o resultado. 

Brevia do efeito

1. Bem você já sabe né? Vamos até tema, e depois vá ate o HTML e procure por:

]]></b:skin>

2. Achou? Agora em cima dessa tag cole o próximo código:

Códigos

.menu a {
margin-right: 144px;
background: #FDE0E0; /* Cor da caixinha */
border-left: 6px double #E50000; /* 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: #FF0000; /* Cor do texto */
padding: 3px; /* Margem interna */
text-align: left; /* Alinhamente do texto */
margin-bottom: 1px;
}
.menu a:hover {
border-left: 6px solid #E50000; /* Borda em hover */
}

3. Agora vai lá em seu layout o corpo do seu blog e adicione um gadget de HTML/Javascript, dentro dele coloque esse código. 

Códigos

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPcErlP18CaQxqvW0tBJAmLF8vaJVonGE0uwl6ZCpo5pqXNM5rzze1ZYO-nPXV-OY855vgm1G5LaDyM0dtjgXbljOLmfQGXhu81AvtKst1IEePj3eh5s-Ec_54DASoegncO0YAI2D-mwL2/s1600/222.png" 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>

Eu usei uma imagem no tamanho de 132x173 pxls