terça-feira, 13 de outubro de 2015

Comentar facebook e disqus blogger evento on clique mostrar e ocultar

Tags

comentar-facebook-disqus-hide-show-blogger-event-on-clique




Hoje vamos apresentar aqui um efeito muito legal para seu blogger funcionando com sistema de comentários facebook e disqus com um efeito on click ou seja clicar aparece e hide oculta veja a foto abaixo que mostra a ilustração na prática 

facebook-disqus-blogger-widget-efeito-clique-show-hide



Para adicionar siga os passos abaixo 

Faça login no seu blogger 
No menu procure por modelo >> editarHTML
com as teclas combinadas CTRL+F busque por </head> e logo acima disso copie o seguinte código e cole 


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.comments,.comments-fb{background:#262626;clear:both;margin:0 20px;line-height:1em;padding:0 12px;}
#comments{padding:10px 20px;margin-top:0;display:none}
.fb-comments,.fb_iframe_widget span,.fb_iframe_widget iframe{width:100%!important}
.fb-comments{padding:0!important;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
.fb-title,.disqus-title{margin:0 20px;text-align:left;background:#111;padding:6px 10px;color:#f7f7f7!important;font-size:120%;font-weight:700}
#disqus-title{margin:20px 20px 0!important;}
.fb-loader,#fb-showhide,.disqus-loader,#disqus-showhide{float:right;cursor:pointer}
#fb-comment,#disqus-showhide,#fb-showhide{display:none}
</style>
</b:if>


Agora procure por </body> copie o código abaixo e cole antes disso 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function loadFacebook(){var e=document.getElementById("fb-loader");e.style.display="none";var e=document.getElementById("fb-comment");e.style.display="block";var e=document.getElementById("fb-showhide");e.style.display="block";!function(e,n,t){var o,c=e.getElementsByTagName(n)[0];e.getElementById(t)||(o=e.createElement(n),o.id=t,o.src="//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3",c.parentNode.insertBefore(o,c))}(document,"script","facebook-jssdk");}
function toggleNavPanel(e){var n=document.getElementById(e),l=document.getElementById("fb-showhide"),t="none";n.style.display==t?(n.style.display="block",l.innerHTML="Hide"):(n.style.display="none",l.innerHTML="Show")};
function toggleNavPanel2(e){var n=document.getElementById(e),l=document.getElementById("disqus-showhide"),t="none";n.style.display==t?(n.style.display="block",l.innerHTML="Hide"):(n.style.display="none",l.innerHTML="Show")};
//]]>
var disqus_shortname = &quot;USERNAMEDISQUS&quot;;
function loadDisqus(){var e=document.getElementById(&quot;disqus-loader&quot;);e.style.display=&quot;none&quot;;var e=document.getElementById(&quot;disqus-showhide&quot;);e.style.display=&quot;block&quot;;!function(){var e=document.createElement(&quot;script&quot;);e.type=&quot;text/javascript&quot;,e.async=!0,e.src=&quot;//&quot;+disqus_shortname+&quot;.disqus.com/blogger_item.js&quot;,(document.getElementsByTagName(&quot;head&quot;)[0]||document.getElementsByTagName(&quot;body&quot;)[0]).appendChild(e)}();}
</script>
<div id='fb-root'/>
</b:if>


Não esqueça de substituir username disques em amarelo pelo usuario 

Se seu blogger tem JS como código abaixo apague 
 <div id='fb-root'/> 
<script type='text/javascript'> 
!function(e,n,t){var o,c=e.getElementsByTagName(n)[0];e.getElementById(t)||(o=e.createElement(n),o.id=t,o.src="//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3",c.parentNode.insertBefore(o,c))}(document,"script","facebook-jssdk"); 
</script> 


Localize o código abaixo
 <b:includable id='comments' var='post'>
...........
...........
...........
</b:includable>


E substitua por

         <b:includable id='comments' var='post'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='fb-title'>Facebook Comments<span class='fb-loader' id='fb-loader' onclick='loadFacebook()'>Show</span><span id='fb-showhide' onclick='toggleNavPanel(&apos;fb-comment&apos;)'>Hide</span></div>
</b:if>
<div class='comments-fb'>
<b:include data='post' name='fb-comments'/>
              </div>
<div class='disqus-title' id='disqus-title'>Disqus Comments<span class='disqus-loader' id='disqus-loader' onclick='loadDisqus()'>Load</span><span id='disqus-showhide' onclick='toggleNavPanel2(&apos;disqus-comments&apos;)'>Hide</span></div>
<div id='disqus-comments'>
<div class='comments' id='comments'>
<b:include data='post' name='disqus-comment'/>
</div>  
            </div>
</b:includable>
            <b:includable id='disqus-comment' var='post'>
            <script type='text/javascript'>
                var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;
                if (!disqus_blogger_current_url.length) {
                    disqus_blogger_current_url = &quot;<data:blog.url/>&quot;;
                }
                var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;
                var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;
            </script>
            </b:includable>
            <b:includable id='fb-comments' var='post'>
            <div class='fb-comments' data-colorscheme='dark' data-numposts='5' expr:data-href='data:post.url' id='fb-comment'/>
            </b:includable>

salve o template e pronto.

Créditos Kpajab

Blogger
Disqus
Escolha o Sistem de Comentario

2 comentários

Olá amigo! Qual é o programa que utilizamos para fazer um Gif desses de tela?

Balas

Veja no site do baixaki tem varios programas para isso

Balas