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? 

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

    ResponderExcluir
  58. @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
  59. É 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

.