Bom dia, pessoal.
Antes de começar com a postagem, queria falar sobre a minha decisão em relação ao Revenge. Como recentemente entrei em outro blog (o FYB) percebi que jamais terei tempo para um terceiro, então estou pensando em dar para alguém que queira um novo blog ou guardar para um dia usá-lo quando precisar. Ainda não me decidi, mas certamente será uma dessas opções.
Para nossa primeira postagem desse sábado, trago para vocês um tutorial de menu super fofinho. Eu peguei ele no Html Strew, mas editei bastante, pois o de lá estava muito simples. Transformei e manti somente o efeito, deixarei três modelinhos com você: Um rosinha, um amarelinho e um azul. Ele é bem pequeno, acho bem bonito se for usado abaixo de alguma imagem, para ver clique aqui.
1. Vá até editar HTML e procure por ]]></b:skin>. Acima da tag, cole o código do modelo que escolheu.
Rosa
.menugirarosa {width:auto; float:left}.menugirarosa a {width:46px; font-family:handy; font-size:8px; color:#ffffff; text-decoration:none; background-color:#fdcddc; margin-top:5px;box-shadow: inset 0 0 30px #f08cb9, 0 0 2px #dd6a9d; text-align:center; padding:5px; -webkit-transition-duration: 1s; float:left; margin-left:3px;}.menugirarosa a:hover {-webkit-transform: rotateX(-360deg);}
Azul
.menugiraazul {width:auto; float:left}.menugiraazul a {width:46px; font-family:handy; font-size:8px; color:#ffffff; text-decoration:none; background-color:#cde8fd; margin-top:5px;box-shadow: inset 0 0 30px #9ecdf1, 0 0 2px #7cb6e3; text-align:center; padding:5px; -webkit-transition-duration: 1s; float:left; margin-left:3px;}.menugiraazul a:hover {-webkit-transform: rotateX(-360deg);}
Amarelo
.menugira {width:auto; float:left}.menugira a {width:46px; font-family:handy; font-size:8px; color:#ffffff; text-decoration:none; background-color:#fff9b1;box-shadow: inset 0 0 30px #d4cd82, 0 0 2px #cbc263; text-align:center; padding:5px; -webkit-transition-duration: 1s; float:left; margin-left:3px;}.menugira a:hover {-webkit-transform: rotateX(-360deg);}
2. Agora, em um gadget de HTML/JavaScript, cole o código referente a cor que escolheu:
Rosa
<div class="menugirarosa"><a href="LINK">nome</a><a href="LINK">nome</a><a href="LINK">nome</a><a href="LINK">nome</a></div>
Azul
<div class="menugiraazul"><a href="LINK">nome</a><a href="LINK">nome</a><a href="LINK">nome</a><a href="LINK">nome</a></div>
Amarelo
<div class="menugira"><a href="LINK">nome</a><a href="LINK">nome</a><a href="LINK">nome</a><a href="LINK">nome</a></div>
Salve e o seu menu estará pronto. Espero que todos tenham entendido de acordo com minha explicação. Desculpem pelo tamanho da postagem, mas como foram três modelo o post triplicou de tamanho.
Nenhum comentário:
Postar um comentário