Pedimos realmente desculpas, por não postar nada todo esse tempo. Estávamos muito ocupados com muitos trabalhos, tempo para estudar para as provas... Enfim, depois de muito tempo, resolvi trazer um tutorial para vocês!
Tenho certeza que muita gente vai gostar do tutorial de hoje. Vou ensinar a fazer aquele "menu" deslizante, que na verdade não é um menu, porque ele não leva a nenhum link, mas eu não achei uma palavra melhor para descrever. Veja uma demonstração do efeito na sidebar deste blog.
Vamos começar? Então, abra o HTML do seu blog, e cole o código a seguir abaixo da tag <head>
<!--- 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>
<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 as alterações. Agora clique em "Layout" no meu lateral do blogger. Adicione um gadget de HTML/Javascript no lugar onde você quiser que o "menu" apareça e cole o código abaixo, modificando os títulos e o conteúdo de cada link.
<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[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>
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>
Prontinho! Gostaram? Se sim, comentem, e não esqueça de colocar os créditos se usar, ok?
Escrito por: Luana Wanderley
Nenhum comentário:
LEIA ANTES DE COMENTAR
-Qualquer comentário considerado ofensivo/agressivo será apagado.
-Deixe sua sugestão, elogio, pedido, critica.
-Evite comentar como "Anônimo"
✓ ✖ εїз ♥ ❤ ❥ ♡ ♥ ღ ɞ ♛ ♚ ♝ ♞ ♜ ♟ ♔ ♕ ♖ ♗ ♘ ♙ ☼ ☀ ☁ ☂ ☃ ☄ ☮ ♂ ♀ ☠ ♪ ♫ ♩ ♬ ☺ ✿ ⓡ ⓒ ♨ × (o･з･o) OωO (≧∩≦)
(っ・ω・)っ (●´ω`●) (o･ε･o) (・ε・`。) (⊃ω⊂) (≧∪≦) (｡･ω･｡) (。TωT)/ (。･＿･。) ಥ_ಥ ಠ_ಠ ●ω● ●﹏● ⊙０⊙ ⊙︿⊙ ⊙ω⊙ ⊙﹏⊙ (๑•́ ₃ •̀๑) (≧▽≦)
Use e abuse!