segunda-feira, 17 de outubro de 2016

Mostrar e ocultar comentarios disqus no Blogger

Tags

show hide disqus comment system for blogger

Hoje vamos mostrar um tutorial por kompiajaib  de como adicionar um botão que ao clicar ele vai aparecer o sistema de comentarios de disqus isso traz algo inovador deixando o Blog mais profissional caso deseja ver o resultado em alguma postagem do Blog veja no próprio template amp 

Tutorial para mostrar e ocultar 

Primeiro você precisa fazer login no blogger então va no menu modelo
então editar HTML/JavaScript com as teclas combinadas procure por algo como o código mencionado abaixo:


<amp-iframe expr:src='&quot;https://cdn.rawgit.com/KompiAjaib/kompi-html/master/disqus_amp2.html?shortname=seuusuario&amp;url=&quot; + data:blog.canonicalUrl' frameborder='0' height='300' layout='responsive' resizable='resizable' sandbox='allow-scripts allow-same-origin allow-modals allow-popups' width='600'>
<div aria-label='Disqus Comments' overflow='' role='button' tabindex='0'>Disqus Comments</div>
  </amp-iframe>

Então substitua pelo Código abaixo:

<amp-accordion>
    <section>
<h4>
<span class='show-more'>Add your comment</span>
<span class='show-less'>Hide comment</span>
</h4>
<amp-iframe expr:src='&quot;https://cdn.rawgit.com/KompiAjaib/kompi-html/master/disqus_amp2.html?shortname=seu-usuario&amp;url=&quot; + data:blog.canonicalUrl' frameborder='0' height='300' layout='responsive' resizable='resizable' sandbox='allow-scripts allow-same-origin allow-modals allow-popups' width='600'>
<div aria-label='Disqus Comments' overflow='' role='button' tabindex='0'>Disqus Comments</div>
  </amp-iframe>
</section>
  </amp-accordion>

Em seguida vamos adiconar o CSS com tag condicional para ambos para desktop e mobile


section[expanded] .show-more,section:not([expanded]) .show-less{display:none;}
.disqus-comments h4{padding:8px 10px;text-align:center;color:#000;background:#f5f5f5;border:none;border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);transition:.3s box-shadow ease;-webkit-transition:.3s box-shadow ease;text-shadow:0 0 0;clear:both}
.disqus-comments h4:hover {box-shadow: 0 12px 23px rgba(0, 0, 0, 0.23), 0 10px 10px rgba(0, 0, 0, 0.19);}
.disqus-comments amp-iframe{margin-left:-8px;margin-right:-8px}


Não esqueça salve o CSS acima sob o canto superior direito do código abaixo em 2 partes:

<b:if cond='data:blog.pageType == &quot;item&quot; and data:blog.isMobileRequest == &quot;false&quot;'>
<style amp-custom='amp-custom'>
/*<![CDATA[*/

<b:if cond='data:blog.pageType == &quot;item&quot; and data:blog.isMobileRequest == &quot;true&quot;'>
<style amp-custom='amp-custom'>
/*<![CDATA[*/

Por ultimo mantenha o Seguinte código acima de </head>

<script async='async' custom-element='amp-accordion' src='https://cdn.ampproject.org/v0/amp-accordion-0.1.js'/>

salve e pronto.

Blogger
Disqus
Escolha o Sistem de Comentario

Nenhum comentário