Comentários com botão Ocultar/Mostrar com sistema Google+ e Blogger

Hey guy's! Como meus bunnie's vão hoje? Espero que todos bem! Hoje venho trazer um código bem legal para área dos comentários. É engraçado perceber como existem tão poucos recursos para tal área, na qual mais depositamos esperança de alguém comentar, então aqui venho trazer algo para chamar a atenção de seus leitores a área de comentários. 

Venho trazer um botão de ocultar e mostrar, os comentários ficam amenizados, fechados e ao clicar no botão os comentários abrem deslizando de uma forma bem graciosa. O recurso ainda conta com dois sistemas de comentários, o Google+ e o próprio blog, como pode ver na imagem abaixo.

Achou legal? Então me acompanhe nesse tutorial! 

1. O código é baseado em CSS e jQuerey, você pode muda-lo livremente depois. Para começar a implantação do código, vá ao HTML do seu blog ative o Ctrl+F e dentro da barra de pesquisa cole o código abaixo e clique "enter" para pesquisar:

Códigos

<b:include data='post' name='post'/>

Assim que achar, adicione o próximo código abaixo dele:

Códigos

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>#comments, #gplus-comments-visibility {display:none;} .comments-icons {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8HI8pNi2Nn5kI3dSYgvjNMsiTfeC5q9CKynG_VrfSiuXI3ctvnhnp1ytZ5GlBI4HgyfKV5efOnADKItmdODuN0-jbVlEv9p6HQNsUMBZSDp_vusu6Mf9Lq40o7w2GOFQnrXjPZ3rPvb8B/s1600/speech-bubble.png) no-repeat; font-size: 20px; font-family: &quot;Arial Narrow&quot;,Arial,sans-serif; color: #555; font-weight: bold; padding: 18px 15px 0; height: 70px; } .comments-icons a img {vertical-align: middle;}</style>
<div class='comments-icons'>
Show Comments: <a class='show-hide-comments' href='javascript:void();' onclick='$(&quot;#gplus-comments-visibility&quot;).slideToggle();$(&quot;#comments&quot;).hide();'><img class='gplus-icon' height='35' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSaT6VX88i3_47knmCNs_CGhDTok0sXYPTiXlisvFxQqglF3o4gXLfV-1dy8qEDEtkhn19eMXbqNrTdT6GLokhqDJuP8JlPojtis1zhinkpJkMt64h-8t9gcvS70sVb0sk9bYvYtI43JQE/s1600/google-plus-logo.png' width='35'/></a> OR <a class='show-hide-comments' href='javascript:void();' onclick='$(&quot;#comments&quot;).slideToggle();$(&quot;#gplus-comments-visibility&quot;).hide();'><img class='blogger-icon' height='35' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKcRttJAi2p6O7g5Z6oJJCywfxil7SGLvmrLMYOB97SnJakuELX3tIbecyMQFt0rB3p6S3Jh1KlNKCBPJvd_6617BIAyq5IAaTDusd0ApntEYzXHPqp_DVRFAUMGjXRk7VfXKofx65BSSJ/s1600/blogger-logo.png' width='35'/></a>
</div>
<div id='gplus-comments-visibility'>
<div class='g-comments' data-first_party_property='BLOGGER' data-view_type='FILTERED_POSTMOD' data-width='550' expr:data-href='data:post.url'/>
</div>    
</b:if>

O texto marcado em vermelho data-width='550' é o código que determina a largura da caixa dos comentários.

2. Agora salve o que fizemos, já sera possível ver o resultado do tutorial. Lembrando que para esse tutorial funcionar é necessário ter o jQuerey estalado em seu layout, caso não tenha basta procurar por </head> e acima dele colar o seguinte código:

Códigos

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>

Salve e prontinho! É só isso. Então gostaram? Espero de verdade que sim.