domingo, 22 de janeiro de 2012

Efeito Revelar/Esconder Conteúdo no Post

Tumblr_liptn19lod1qc6czfo1_500_large
Hi Gurias  hoje eu não ia postar (domingo tédio aqui) mais achei um tutorial super legal no Mundo blogger (merecidos créditos) e vou passar a vocês (:
É super fácil e eu achei o resultado incrível vocês podem visualizar no meu blog de testes: 


Quem desenrola  mais no HTML também pode usar este efeito na barra lateral em algum Gadget, por exemplo tem blogs que usam este efeito na CBOX e fica bem  legal também.  
 
 Vá no seu HTML e marque a opção expandir modelos de widgets dê um ctrl + f e pesquise por: ]]></b:skin>   e cole o código abaixo ACIMA dessa tag:


#box-toggle {
margin:0 auto;
}
#box-toggle .tgl {
margin-bottom:20px;
}
#box-toggle span {
display:block;
cursor:pointer;
font-weight:bold;
font-size:14px; /* edite fonte */
color:#3D81EE; /* edite cor do link */
margin-top:15px;
}


 Agora Procure pela tag </head> e cole o seguinte código ACIMA dela:


<!--ScriptjQuery Toggle revelar esconder Inicio -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery.fn.toggleText = function(a,b) {
return this.html(this.html().replace(new RegExp("("+a+"|"+b+")"),function(x){return(x==a)?b:a;}));
}
$(document).ready(function(){
$('.tgl').before('<span>[Ver Conteúdo]</span>');
$('.tgl').css('display', 'none')
$('span', '#box-toggle').click(function() {
$(this).next().slideToggle('slow')
.siblings('.tgl:visible').slideToggle('fast');
$(this).toggleText('Revelar','Esconder')
.siblings('span').next('.tgl:visible').prev()
.toggleText('Revelar','Esconder')
});
})
</script>
<!--ScriptjQuery Toggle revelar esconder Final-->


Mini Gifs Agora salve!!
Atenção Toda vez que você for utilizar este efeito é necessário colar o código abaixo na aba HTML do post. Agora volte para a aba escrever e continue o post na parte que ficará oculta!


<div id="box-toggle">
<div class="tgl">
Coloque aqui o conteúdo que ficará Oculto
</div>
</div>



 É só isso fácil né gurias? 

66 comentários :

  1. gente adorei este efeito muito legal
    e pelo visto o Tutu tmb é fácil .. ;D
    ei jackie você ~e sempre facilitando a vida das blogueiras
    Beijinhoooos

    ResponderExcluir
  2. ooi jackie muito facil , haha' *-*
    comenta no meu blog?
    #Bezos Rawr -----> Bikoti.blogspot.com

    ResponderExcluir
  3. Que legal esse efeito, amei *-*
    Beijo ;*
    deluxegirlsblog.blogspot.com

    ResponderExcluir
  4. Uaaau o Jackie Dream é muuuito fofo *-* e tá bombando! Já estou seguindo, segue de volta se gostaar?? http://camilaejustin.blogspot.com/
    Beijinhoss de batom rosa chiclete

    ResponderExcluir
  5. Se não for incômodo, você poderia me passar a URL da setinha da menininha de roupa azul daqui > http://isjackiezzdream.blogspot.com/2011/09/setas-para-o-topo-da-pagina.html
    Agradeço desde já. http://camilaejustin.blogspot.com/
    Bjs Mila

    ResponderExcluir
  6. Adorei, vou usar XD. Só que antes tenho uma duvidazinha: Dá pra colocar outra coisa no lugar do texto [Ver conteúdo] ? Espero resposta

    Um beijo e um abraço, Becky

    ~http://queloucura-blog.blogspot.com~

    ResponderExcluir
  7. Leegal este tutu e bem fácil...

    Beijo Grande Gurriia Preferida...

    ResponderExcluir
  8. Muito fácil e bem legal!
    Http://isa-pequena.blogspot.com

    ResponderExcluir
  9. É bem legal esse tuto, e nem é muito difícil né?!

    Ah flor, tá rolando um concurso lá no MN & 15, se puder votar em mim http://meianoiteequinze.blogspot.com/
    Obrigada :)

    Beijos,
    http://menina-delicada.blogspot.com/

    ResponderExcluir
  10. Nossa Jackie eu estava muito procurando esse tutorial :h: ...Obrigada mesmo me ajudou muito... :l:

    ResponderExcluir
  11. Ameei,ameei,ameei
    bjookas
    http://sooulteen.blogspot.com/

    ResponderExcluir
  12. Ah, agora sim, hehe. Obrigada por tudo Jackie, tuto super aprovado! Vou usar no lugar do Leia Mas, hihi!

    ResponderExcluir
  13. Nossa amr , to morrendo de raiva aqui não to conseguindo colocar no meu blog a atualisaçaõ dos comentarios :i: #amoesseblog aushusah Linda bjinhos , quero um uma postagem com alguns sites que tem bases para lyout eemm / <3 bye

    ResponderExcluir
  14. @Bella s2 Que pena que não conseguiu guria! aqui um post linda>http://isjackiezzdream.blogspot.com/2011/12/seu-design-mais-profissional-10.html

    :d:

    ResponderExcluir
  15. Uii ficou demais esse tutorial!
    Nas proximas edições vou aplicar ao meu por que gostei muito!

    http://novidadesdatekinha.blogspot.com

    ResponderExcluir
  16. Ahhh até funcionou mas não fica direito :/
    é pqe eu tenho um coisa de mais informações e não consigo tirar ....
    Se souber pode me ajudar? :S
    http://blogdadudafonseca.blogspot.com/ BJ BJ

    ResponderExcluir
  17. que legal! Gostei bastante <3
    Bjs
    TDiaryofteens.blogspot.com

    ResponderExcluir
  18. Desculpa te incomodar de novo rsrs', eu até consegui colocar a setinha, mas quando eu clico não vai para o topo da pág... me ajuda!
    http://camilaejustin.blogspot.com/
    Beijinhoss

    ResponderExcluir
  19. Nossa, fica muito lindo o efeito, adorei este tutorial.

    Beijos,
    http://blogtruegirl.blogspot.com/
    Antigo Garotas Conectadas.

    ResponderExcluir
  20. Tava atrás desse tuto ha um tempão! Obrigada Jackie! Beijos

    www.meninaimperfeita.tk

    ResponderExcluir
  21. Oi minha linda ! Quanto tempo que eu não venho aqui ! E também faz tempo que vc não faz uma visitinha lá no blog ! Tem novo post , novo layout! Comenta o post ? Amei esse tutorial !!!
    Beijos .

    www.cachinhosdamel.blogspot.com

    ResponderExcluir
  22. Pelo tutorial é fácil mesmo :c:
    Mas, estou procurando umas coisas diferentes pro meu blog, essa função não me interessa muito! Mas, deve ficar show^^

    Estou seguindo!
    http://leitoracompulsiva1.blogspot.com/

    :l:

    ResponderExcluir
  23. Amei o tutorial não conhecia ficou um arraso o efeito que você fez no seu blog de teste, achei fofinho quando cliquei e as imagens apareceram!
    http://wwwgertiegirlcom.blogspot.com

    ResponderExcluir
  24. Oi, tudo bom? Não sei se ainda lembra de mim, mas quero dizer que nosso blog e eu estamos sentindo sua falta! Por favor, visite-nos, um beijo grande ;* Deyse |Garotas Sonhadoras > www.mundogarotassonhadoras.blogspot.com

    ResponderExcluir
  25. Legal esse efeito!!!:k:

    Ta tendo concurso lá participa?

    Beijinhos da Luísa!!!:l:

    ResponderExcluir
  26. Fiz um teste no meu blog de testes e deu super serto, muito bom o tutorial, logo vou começar a utilizar la no blog!
    Bjos!

    ResponderExcluir
  27. Ameeei *-* Muuito legal!
    1º Concurso no Blog, olha lá!
    Beijos ;*
    just-a-girl21.blogspot.com

    ResponderExcluir
  28. Adorei o tutorial Jackie, o resultado final fica demais, amei <3

    Blog Mundo da Moda / @_MundodaModa

    kisses♥

    ResponderExcluir
  29. Selinho pra vc
    http://spice--girls.blogspot.com/2012/01/primeiro-selinho-do-spice-girls.html

    ResponderExcluir
  30. aceita afiliação?

    http://spice--girls.blogspot.com

    ResponderExcluir
  31. Oi Jackie , adorei esse tutorial , muito útil !
    Jackie sou fã do seu trabalho , todo dia estou aqui para ver mais tutus , parabéns !
    Faz uma visitinha no blog =)
    Irei ficar muito feliz :D
    Acesse >> http://meigaedelicada.blogspot.com
    :h:

    ResponderExcluir
  32. Yooo, muito bo o tuto :h:, amei! :l:.

    vnmpoficial.blogspot.com

    ResponderExcluir
  33. adoro seus tutos :3
    vou usar algum dia ><
    http://blogueiragabi.blogspot.com

    ResponderExcluir
  34. Que bacana Jackie, ontem eu fiquei a tarde inteira no mundo blogger caçando esse tutorial (pra menu), só que não achei *-* ahsuahs e você vem e me salva.

    ResponderExcluir
  35. @Mel Cardoso Eu tbm estava doida :k: atrás desse tutu guria (:
    Assim que eu descongestionar meu template de scripts inúteis instalo ele :h:

    beiju Mel

    ResponderExcluir
  36. Adorei este efeito Jackie
    Passa lá no meu Blog :
    http://wekawaii.blogspot.com/

    Beijos
    e vc me ajudou muito , muito mesmo com este Post.

    ResponderExcluir
  37. Ok, então.... achei o Tutu no seu blog sobre barra de rolagem colorida e usei tbm uma barrinha divisória... preciso creditar, neh?
    http://camilaejustin.blogspot.com/

    ResponderExcluir
  38. Que legal o tutorial , eu adorei esses emoticons também! ahahahha :k:
    O blog é tãão lindo , to seguindo aqui e vou visitar sempre, me avisa quando tiver novo post por favor :D
    Beeijo

    www.blogbombaastic.blogspot.com

    ResponderExcluir
  39. Oi guria , então vim aqui como anonimo para nao me prejudicar mais te copiaram e nao deram os creditos: http://lufashionteen.blogspot.com/2012/01/download-da-barra-de-plugins-no-pfs.html

    ResponderExcluir
  40. liiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiindo :d: concerteza vou usar no meu proximo lay :c:


    :l:

    vih-rockgirls.blogspot.com

    ResponderExcluir
  41. Gente, eu estava olhando seus posts passados, e sério, gostei de todos, você tem muito criatividade e investe muito neles, parabéns!
    http://cantinhodalivia.tk/

    ResponderExcluir
  42. aah que legal, super útil *-*
    girl,eu passei para a segunda fase do concurso Tudo4Girls, se você puder votar no Realidade Imperfeita na barra lateral -http://tudo4girls.blogspot.com/- vai me ajudar muito, obrigado desde já rs ;]

    http://realidade-imperfeita.blogspot.com ;*

    ResponderExcluir
  43. Muito legal. Vc explica bem demais. Adoro seus tutoriais. Foi coisa de Deus achar seu blog. Aqqui é muito perfeito.
    Um beijo, e ah.. as inscrições para o meu concurso já estão abertas, se quiser participar, fique vontade.
    http://diario-piink.blogspot.com/

    ResponderExcluir
  44. @Anônimo Hooy brigada por avisar de verdade (:
    Fiquei com tanta raiva dessa garota que me copiou que seu deixar um comentário pra ela que eu vou acabar arranjando briga :e: que um dia ela tome consciência e saiba que é errado =/

    Mais brigada (:

    ResponderExcluir
  45. Aaaaaa ' amei, agora posso dispensar o 'leia mais' por esse script. Vou passar o tuto ao meu blog tá bom? Beijos e Beijos:

    http://teenagesky.blogspot.com {eu estou no blogger da minha mãe rs}

    ResponderExcluir
  46. @Karla Coutinho Tudo bem guria (:
    aaah sua mãe tbm é blogueira que legal hahahaha

    beijus!

    :h:

    ResponderExcluir
  47. Ameii :k: Como vc faz esse seu menu personalizado com imagens??

    ResponderExcluir
  48. @jackie Zanini

    Jackie, ela encheeeeeeeee muito o meu saco para eu fazer o layout dela a cada três dias (para mudar) e eu não tenho tanta paciência assim ! Não é muito legal isso ... rs

    Beijos e Beijos, obrigada *u*

    http://teenagesky.blogspot.com

    ResponderExcluir
  49. Recadinho para Jackie: Tem um post lá no meu blog super sua cara! Como você ama kawaii >.<
    Cute Bii
    Beijos Açucarados ~õ~

    ResponderExcluir
  50. @Clay *o* Eitaaa Guria eu não sabia do outro lado kkkkkkkkkkkk

    beijuuuuus *----------*

    ResponderExcluir
  51. Jackie,você sabe como substitui o link por uma imagem? se você souber me ajuda por favor? beijos

    Charme Cherry (c)

    ResponderExcluir
  52. Eu n consegui :a: Só funciona se não tiver outro codigo de leia mais née? O.o

    ResponderExcluir
  53. Oi flor, eu achei o tutorial muito útil, tanto é que estou usando, mas achei que o seu ficou muito mais legal porque a fonte está personalizada, no meu eu não consegui fazer o mesmo, tem jeito?
    Beijocas, Jeh Galvão
    http://horadamake.blogspot.com

    ResponderExcluir
  54. E como esconder na sidebar Jackie, pode postar o tutorial? Ou você não sabe?

    ResponderExcluir
  55. @AnônimoAo invés de colocar no post vc adiciona na sidebar como HTML Java script (:

    ResponderExcluir
  56. Mas tem como editar o "[Revelar conteúdo]"?? =/

    ResponderExcluir
  57. 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
  58. Jackie, me responde, tem como colocar DUAS coisas com esse efeito na mesma postagem?
    Acho que estou fazendo alguma coisa errada !

    ResponderExcluir
  59. @Dudinha B.Cara acho que nem tem como... Tente usar este aqui>>http://blogger-passo-a-passo.blogspot.com.br/2010/01/como-ocultar-e-mostrar-o-conteudo-de.html

    ResponderExcluir
  60. É possível mudar o texto onde se clica para aparecer o conteúdo oculto?
    Em vez de " [Ver Conteúdo] " colocar outro tipo de coisa...
    É possível? Se sim... como?


    --> www.downf.blogspot.pt <--

    ResponderExcluir
    Respostas
    1. Modifique o texto: [Ver Conteúdo] do segundo código (:

      Excluir

.