9 de dez de 2013

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.

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

22 comentários:

  1. Este comentário foi removido pelo autor.

    ResponderExcluir
  2. Gostei do estilo do menu...
    Da pra fazer algumas coisas legais com ele, à muitas possibilidades.
    O tuto ficou muito bem explicado vlw.
    Abraço.

    Diego|Sendo um Otaku||

    ResponderExcluir
  3. Já vi ele e acho muito cute <33
    http://miss-nothing-oficial.blogspot.com.br/

    ResponderExcluir
  4. Eu achei uma gracinha mas em vez de ficar na imagem pode ficar na lateral da sidebar ?
    candytendy.blogspot.com

    ResponderExcluir
  5. Que lindo <3 Amei ele.

    etcforme.blogspot.com

    ResponderExcluir
  6. Que menu divo, talvez eu use no meu Blog de ilustrações *--*

    Kisses!
    htmlandresources.blogspot.com.br

    ResponderExcluir
  7. Aki tambem ta um tedio ^^ ...lindo este menu bem criativo!!

    BOA TARDE ~* || louca-por-html.blogspot.com.br

    ResponderExcluir
  8. Complicado demais rsss vou deixar o meu com está.

    ResponderExcluir
  9. Achei muito legal esse menu e é bem fofo >w<
    Seguindo aqui!
    Beijos
    blog-purplestar.blogspot.com

    ResponderExcluir
  10. Adorei o tutorial, está muito bem explicado, passinho por passinho *w*
    O menu é muito fofo <3 ^^

    Catching Stars

    ResponderExcluir
  11. Super Útil o tutorial , e o Menu então ,ficou D+ <3
    Super meigo e fofo *-*

    http://s-omethingaboutme.blogspot.com.br/

    ResponderExcluir
  12. Oiie , Amei o post !

    Seu blog é lindo ! ,

    Já estou seguindo o blog , segue de volta ?

    Bjos ~ http://piipocadooce.blogspot.com.br/

    ResponderExcluir

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!