2 de dez. de 2012

Pedido: Menu Deslizante

Hey, angels :) What's up?

Eu estou muito feliz recebendo tantos pedidos. Saibam que eu fico extremamente feliz ajudando vocês! O leitor Geivesson (do blog Diga-se de Passagem) pediu um tutorial:


Esse menu se chama "Menu Deslizante" e é claro que eu vou ensinar a fazer =D Querem conferir o tutorial? Já sabem onde clicar!

Vocês podem ter uma preview desse menu no gadget "Extras" do meu blog: Mrs. Nightshade. Não é difícil de fazer!

Primeiramente, vá em Modelo > Editar HTML. Usando Ctrl + F, busque por <head> . Assim que encontrar, cole o código a seguir ABAIXO dessa tag:

<!--- MENU DESLIZANTE -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script src='http://static.tumblr.com/ghoye6x/xBmloszst/colpaso.js' type='text/javascript'>
</script>
<script type='text/javascript'>
animatedcollapse.addDiv('jason', 'fade=1,height=80px')
animatedcollapse.addDiv('kelly', 'fade=1,height=100px')
animatedcollapse.addDiv('michael', 'fade=1,height=120px')
animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets')
animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets,persist=1,hide=1')
animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=pets,hide=1')
animatedcollapse.addDiv('lion', 'fade=0,speed=400,group=pets,persist=1,hide=1')
animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
 //$: Access to jQuery
 //divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
 //state: "block" or "none", depending on state
}
animatedcollapse.init()
</script>
Visualize e se estiver tudo certo, salve as alterações. Agora vá em Layout e adicione um Gadget de HTML/JavaScript. Nesse novo gadget, cole o seguinte código:

<center><a href="#" rel="toggle[rabbit]" data-openimage="collapse.jpg" data-closedimage="expand.jpg">Título 1</a> |
<a href="#" rel="toggle[dog]" data-openimage="collapse.jpg" data-closedimage="expand.jpg">Título 2</a> | 
<a href="#" rel="toggle[cat]" data-openimage="collapse.jpg" data-closedimage="expand.jpg">Título 3</a></center>
<div id="rabbit" style="display:none">

Conteúdo do menu deslizante 1

</div>
<div id="dog" style="display:none">

Conteúdo do menu deslizante 2

</div>
<div id="cat" style="display:none">

Conteúdo do menu deslizante 3

</div>
Entenda o código:

- Título 1 / Título 2 / Título 3 : É o nome que irá aparecer (e onde você deve clicar). Exemplo: Link-me!, Afiliados, Perguntas?

Conteúdo do menu deslizante 1 / Conteúdo do menu deslizante 2 / Conteúdo do menu deslizante 3 : Coloque o que você quer que apareça após o clique. Pode ser o código do seu link-me, da sua elite de afiliados, da sua ask.fm, etc.

Eu aprendi no Cherry Bomb, então créditos dados ^^

Dúvidas? Comente ou mande uma pergunta aqui.

Espero que todos vocês tenham entendido.
Beijos,

Mrs. Nightshade.

10 comentários:

  1. Respostas
    1. Olá! De nada, disponha ^^ Pode pedir sempre que quiser ^^

      Beijos!

      Excluir
  2. Deu certo, mais eu coloco os afiliados e link me???

    ResponderExcluir
    Respostas
    1. Você pode colocar o que quiser, tanto em Título quanto em Conteúdo. Se estiver se referindo ao "Conteúdo" você pode colocar o CÓDIGO da elite de afiliados e do link-me.

      Beijos!

      Excluir
  3. O único q não ta dando para colocar dentro é o ask

    ResponderExcluir
    Respostas
    1. O meu deu certinho, foi só copiar o código da Ask.fm e substituir por "Conteúdo do menu deslizante 3".

      Excluir
  4. O laurinha , faz tempo que eu estava procurando esse tutorial e não achava graças a deus você mim ajudou beijos.

    ResponderExcluir
    Respostas
    1. Olá! Awwwn, é muito bom pra mim saber que eu te ajudei <3

      Beijos, anjo ♥

      Excluir