Menu Juliet

Post rápido. Tenho que ir ao médico agorinha e não posso demorar.
Até mais tarde, estúpidos!

Oi, amores ~

Terminei nosso novo layout! E então, o que acharam? Comentem!

Hoje eu trouxe um menu lindinho para vocês; e além de menu, você terá espaço para imagem. Confira a live preview clicando aqui :3

1. No Blogger, vá em Modelo> Editar HTML.
2. Clique em 'Prosseguir'. Tecle Ctrl F e procure por:

]]></b:skin>

3. Logo acima dessa tag, cole:

.circle {
background: rgba(255,255,255,0.75);
padding: 5px;
margin-left: 650px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
width: 100px;
display: block;
}
.circle img {
display: inline-block;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
width: 100px;
z-index: 9999;
}
.juliet {
position: absolute;
padding: 5px 5px 5px 30px;
margin-top: -65px;
margin-left: -72px;
background: rgba(255, 255, 255, 0.75);
text-transform: uppercase;
font-size: 16px;
font-family: 'Yanone Kaffeesatz', sans-serif;
letter-spacing: 2px;
margin-right: 10px;
display: inline-block;
}
.juliet a {
color: #FF6EB4;
padding: 5px;
-webkit-transition: .3s;
-o-transition: .3s; -moz-transition: .3s; transition: .3s;
}
.juliet a:hover {
background: #FFE4E1;
color: #FFF;
cursor: hand;
}

4. Salve.
5. Vá para Layout. Adicione um novo gadget de HTML/Javascript e cole:

<a href="Link da imagem"><div class="circle"><img src="URL da imagem"></div></a>
<span class="juliet"><a href="URL 01">Link 01</a><a href="URL 02">Link 02</a><a href="URL 03">Link 03</a><a href="URL 04">Link 04</a><a href="URL 05">Link 05</a></span>

6. Edite as partes em negrito e salve.

Créditos ao super blog Sweet Poison.

Beijinhos caramelados!