30.6.14

Tutorial menu deslizante

Oi internautas!
Como vão? Espero que bem : )
Antes de começar o tutorial, vamos a algum textinho : p
Eu acho que o blog cresceu um pouquinho! Temos 3 seguidores! Que evolução! Que bacana :)
Bluf ;p Vamos começar logo!




  • Click em Modelo >> Editar HTML
  • Dentro do quadro, no seu teclado click em F3 ou CTRL+F
  • Vai aparecer uma caixinha de pesquisa
  • Pesquise pela tag <head>
  • Quando achar cole o esse código abaixo da 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>



  • Salve, va em Layout>> Adicionar um Gadget>> Html /JavaScript
  • Cole esse código lá:

<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>

Salve...

Aonde esta Conteúdo do menu deslizante 1/2/3 vc bota o conteúdo do menu

Aonde esta Título 1/2/3 vc bota o titulo do menu

Fim!

Vc vai economizar 3 gadgets!


-P4nda


Creditos ao blog Sugary Dream :)










4 comentários:

  1. Olá!
    passando aqui para dizer que aceito a afiliação e que ja coloquei o blog na minha elite
    xo || http://unicornl4nd.blogspot.com.br/

    ResponderExcluir
  2. Ótimo tutorial amor!

    Te aceitei na elite! e já está na lista de afiliados. ~Seguindo aqui.

    Aproveite a semana de tutoriais no blog!

    Küsses

    Visite o Teens Forever :3 || Portfólio :3

    ResponderExcluir

-Proibido brigas
-Comente se gostou da postagem
-Não comente palavrões ou comentários ofensivos
-Não comente spans e divulgação de postagens ou blogs, se não seu comentário será excluido.
-Comente a URL do seu blog para visitarmos!
-Comente no que devemos melhorar!
- Use sinais legais : ☁☀☃☂♣♥♪♫
Obrigada por comentar ;)