Instalar Efeito Mostrar e Ocultar Comentários do Blog

Deixe essa opção aos leitores de seu blog para que eles possam ver ou ocultar os comentários já postados.

Adicionar efeitos em determinadas partes do blogger faz a cabeça de muitos blogueiros, 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" e mostraremos agora como realizar esse processo.

 Recomendamos que antes de qualquer alteração no código faça um backup do template. Caso ainda não saiba como proceder, acesse o artigo Como Fazer Backup do Blog.

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

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

3º- Logo ACIMA cole 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 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'>

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".

Se você seguiu o passos direitinho estará funcionando perfeitamente. Acesse seu blog e veja o resultado.

Gostou? Comente.