Efeitos Javascript Vanessa S.
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.
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.
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?
Alguns código javascript entram em conflito mesmo.
Você conhece algum meio de resolver esse problema?
De resolver não. A única coisa que posso te dizer é que vc terá que decidir qual recurso é mais importante para o seu blog, já que ambos entram em conflito.
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. :'(
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
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 😉
bom eu gostaria de saber se tem como mudar o expancivel de posição ,tipo fazer ele sair de baixo
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.
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!
João Neto
Vc terá que decidir qual é o mais útil pra vc e vai ter que retirar um.
Olá Clau, eu uso o efeito revelar/esconder na sidebar e quando instalei esse está atrapalhando o da sidebar, como posso resolver isso?
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!
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.
Ó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 !
Este codigo pode ser usado duas vezes em uma mesma pagina?
Legal este efeito mas, estou tendo difículdade para colocar igual o demo com títulos no widget, help-me!
Excelente! Parabéns e obrigado por compartilhar o código.
Mateus
Ai vc já tá querendo demais né? Se tem eu não faço ideia de como é.
Não teria como assim que eu clicar no link "Revelar Conteúdo", ele sumir?
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".
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.
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+
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.
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
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?
Pondo a imagem o código sequer funciona, mas seria muito mais legal por uma imagem no lugar do nome
@MasterWind:
Dá sim, desde que vc não esteja usando o script do hack "leia mais".
muito bom! isto dá para trocar pelo read more?
@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.
oie.
Queria saber, tem como substituir o VER CONTEÚDO por uma imgagem?
beijos
@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.
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.
@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
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…
Clau, mais uma ótima dica!
Adorei!
Valeu, amiga!
Beijo grande!
dani!