Menu Diamond vertical com imagem Perfil

Hey! Hey! Heeey! Como vão? Bom hoje venho trazer um menuzinho, lindo, lindo! Com ele é possível fazer muitas coisas. É só deixar a criatividade te levar, encontrei esse menu  lá no blog Chá com Anjos. O menu possui uma imagem como de perfil, então vamos ao tutorial. Se desejar ver como ele é basta clicar no link mais abaixo.

Brevia do efeito

1. No HTML do seu blog, procure por ]]></b:skin>, Acima, cole:

Códigos

.navca{
text-align: center;
text-decoration: none;
font-family: Verdana, Arial;
}
.navca a{
text-transform:uppercase!important;
padding: 5px 5px 5px 5px;
display: inline-block;
background:#d976a3;
margin-top: 5px;
font-size: 8px;
color: #fff;
font-weight: bold;
display:block;
width:50px;
margin-left:-60px;
position:relative;
top:200px;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
background-color: rgba(155, 159, 202, 0.80);
}
.navca a:hover{
width:55px;
margin-left:-65px;
}
.border{
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}

2. Em um Gadget de HTML/JavaScript, cole:

Códigos

<div class="navca">
<a href="http://www.blogger.com/">LINK</a>
<a href="http://www.blogger.com/">LINK</a>
<a href="http://www.blogger.com/">LINK</a>
<a href="http://www.blogger.com/">LINK</a>
<a href="http://www.blogger.com/">LINK</a>
</div>
<img class="border" src="URL DA SUA IMAGEM" width="ALTURA DA SUA IMAGEM" />

Prontinho! Agora é só arrumar como desejar!