03/02/2012

Tutorial: Script para esconder objetos + Aviso


Mais um tutorial bem fácil aqui no blog! Eu não sei se vocês já viram que a nossa c-box ali na barra lateral fica escondida, e só quando clicamos na imagem que ela abre. Vamos aprender a fazer isso?

Passo 1
Vá em Design (ou Modelo) > Editar HTML e procure (Ctrl+F) por </head>.

Passo 2
Acima da tag cole o código abaixo:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/2wl9p6g/G70lj5t0q/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>

Passo 3
Pronto! Agora quando quiser usar basta colocar o seguinte código:

<a href="javascript:animatedcollapse.toggle('dog')"><img src="LINK DA IMAGEM QUE VAI ABRIR A C-BOX"/></a>
<div id="dog" style="display:none"> Coloque aqui o conteúdo</div>

Você não precisa usar só imagens para esconder o conteúdo! Se quiser usar um texto troque a parte em rosa pelo texto desejado.

Conseguiram?


Ah, desculpa pelos inúmeros pedidos, hehe, mas estamos ajudando uma amiga a divulgar o concurso dela! Então por favor, clique aqui e participe!

Beijos,
Camy!

12 comentários:

*Vanessa* disse...

Oi minha flor adorei seu blog estou seguindo segui de volta???

www.iluvcandybars.blogspot.com
www.cute-teenagerz.blogspot.com
www.livina-teendream.blogspot.com

no ultimo blog tem um conncurso participi!!!

adorei seu blog

Isabelle disse...

ooi! vc poderia entrar no meu blog?
beijos
seguindo..segue?
http://isa0225.blogspot.com

Curiosa disse...

Claro! Vou seguir os quatro (e participar do concurso, Vanessa)!

Beijos,
Camy!

Duda... disse...

oiii
amo de montãooooooooooo seu blog!
Ja estou te seguindo!
Da uma visitada no meu blog: cuelessgirlofficial.blogspot.com

E me segue!!1porr favor eu imploro!

Bjokaaas

Isabelle disse...

Oi! hahah' Muito Obg..tbm to seguindo..Beijão! volte sempre :D

Leh ♥ disse...

Oi fofa! Tudo bem??
Dei uma passadinha aqui,e ameeei seu blog!
Seguindo segue de volta?? :D
Ahh e aceita parceria??
Muito lindo mesmo,dá dicas ótimas
bjss
http://leka2002.blogspot.com

Daiane Araujo [Soap Bubbles] disse...

que perfeito eu tava louca atrás de um tuto assim..

beijos soap bubbles *-*

winie rodrigues disse...

Já coloquei vocês como parceria!!!

http://rosarosalina.blogspot.com

Curiosa disse...

Own, obrigada, gente! Que bom que gostaram das dicas e do blog! É muito bom saber que estão curtindo e que estamos no caminho certo!

Já estou seguindo todos os blogs de volta!
E aceito parceria, sim, Leh!

Beijos,
Curiosa!

Izahh disse...

Olá meu nome é Izabela Amorim, e provavelmente você não me conhece, eu estava visitando blogs até que vi o seu, e achei lindo por isso estou te seguindo. Por favor retribua, seguindo o meu blog : www.iza-onlygirl.blogspot.com, e deixe um recado na minha C-Box, dizendo que já me segue se puder..............

Curiosa disse...

Claro, Izabela! Vou visitar agora mesmo!

Beijos,
Camy!

Anderson Silva disse...

Bom dia,sou anderson da equipe detetive-particular.org ,quero falar que o blog ta de parabens gosto muuito dele,muito bem feito!!!...me recomendaram e estou acompanhando...recomendação hoje é tudo..to precisando saber se esse site aqui é bom por que eu to precisando de um rastreador de carro,moto entre outros alguem conhece o http://www.rastreadorgps.org/ ? se alguem souber de uma referencia me da um toque,e parabens pelo blog bom demais!!

Postar um comentário

Não se esqueça de deixar seu comentário aí embaixo!

Related Posts Plugin for WordPress, Blogger...