.png "descubra sua personalidade na escola")
Olá pessoal, tudo bem? bom hoje o tutorial e um menu com abas
super fácil mas requer atenção quer aprender?
então vamos lá?
então vamos ao tutorial peguei ele no Things to you
1 - Abra seu blog > Vá em design > Editar html e procure por <head>
2 - Depois dessa tag cole o seguinte código.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>3 - Colou ? pronto pode salva o seu html.
<script type="text/javascript" src="http://static.tumblr.com/enpbtf0/a8olor0ey/animatedcollapse.js"></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.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>
4 - Agora vá aonde quer que seu menu apareça e ponha o seguinte código.
<a href="javascript:animatedcollapse.toggle('cat')">
<b>Aba 1</b>
</a>
<a href="javascript:animatedcollapse.toggle('dog')">
<b> | Aba 2</b>
</a>
<div id="cat" style="display: none; " groupname="pets" speed="400">
CONTEUDO ABA1
</div>
<div id="dog" style="display: none; " groupname="pets" speed="400">
CONTEUDO ABA2
</div>
5 - Pronto, e só salva.
créditos á: Things to you
Nenhum comentário:
Postar um comentário
Regrinhas!
1- aceito seguindo segue de volta
2- sem xingamentos! se expresse de uma maneira mais civilizada.
3- aceito criticas e Elogios