01/02/2013

Tutorial: Menu Pump

||

Boa tarde pessoal! Venho trazer um menu que usarei no meu próximo layout, pelo menos se eu lembrar. Mas antes de colocar o menu gostaria de falar sobre uma coisa, sobre uma pessoa anônima que está entrando aqui no meu blog e fazendo comentários maldosos. Essa tal pessoa, qual nem deixa o nome está falando que plagiei o nome do gadget "The End" do blog OS. Realmente me expirei em outro blog, qual já esta ate nos créditos, várias blogueiras usam a palavra "The End", então por favor, parem de falar que estou plagiando o OS, não é só ele que usa. Não preciso plagiar ninguém e nunca plagiei, tenho meu blog a quase 3 anos e não é agora que irei copiar blogs que esta começando, quais eu admiro muito. Não estou falando da dona do blog, pós já resolvemos o problema. Mas parece que alguém ainda que ver briguinhas, então e melhor ir  parando.

Mas agora vamos ao tutoria? Trago um menu chamado Menu Pump, caso queiram ver o exemplo cliquem aqui. Eu achei ele no HTMLuv!, então todos os créditos vão para lá e se usar não esqueça de creditar ele.

Pra adicionar o menu vá ate seu HTML  e procure por ]]></b:skin>, assim que achar sobre ele adicione esse código:

.nav a{ background:#c9e3b9; color:white; padding:4px; width:auto;height: auto; text-align:center; margin: 2px 0px 1px 2px; font-size:10px; text-transform:lowercase; box-shadow:none; -webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease; border-radius:3px; font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; box-shadow: 0px -30px 0px 1px transparent, 0px 30px 0px 1px transparent;}

.nav a:hover{text-shadow: 0px -30px 0px #fff, 0px 30px 0px #fff; background:transparent; color:transparent; box-shadow: 0px 30px 0px 1px #f4cedd, 0px -30px 0px 1px #f4cedd;}

Onde esta marcado em vermelho são as cores principais. Agora salve, e vá ate seu Layout.
Abra um gadget de java script, e dentro dele adicione isso:

<div class="nav">
<a href="LINK">Nome do Link</a>
<a onMouseover="this.style.background='#'" onMouseout="this.style.background='#'" onClick="document.getElementById('main').innerHTML=document.getElementById('CÓDIGO iframe').innerHTML"> Nome do Link</a>
</div>

Se quiser mais basta repetir, espero que tenham gostado. E mais uma vez os créditos são de HTMLuv!

7 comentários:

  1. Mundo das Ruivas1/2/13

    Nossa o menu e realmente simples mas tem um efeito bem chamativo! E tomara que essa anonima pare de pertubar

    Upi primeira a comentar?

    ResponderExcluir
  2. Legal esse menu. Gostei bastante.

    ResponderExcluir
  3. http://otomesonhadora.blogspot.com.br/2013/02/mil-desculpas-ao-blog-bunny-crazy.html

    MIL DESCULPAS, se quiser eu tiro o meu The End ok?
    Por favor leia essa postagem que eu fiz

    ResponderExcluir
    Respostas
    1. Que isso não precisa já esta tudo bem ^^

      Excluir
  4. Adorei o tuto, se eu mudar o tamanho da fonte pode deixar ele zuadinho? :8


    Almost 18~*

    ResponderExcluir
    Respostas
    1. Eu fiz o teste e fico otimo ^^

      Excluir

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram