segunda-feira, 17 de outubro de 2016

Mostrar e ocultar comentarios disqus no Blogger

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.

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner