segunda-feira, 28 de janeiro de 2013

Tutorial - Menu Uops

 

Bom dia, povo.
Recebi uma ask que realmente me animou. Eu estava procurando um tutorial para postar e resolvi acessar o ask do nosso blog, e me deparo com uma mensagem fofa dessas (clique aqui para ver). E claro que minha vontade de postar aumentou mais ainda. (Viu como uma simples mensagem pode mudar seu dia?)
Mudando de assunto, percebi que o post anterior não teve uma quantidade boa de comentários, não sei se ficaram irritados com o que eu escrevi, se ficaram com preguiça de ler ou outra coisa. Mas enfim, os poucos comentários que recebi foram muito gratificantes, pois percebi que essas pessoas realmente leram e entenderam. 
Mas enfim, chega de blá blá blá e vamos ao tutorial (creditado ao Things to help you, que eu achei no Kawaii World). Clique em retirar do forno para ver a PREVIEW e aprender a fazer.




Antes de tudo, veja a PREVIEW do menu.

Agora, se gostou, aprenda a fazê-lo neste tutorial:


Cole o seguinte código acima de ]]></b:skin>:

.simplemenu {cursor: pointer; font-family: Georgia; position: absolute; width: 700px; margin-top: 28px; height: 62px; font-size: 16px; letter-spacing: 1px; overflow: hidden; font-style: italic; margin-left: 90px;}
 .simplemenu a {color: #ffcbcb; padding-left: 29px; padding-right: 11px;text-shadow: 0px -100px 1px #94d0cf; padding-top: 58px; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease;-o-transition: all 0.8s ease;}
.simplemenu a:hover {color: transparent; padding-left: 29px; padding-right: 11px; text-shadow: 0px 0px 0px #94d0cf; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease;} 


Visualize e se não ocorreu nenhum erro, salve.

Para utilizar o menu, adicione um gadget de HTML/JavaScript e cole esse código: 

 <div class="simplemenu">
<a href="Seu link">Home</a>
<a href="Seu Link">Ask</a>
<a href="Seu link">Tutoriais</a>
<a href="Seu link">Materiais</a>
<a href="Seu link">Faq</a>
<a href="Seu link">Themes</a>
<a onMouseover="this.style.background='#'" onMouseout="this.style.background='#'" onClick="document.getElementById('main').innerHTML=document.getElementById('leia').innerHTML" title=":)">IFRAME</a>
</div>


Modifique a parte laranja pelo nome do seu link, e a parte azul pelo seu link. Depois salve.

Qualquer dúvida, grite na ask c:
Faz tempo que eu não postava um tutorial, por isso resolvi postá-lo, pois achei o menu muito lindinho u3u
É ideal usá-lo no gadget abaixo do seu cabeçalho c:
Espero que gostem e usem.

OBS: Estou fazendo o próximo layout, mas não garanto que eu mude tão rápido assim.

Beijones :*


11 comentários:

  1. Awn eu vi a preview dele é muito fofa mesmo! bjo
    pimentacupcake

    ResponderExcluir
  2. Oi estou seguindo. Segue de volta? Vou usar esse menu, estava precisando :) e colocarei créditos é claro :D mas não entendi: quando você falou para substituir a parte azul pelo link, mas que link você está falando? O do meu blog?
    Beijos, espero que me responda logo!
    julia-presente-de-deus.blogspot.com

    ResponderExcluir
  3. Segui de volta seu blog c:
    Mudei o símbolo "#" pelas palavras "seu link", assim fica mais fácil de entender.
    Em azul, é o link para onde vai redirecionar assim que clicar na palavra (que você pode mudar também, de laranja).
    Por exemplo, a palavra é "Home", então quando a pessoa clicar em "Home", vai para o link da home que você substituir pelas palavras "Seu link" em azul.

    Entendeu? Se não tiver entendido, avisa que eu explico de novo sem problemas c:

    OBS: É ideal usar esse menu no gadget ABAIXO do seu cabeçalho.

    ResponderExcluir
    Respostas
    1. Entendi sim, obrigado. Seguirei amanhã porque estou na casa da minha avó e ela não tem pc (estou no celular) ok?
      Beijos :*
      julia-presente-de-deus.blogspot.com

      Excluir
  4. Esse é um bom tuto, quem sabe eu use no próximo lay ^^
    Beijos
    http://srtaveneno(.blogspot.com)

    ResponderExcluir
  5. Adorei,lindo parece fácil de fazer
    minha mae me ensinou

    ResponderExcluir
  6. Oi linda tudo bem? Eu vi que vc acompanhava uma revista virtual e ficou triste com o fim dela, entao eu vim te indicar outra,
    na verdade ela é uma revista nova, primeira edição mas que foi feita com muito amor, e na verdade ela é minha, entao vim te indicar ela e adoraria que vc disesse se gostou, seria uma honra vc gostar dela, um beijo ta.

    http://cupcakeofchocolate.blogspot.com.br/2013/02/primeira-edicao-da-revista-virtual.html

    revistacupcakeofchocolate.blogspot.com.br

    ResponderExcluir
  7. Tento fazer esse menu a tanto tempo, mas não sei porque motivo ele não funciona no meu blog, só no blog de testes, mas vou continuar tentando, quem sabe eu não consigo.
    tem teste com premiação lá no BP, você pode ganhar divulgação, afiliação, entrevista, postagem sobre o blog, entre outras coisas, passa lá e dá uma conferida ;)

    naty-todasaspequenascoisas.blogspot.com

    ResponderExcluir
  8. Saudades carol, saudades

    ResponderExcluir
  9. vim avisar do game que eu vou fazer no blog >> http://levovidadeotome.blogspot.com.br/2013/02/abrindo-vaga-para-nova-postadora.html

    kissus~

    ResponderExcluir
  10. Esse menu é lindo, vou salvar nos favoritos pra usar no meu proximo lay!

    Estou seguindo, poderia retribuir?

    rascunhosdecaneta.blogspot.com

    ResponderExcluir

♥ Não xingue ou desrespeite;
♥ Aceito críticas construtivas;
♥ Antes de pedir afiliação, acompanhe o blog por algum tempo, e no mínimo siga. Não acho legal mal conhecer o blog e já ir pedindo afiliação.
♥ No momento, eu estou convidando os afiliados.

Obrigada ^3^