Menu do Diamond

Indo ao assunto do post, hoje vou ensinar aquele menu que uso no Diamond, que vocês podem ver como ele é clicando no link do blog (aproveitem para olhar) ou clicando aqui e vendo o preview que algum leitor anônimo fez. Lembrando que a imagem do blog não faz parte do menu, então não roubem ela, aquela imagem foi eu quem fiz, ela não é do We♥It nem de nenhum outro lugar. De qualquer forma fiz um Live Preview para o caso de mudar o layout ou algo assim, como sempre faço. Esse menu só fica bom se for coladinho com uma imagem, e de preferência onde o fundo seja transparente. A respeito do código, se quiserem realmente editar o menu, leiam atentamente minha explicação abaixo,  porque qualquer modificação errada pode dar erro no menu ou desconfigurá-lo.

Live Preview do menu

*ele vai ficar assim muito embaixo se for em uma postagem, por isso dê preferência a sidebar.

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

.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:

<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" />

Entendendo:

Atenção para essa parte! Edite somente o que eu falar aqui!

.navca{
text-align: center;
text-decoration: none;
font-family: Verdana, Arial;

Essa parte se refere a posição do texto, decoração (sublinhado, etc.) e a fonte. Mude de acordo com seu gosto.

.navca a{
text-transform:uppercase!important;

Faz com que todas as letras fiquem maiúsculas.

background:#d976a3;

Cor de fundo do menu. Edite de acordo com seu blog.

font-size: 8px;
color: #fff;
font-weight: bold;

Tamanho da fonte, cor da fonte e tipo de fonte. No caso, a fonte está em negrito. Mude de acordo com seu gosto.

background-color: rgba(155, 159, 202, 0.80);

Cor de fundo. No caso, a cor de fundo está em rgba, para saber qual o código da sua cor em rgba, use esse site aqui, que fará a conversão para você: WebCalc. O primeiro número (155) é o vermelho (Red), o segundo é o verde (Green) e o terceiro azul (Blue), o quarto número se refere a opacidade, no caso é 0.80, mude de acordo com seu gosto. Dica: use uma cor ligeiramente mais escura ou mais clara que a cor normal do menu. 

.border{
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;

Se refere a borda da imagem que ficará ao lado do menu. Mude como quiser.

Não expliquei o que é cada código porque é melhor não mexer neles, e também o post ficaria grande demais. Se você for usar o menu, leia tudo com atenção e edite somente os códigos que você conhece, se der algum erro ou ele ficar desconfigurado, faça tudo de novo. O menu não é complicado, mas se você mexer errado vai acabar bugando ele todo. Espero que gostem do tutorial :)

Meus querides! Caso vocês gostem desse blog e queiram continuar me acompanhando, eu ainda escrevo, mas em outro blog. Não posto apenas tutoriais, mas continuo escrevendo e falando de vários assuntos, inclusive a blogosfera. Caso queira visitar (sério ótimo uma visita): clique aqui para ir ao blog Serenar