Como colocar um efeito "Box Toggle" para Mostrar / Ocultar os comentários da Blogger

Os blogueiros de plantão vão a loucura cada vez que um tutorial como este é mostrado, pois muitos adoram incrementar seus blogs seja para dar uma cara diferente a seu blog, seja para que determinada função fique mais prática. Vale ressaltar também que muitos não gostam dessa prática.

Pensando nos que gostam,  disponibilizamos aqui uma maneira de mostrar / ocultar comentários do blog através de um script que contém o efeito chamado de "Box Toggle" então você que tem o interesse de saber como funciona é só seguir este tutorial abaixo para colocá-lo em seu blog.

 Mas antes de começar faça um backup de segurança. Caso ainda não saiba como proceder, acesse o artigo Como Fazer Backup do Blog.

1º- Acesse seu blogger, vá em "Tema" e "Editar HTML".

2º- Clique no código, pressione "CTRL+F" e pesquise por </head>

3º- Logo ACIMA cole o seguinte abaixo.

<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 Comentários</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>

4º- Agora pesquise por <div class='comments' id='comments'> e você encontrará 2 iguais mas para que tudo dê certo opte pelo primeiro.

5º- Logo ACIMA cole o seguinte código.

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

6º- Em seguida pesquise por <div id='backlinks-container'>

7º- Logo ACIMA cole o seguinte código.

</div>
</div>

8º- Agora clique em "Visualizar", caso não encontre nenhum erro clique em "Salvar Modelo".

Nota: Se você seguiu corretamente este tutorial, acredito que nada dará errado. Até a próxima!