Efeito mostrar e ocultar os comentários do blog com botão
Autor: Robson | Publicado: 2011-09-26T17:05:00-03:00



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:

&lt;/head&gt; 
Cole logo acima o seguinte código:

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

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

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

$(document).ready(function(){
&nbsp;&nbsp; &nbsp;$(&amp;#39;.tgl&amp;#39;).before(&amp;#39;&lt;span&gt;Mostrar depoimentos&lt;/span&gt;&amp;#39;);
&nbsp;&nbsp; &nbsp;$(&amp;#39;.tgl&amp;#39;).css(&amp;#39;display&amp;#39;, &amp;#39;none&amp;#39;)
&nbsp;&nbsp; &nbsp;$(&amp;#39;span&amp;#39;, &amp;#39;#box-toggle&amp;#39;).click(function() {
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;$(this).next().slideToggle(&amp;#39;slow&amp;#39;)
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;.siblings(&amp;#39;.tgl:visible&amp;#39;).slideToggle(&amp;#39;fast&amp;#39;);
&nbsp;&nbsp; 
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;$(this).toggleText(&amp;#39;Mostrar&amp;#39;,&amp;#39;Ocultar&amp;#39;)
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;.siblings(&amp;#39;span&amp;#39;).next(&amp;#39;.tgl:visible&amp;#39;).prev()
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;.toggleText(&amp;#39;Mostrar&amp;#39;,&amp;#39;Ocultar&amp;#39;)
&nbsp;&nbsp; &nbsp;});
})
&lt;/script&gt;
Salve o Modelo!

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

&lt;div class='comments' id='comments'&gt;
Logo acima do trecho cole estas duas linhas: 

&lt;div id='box-toggle'&gt;
&lt;div class='tgl'&gt;
Não tente salvar ainda ou dará erro!
Procure também pelo trecho:

&lt;div id='backlinks-container'&gt;
Logo acima cole estas outras duas linhas:

&lt;/div&gt;
&lt;/div&gt;
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/