Tutorial: Efeito Deslizante // Nivel: Fácil

Modinha tomando conta de minha pessoa >.>
Yoo~ gente!
Desculpem por sumir, fiquei sem entrar no PC por um tempo... não sei como consegui sobreviver, mas aqui estou eu õ/ sem assuntos como sempre õ'/
Bom, me pediram //milagre para fazer m tutorial de como fazer aquele efeito que eu fiz na elite de afiliados, o efeito do "clique aqui e veja meus parceiros". Ele foi retirado do Cherry Bomb, então créditos ao mesmo. 
Para quem não sabe, estou falando desse efeito aqui:



Bom, primeiramente, vá em "Editar HTML" no Modelo de seu Blog, e procure por <head>.
Logo depois dessa TAG, cole o seguinte código, sem fazer qualquer alteração:
<!--- 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>
Depois, pode salvar. Para usar o efeito em seu blog, coloque esse código dentro do Gadjet/Post desejado:
<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>
 Nesse código, estão disponíveis 03 abas para você, sendo que eu usei simplesmente uma. Esse é o código que eu usei:

<center><a href="#" rel="toggle[rabbit]" data-openimage="collapse.jpg" data-closedimage="expand.jpg">Nome do seu menu deslizate!</a>
<div id="rabbit" style="display:none">
Conteúdo de seu Menu Deslizante</div></center>

É só isso mesmo, qualquer dúvida, basta comentar! Vou postar mais, eu prometo. #euacho 

Nenhum comentário:

Postar um comentário

OIE GENTE ( ◉◞౪◟◉)

Vai comentar? Obrigada, eu agradeço, principalmente se for um comentário decente/legal ( இωஇ ) Mas, antes de comentar, leia as regrinhas chatas que você nem precisa seguir se não quiser.

✖ Não comente coisas como 'Seguindo, segue de volta?' ou coisas do tipo.
(P.S.: Não sei se isso é porque meu blog é tão desconhecido assim, mas nunca recebi um comentário do tipo e-e desculpem)

✖ Coloque sua URL no final do comment, porque aí eu retribuo a visita e se gostar, sigo.

✖ Evite xingar as pessoas, a não ser que seja um post sobre isso. Sinta-se a vontade para usar palavrões, até porque eu também uso e_e

Só isso pissoinhas, agradeceria se seguissem as regras (o'ϖ'o)