Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1498507634
Vida do cache: 1498550834
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Efeitos Javascript

Efeito Revelar/Esconder Conteúdo no Post

Com o JQuery Toggle você pode dar um efeito muito legal em determinados conteúdos em sua postagem, ou até mesmo em alguns Widgets na Sidebar.
Este script é bem leve e fácil de inclui-lo no seu template.
Se você quiser entender melhor sobre o efeito de que se trata este artigo, visualize o demonstrativo clicando no botão logo abaixo para ser redirecionado ao blog de testes.
Você vai notar que no primeiro post há um conteúdo oculto e que só aparece quando clicamos no link [+/-]Mostrar/Ocultar.

É muito fácil colocar este efeito em seu post, basta instalar no seu blog um script JQuery Toggle.
Este efeito, proporciona ao autor da postagem ‘revelar/esconder’ conteúdo da página.

Demo

1º Passo – Adicionar o javascript:

Se quiser utilizar este efeito em seu blog, vá em design >> Editar HTML >> Expandir modelos de widgets, Copie o código abaixo e cole-o ACIMA da tag ]]></b:skin>


.ocultar {
cursor: pointer;
font-weight:bold;
font-size:14px; /* edite tamanho da fonte */
color:#3D81EE;  /* edite cor do link */
padding: 10px;
margin:0 auto;
}
.mostrar {
padding: 10px;
}

 

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


<!--Script revelar esconder Inicio -->
<script type='text/javascript'>
$(document).ready(function()
{
$(".mostrar").hide();
$(".ocultar").click(function()
{
$(this).next(".mostrar").slideToggle(600);
});
});
</script>
<!--Script revelar esconder Final-->


Salve!

2º passo - Adicionar a Marcação HTML

Agora copie este código abaixo e cole-o na postagem que você irá utilizar o efeito Revelar/esconder.
O código deverá ser colado dentro do post:


<div class='ocultar'>
[+/-] Mostrar/Ocultar </div>
<div class='mostrar'>
Coloque aqui o conteúdo que ficará Oculto
</div>

Salve!

Toda vez que você for utilizar este efeito é necessário que você cole o código da Marcação HTML(2º passo) dentro do post e escreva seu texto onde está escrito "Coloque aqui o conteúdo que ficará Oculto".

Este efeito também pode ser usado em algum Widget na sidebar. Se for utilizá-lo em algum Widget específico, basta colar o código do 2º passo (Marcação HTML) dentro da sidebar, clicando em "editar" e depois cole o código lá dentro.
Mas lembre-se, você só poderá utilizar este efeito nos gadget do tipo: "adicionar html/javascript".
E não se esqueça que se for aplicar este efeito somente na sidebar,caso não queira utiliza-lo em suas postagens, você deverá adicionar o arquivo javascript que está no 1º passo, ou seja, deve seguir o tutorial desde o inicio, a única diferença é que você vai colar o código da marcação Html dentro da sidebar, e não no post.

Créditos: Maujor.



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

36 Comentários

  1. Tai disse:

    Olá pessoal! Estou com um problema: quando adiciono esse código em meu blog, O slide rotativo da página inicial, que também é feito com Jquery, para de funcionar. Alguém poderia me dizer o porque desse conflito?

  2. Jéssica disse:

    Eu gostaria muito de poder usar esse efeito nos meus posts, mas quando adiciono o código e clico em visualizar o meu slide para de funcionar. :'(

  3. Marcelo disse:

    Olá Clau, tudo bem?

    Eu utilizo um recurso semelhante em meu blog, é o Spoiler. Todo o conteúdo do código vai diretamente no post, sem a necessidade de editar o template em si.
    Acredito que você já esteja ciente do mesmo, porém, fica a dica.

    Parabéns pelo excelente site e por este post.

    Ótimo final de semana.
    Grande abraço!
    Marcelo

    • Vanessa disse:

      Oi Marcelo,
      Eu já conhecia esse recurso sim, inclusive um outro que faz o mesmo efeito. São tantos tutoriais que tenho pra publicar, o tempo que anda apertado demais pra mim.rs
      Obrigada pela dica, vou providenciar 😉

  4. rock disse:

    bom eu gostaria de saber se tem como mudar o expancivel de posição ,tipo fazer ele sair de baixo

  5. Educaminha disse:

    Para mudar o "Ver conteúdo", edite essa linha:

    $('.tgl').before('span[Ver Conteúdo]/span');

    que fica acima da tag /head

    Obs.: as tags span e head estão sem os sinais de < e > para serem aceitos aqui no comentário.

    Testado.

  6. João Neto disse:

    OK, Clau, obrigado! Como sempre digo, você sempre me ajudou se não fosse você e não tinha aprendido nada sobre HTML e CSS, e acredite, quando criei o meu blog o seu foi o primeiro a ser visitado! Beijos e abrações, Clau!

  7. .:: Clau ::. disse:

    João Neto
    Vc terá que decidir qual é o mais útil pra vc e vai ter que retirar um.

  8. João Neto disse:

    Olá Clau, eu uso o efeito revelar/esconder na sidebar e quando instalei esse está atrapalhando o da sidebar, como posso resolver isso?

  9. leonardo disse:

    Para quem quiser usar o efeito mais de uma vez basta apenas substituir o .click por .live jogando o click para dentro do parênteses entre aspas simples seguido de vírgula junto com o function exemplo:

    $('span', '#box-toggle').live('click', function() {

    Espero que ajude!

  10. alligatorfunny disse:

    Eu consegui colocar no meu blog, mas não funciona direito.
    Estou usando ele na sidebar, para mostrar o codigo do banner, para parcerias. Mas ele só funciona no primeiro banner, ja coloquei o mesmo codigo para os 2 banners para ver se nao estava errado em um, e mesmo assim ele nao funciona.

  11. digratisps3 disse:

    Ótima dica mas tenho 2 problemas que nao estou conseguindo resolver:
    1º quando eu copio o passo 2 na postagem ele esconde parte do texto normalmente, mas quando tento usar esse código 2 vezes no mesmo post só o primeiro mostra e esconde, o segundo nao funciona, como faço para usar várias vezes no mesmo post ?

    2º Se tiver como usar mais de 1 vez no mesmo post, como faço para mudar o texto do botão [ver conteúdo] onde se clica para aparecer o restante da postagem e colocar 1 nome para cada botão. Ex: opção 1, opção 2 ?
    Me ajude por favor !

  12. Victor disse:

    Este codigo pode ser usado duas vezes em uma mesma pagina?

  13. 1001 Faces disse:

    Legal este efeito mas, estou tendo difículdade para colocar igual o demo com títulos no widget, help-me!

  14. Lomeutec disse:

    Excelente! Parabéns e obrigado por compartilhar o código.

  15. .:: Clau ::. disse:

    Mateus
    Ai vc já tá querendo demais né? Se tem eu não faço ideia de como é.

  16. Mateus disse:

    Não teria como assim que eu clicar no link "Revelar Conteúdo", ele sumir?

  17. .:: Clau ::. disse:

    RadcaLe_
    Este código é para ser usadao apenas para ocultar/revelar alguma parte ou trecho de texto dentro da postagem.
    Não é pra ser usado pra resumir postagens na página incial. Se vc quer resumir as postagens na página incial, recomendo que vc acesse o tutorial:
    "Hack "Leia Mais" Resumo de Postagem Automático com imagens na Página Inicial".

  18. RadcaLe_ disse:

    PF Clau eu presiso muito desse efeito, no meu site tbm so abriu 1 em cada pagina si tiver augum outro script de esconder ficaria muito grato se vc postasse
    Abraços
    Muito Bom o site ta De Parabens.

  19. RadcaLe_ disse:

    Olá Clau eu tbm estou com o mesmo problema ,
    parece ki o script so funciona no post mais novo,
    queria saber oq eu posso fazer ou vc poderia postar auguma outra maneira ou outro hack sobre esse tema.

    Vlw T+

  20. .:: Clau ::. disse:

    th3m@d0xt3r
    Rickzinhocps:

    Eu não sei o que pode ter acontecido e nem sei como ajudar vcs. Pode ser que tenha dado algum conflito nos script que vcs já tinham instalados nos templates, ou não.
    Este código foi criado pelo Majour, eu apenas publiquei aqui no blog, talvez seja melhor vcs tentarem descobrir algo diretamente no site do desenvolvedor desse script..o link dele está na postagem.

  21. Rickzinhocps disse:

    Clau eu tenho o mesmo problema do th3m@d0xt3r, o hack só funciona no post mais novo, nos anteriores não funciona, aparece o link mais quando você clica ele não executa nenhuma ação, poderia me ajudar ? Obrigado

  22. th3m@d0xt3r disse:

    Voltei aqui pra tirar outra dúvida referente a esse post seu. Então fiz o hack no meu blog e constatei que se eu utilizar o referido hack em mais de uma postagem na mesma página o anterior não funciona, ou seja, eu exibo por página 7 postagens, somente em uma postagem das sete pode ter o código se mais de uma tiver o haclk não funciona, tem alguma forma de resolver isso?

  23. th3m@d0xt3r disse:

    Pondo a imagem o código sequer funciona, mas seria muito mais legal por uma imagem no lugar do nome

  24. ::Clau:: disse:

    @MasterWind:
    Dá sim, desde que vc não esteja usando o script do hack "leia mais".

  25. MasterWind disse:

    muito bom! isto dá para trocar pelo read more?

  26. ::Clau:: disse:

    @Lu:
    Sinceramente eu nunca testei isso, mas vc pode tentar colocar <img src="URL-DA-SUA-IMAGEM" /> no lugar do texto.
    É uma questão de vc testar, eu não garanto que dê certo,mas não custa nada tentar.

  27. Lu disse:

    oie.
    Queria saber, tem como substituir o VER CONTEÚDO por uma imgagem?
    beijos

  28. .:: Clau ::. disse:

    @Jino:
    Vc está usando o código da marcação HTML dentro da postagem? Se não utilizar este código não funcionará mesmo.

  29. +¦™Jø®g€™¦+ disse:

    no meu blog ele n funcionou oque eu faço,só funcionou nos widgets maisnas post ele n espandi me fala como eu corrijo esse erro!!porfavor.

  30. .:: Clau ::. disse:

    @Dani:
    Que bom que gostou! Agora é só usar o efeito, se quiser…

    @Digão:
    Pra quem posta tutoriais e tem necessidade de publicar códigos HTML, esta é uma boa opção.
    Sobre o backlink, vê sim e me avisa depois…

    Abçs

  31. blogando20 disse:

    Olá minha querida, gostei dessa postagem sobre esconder conteúdo no blog, vai servir para implementar em minhas novas postagens posteiormente, quanto ao trackback eu vou corrigir verificar o que está acontecendo com o site responsável em verificar os backlinks pois o gadget que faz a verificação utiliza os feeds do http://www.twingly.com/
    vou verificar com amigo davis.blog.br…obrigado por me alertar, abcs do Digão…

  32. Das disse:

    Clau, mais uma ótima dica!
    Adorei!
    Valeu, amiga!
    Beijo grande!
    dani!

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.