Efeito mostrar e ocultar os comentários do blog com botão

Por:

| 26 de set de 2011

Depois de ficar um tempo sem postar, hoje trago uma dica que encontrei no blog do Maujor, onde ele usa um efeito chamado 'Box Toggle' para esconder e mostrar objetos.
Adaptei o código que ele postou em seu tutorial para ser usado para exibir e esconder os comentários dos posts do Blogger apenas clicando em um botão (link). Ver exemplo
Confira o tutorial.

Obs: Para este tutorial usaremos o plugin da Bliblioteca JQuery 1.3.1, portanto caso tenha ela ou uma versão posterior da mesma já adicionada em seu blog não será necessário adicioná-la novamente.

Antes de fazer qualquer alteração, faça um Backup do seu template.  

Na Nova Interface do Blogger, vá na opção Modelo / Editar HTML.
Irá aparecer uma caixa com uma mensagem, clique em 'Prosseguir'.

Caso ainda esteja usando a interface antiga, vá em Design / Editar HTML.

Utilizando as teclas Ctrl+F do seu teclado, procure pelo seguinte trecho:

</head>

Cole logo acima o seguinte código:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>
<style>
#box-toggle span{font:bold 15px Arial;color:#282828; display:block; cursor:pointer;}
</style>
<script type='text/javascript'>

/*
 * Tutorial original:
 * http://www.maujor.com/blog/2009/06/22/efeito-jquery-toggle-para-revelar-e-esconder
 *
 * Créditos do plugin:
 * http://mattkruse.com
 *
 * Adaptado para Blogger por:
 * http://www.blogandofacil.com.br
 *
 * Mantenha os Créditos
 */

jQuery.fn.toggleText = function(a,b) {
return   this.html(this.html().replace(new RegExp(&quot;(&quot;+a+&quot;|&quot;+b+&quot;)&quot;),function(x){return(x==a)?b:a;}));
}

$(document).ready(function(){
    $(&#39;.tgl&#39;).before(&#39;<span>Mostrar depoimentos</span>&#39;);
    $(&#39;.tgl&#39;).css(&#39;display&#39;, &#39;none&#39;)
    $(&#39;span&#39;, &#39;#box-toggle&#39;).click(function() {
        $(this).next().slideToggle(&#39;slow&#39;)
        .siblings(&#39;.tgl:visible&#39;).slideToggle(&#39;fast&#39;);
  
        $(this).toggleText(&#39;Mostrar&#39;,&#39;Ocultar&#39;)
        .siblings(&#39;span&#39;).next(&#39;.tgl:visible&#39;).prev()
        .toggleText(&#39;Mostrar&#39;,&#39;Ocultar&#39;)
    });
})
</script>

Salve o Modelo!

Agora marque a opção 'Expandir Modelos de Widgets' e procure por este trecho:

<div class='comments' id='comments'>

Logo acima do trecho cole estas duas linhas:

<div id='box-toggle'>
<div class='tgl'>

Não tente salvar ainda ou dará erro!
Procure também pelo trecho:

<div id='backlinks-container'>

Logo acima cole estas outras duas linhas:

</div>
</div>

Agora sim... Salve o Modelo!

Se você fez tudo certinho como descrito no tutorial, ao entrar em uma postagem, não aparecerá o corpo dos comentários, mas sim um link escrito 'Mostrar Depoimentos'.
Clique neste link para exibir ou ocultar os comentários.

Pronto!

Obs: Se quiser pode substituir a palavra 'depoimentos' que está destacada em vermelho dentro do código pela palavra 'comentários'.
Créditos da imagem: http://psdstyle.net/2011/01/17/comments-icon-free-icon-template/
Gerador de Senha - Crie senhas mais seguras
- Topo