Esconder conteúdo com uma imagem

|
Vocês já devem ter visto aqui no CB que a c-box fica "escondida" na barra lateral e só abre quando quando você clica na imagem não é?

Muita gente pediu, e cá estou eu pra ensinar vocês como colocar esse efeito no seu blog. E o legal é que você pode usar para ocultar outras coisas, seja na sidebar ou nas postagens.

Antes do tutorial, tenho que dar os créditos ao Material Garotas(http://mgarotas.com/) pelo código!

Agora sim, vá no HTML do seu blog (Modelo > Editar HTML), aperte Ctrl+F e procure pela tag </head>

Cole logo abaixo de </head> esse código:
<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>

Salve as alterações e pronto!

Você só precisa colocar o código abaixo onde quiser esconder alguma coisa:

<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ê pode colocar uma imagem ou texto para esconder o conteúdo do gadget.

36 comentários

  1. Millena silva de oliveira29 de setembro de 2011 09:44

    no meu blog também fica escondida, esse tutorial é ótimo 
    bjs

    http://milla-notciasteen.blogspot.com/

    ResponderExcluir
  2. Adorei o tutorial, Liah! Mas ainda não usei.. hehe minha cbox fica em uma página, como vc já viu ^^

    www.menina-dedeus.blogspot.com

    ResponderExcluir
  3. barbara de jesus miranda rocha29 de setembro de 2011 17:44

    ooi liaah *--- *
    vim avisar que meu blog está de lay novo, da uma passadinha lá pra falar oq achou. (:
    Beijos;
    http://diamontlilac-news.blogspot.com/

    ResponderExcluir
  4. Tutorial ótimos, é bom que rende mais espaço no barra lateral.
    Tem post novo. Comenta?
    Girl Teen

    ResponderExcluir
  5. barbara de jesus miranda rocha30 de setembro de 2011 11:31

    Oi o/ 
    Liah, queria pedir um tutorial, de como faz essa letra aqui do "blog"
    http://i1081.photobucket.com/albums/j350/cherryliah/blogvsblog.png
    Beeijos <3
    diamontlilac-news.tk

    ResponderExcluir
  6. Oiie amr, voce ainda faz encomendas de lays? Eu to desesperada por alguem que saiba fazer lays legais e vii o que voce fez para o Potal Teen e AMEII!
    Me responde lá no blog...
    Bjos ;*fofoquinhainocente.blogspot.com

    ResponderExcluir
  7. Oi Liah,
    Vim avisar que o AP voltou *-*
    Beijão,
    http://agathasplace.blogspot.com/

    ResponderExcluir
  8. Oi! Você foi indicada ao meu Meme de aniversário do blog.
    Wheretheworldended.blogspot.com

    Bjo!

    ResponderExcluir
  9. Podes explicar como fazes essa publicidade em que diz Publicidade em cima e vai sempre mudando com vários blogs. Em cima dos post?

    ResponderExcluir
  10. ooi liah , voce aceitaria uma entrevista no Dicasluh,beijos responda comentando la
    www.dicasluh.blogspot.com

    ResponderExcluir
  11. Adorei seu blog, super fofo e com bastante conteúdo! seguindo aqui rs


    visita o meu?
    http://conversando-com-a-lua.blogspot.com/

    ResponderExcluir
  12. Adooooro aqui! Se puder,da uma passadinha no meu blog? Se gostar,adoraria ver você seguindo ele! Desde já,agradeço *-*
    http://viverserfeliz-renata.blogspot.com/

    ResponderExcluir
  13. Muito bom , mas no meu blog eu consigo escrever o texto para abrir a C-box, mas imagens não  estou conseguindo colocar, poderia me responder como fazer? Dá onde devo tirar as imagens, copiar url da imagem e tal?' 

    young-nation1.blogspot.com

    Se quiser passar por lá e da uma conferida, fico agradecido ' ;)

    ResponderExcluir
  14. Oi Liah! Sou uma leitora sua e eu usei este tutorial, mas não está indo a imagem. Eu coloco no Java HTLM e não vai. É para colocar em texto? Me avise, ok? Bjs

    ResponderExcluir
  15. Ahhh! Meu blog é o http://garotamoderna-blog.blogspot.com/

    ResponderExcluir
  16. vc tem colocar a imagem em código flor. Sabe, aquele código famoso: <*img src=linkdaimagem/*> (sem os asteriscos)

    ResponderExcluir
  17. Liah responde minha pergunta ?
    Por favor , quando eu passo o mause em cima da letra aqui do seu blog é verde como eu faço pra botar assim no meu blog (mais de outra cor) eu queria tanto botar no meu blog .
    www.dicasporcompleto.blogspot.com beijooos eu so sua seguiidooraa a mutuus meses (:

    ResponderExcluir
  18. Liah, eu fiz isso e não tá funcionando, me ajudaaaa

    ResponderExcluir
  19. Tbm nao conseguii..aafff

    ResponderExcluir
  20. flor eu nao consegui fazer, seu codigo deve ta com algum problema :/

    ResponderExcluir
  21. Não consigo fazer isso naum!!!
    O que quer dizer COLOQUE AQUI O CONTEÚDO 
    ????
    O link da imagem eu ja coloquei mais naum consigo colocar o conteúdo 

    ResponderExcluir
  22. Me ajude Liah!!Eu tô começando e preciso muuiro da sua ajuda1!Eu naum consigo fazer issso
    :(

    ResponderExcluir
  23. Consegui , obrigada Liah , você me ajudou muito

    ResponderExcluir
  24. Deu super certo! Obg Liah

    ResponderExcluir
  25. Liah tem como colocar o codigo em dois gadgets?
    beeeeiijos ♥

    ResponderExcluir
  26. Amei o tuto Liah! Já estou usando no meu próximo lay ♥

    http://sweetbomb-anaa.blogspot.com/

    ResponderExcluir
  27. Não dá certo!! Por favor explica de novo,eu coloco o código no HTML,e adiciono um gadget com o segundo código.Mas o link da imagem ela tem que ser hospedada??Pf!!

    ResponderExcluir
  28. Dá certo sim,no meu deu,só q só dava certo no primeiro gadget,se colocasse pra baixo dava erro.

    ResponderExcluir
  29. Oie Liah!! Valeu pelo tutorial!! Eu tinha visto um só que o código estava incompleto e por isso dava erro. Vc salvou minha vida rsrs..bêzos!

    ResponderExcluir
  30. 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!!

    ResponderExcluir
  31. Ótimo tuto! Créditos eternos lá no meu blog OIEPOWQIE-
    Kisses

    space-sweet-girl.blogspot.com.br

    ResponderExcluir
  32. Amei amei de mais.Tava procurando faz um tempo, mais os que eu encontrava só davam erros.Vlw ajudou mesmo, deu um up noo visu do meu blog.Bj

    layrakauana.blogspot.com

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...