Menu do Diamond
Autor: Marina Menezes | Publicado: 2013-12-09T01:19:00-02:00




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, &nbsp;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 ]]&gt;&lt;/b:skin&gt;, 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:


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


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.&nbsp;



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