tag:blogger.com,1999:blog-85333779473439653252024-03-08T01:09:37.470-08:00Web DivertidaVinícius Corrêa Eckerlebenhttp://www.blogger.com/profile/04970424075036952901noreply@blogger.comBlogger1125tag:blogger.com,1999:blog-8533377947343965325.post-57463293291379811232013-03-16T09:22:00.001-07:002013-03-16T09:22:20.954-07:00teste<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="post-body entry-content" style="color: #777777; font-family: Arial, Verdana; font-size: 13px; line-height: 20px; margin: 0px 0px 0.75em; padding-top: 8px;">
São raras as pessoas que ainda não procuraram um novo sistema de comentário para aplicarem em seu blog pelo simples fato de estarem cansadas do padrão do blogger, ou até mesmo querendo dar um upgrade no gerenciamento de comentários.<br />
Escolher o sistema de comentário do facebook pode ser uma boa opção, até mesmo de ganhar mais comentários sendo que o facebook possui uma grande audiência, mas também de divulgar suas postagens. Isso deve ao fato de que quando alguém comenta no seu blog através do sistema do facebook, ele publica uma atualização automaticamente em seu perfil.<a href="http://lh3.ggpht.com/-dHT1Vj2vFiw/TnVB74RKHHI/AAAAAAAAAgY/zbVOHP2M32U/s1600-h/Caixadofacebookefeitoaccordion%25255B1%25255D.gif" style="color: #555555; outline: none; text-decoration: none;"><img alt="Caixa do facebook efeito accordion" height="300" src="http://lh5.ggpht.com/-6qwJRIUWNiw/TnVB_2OoJmI/AAAAAAAAAgc/kt2l2dKuvaU/Caixadofacebookefeitoaccordion_thumb%25255B1%25255D.gif?imgmax=800" style="border-width: 0px; display: block; float: none; margin: 0px auto 4px; padding: 6px;" title="Caixa do facebook efeito accordion" width="590" /></a><br />
Neste tutorial não vou ensinar como substituir a caixa do blogger, até porque já ensinei aqui no cblogger.<br />
<ul>
<li><a href="http://www.cblogger.net/2011/09/substituir-caixa-de-comentario-do.html" style="color: #555555; outline: none; text-decoration: none;" target="_blank">Substituir caixa de comentário do blogger pelo do facebook</a></li>
</ul>
Mas sim mostrar como utilizar os dois sistemas no blog, dando dupla opção para o usuário estar comentando em seu blog, porém, com o efeito accordion no do facebook.<br />
Dado a introdução, vamos trabalhar!<br />
1. Primeiramente acesse o HTML do seu blogger, clique em<strong> “Expandir modelos de widgets”</strong> e procure por <strong></head>.</strong><br />
2. Acima dessa tag cole código abaixo.<br />
<blockquote style="border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-top-left-radius: 6px; border-top-right-radius: 6px; border: 1px solid rgb(220, 220, 220); box-shadow: rgb(220, 220, 221) -0.1px 0px 14px inset; color: #666666; font-style: italic; max-height: 500px; overflow-x: hidden; overflow-y: auto; padding-left: 9px;">
<script type='text/javascript'><br />$(document).ready(function(){<br /> $(&quot;.toggle_wraper&quot;).hide();<br /> $(&#39;.twitter&#39;).toggleClass(&quot;active&quot;).next().slideToggle(&quot;slow&quot;);<br /> $(&quot;.headings&quot;).click(function(){<br /> $(this).toggleClass(&quot;active&quot;).next().slideToggle(&quot;slow&quot;);<br /> });<br />
});<br /></script></blockquote>
3. Agora procure por <strong>]]></b:skin> </strong>e acima dela cole o código abaixo.<br />
<blockquote style="border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-top-left-radius: 6px; border-top-right-radius: 6px; border: 1px solid rgb(220, 220, 220); box-shadow: rgb(220, 220, 221) -0.1px 0px 14px inset; color: #666666; font-style: italic; max-height: 500px; overflow-x: hidden; overflow-y: auto; padding-left: 9px;">
:focus {<br /> outline: 0;<br />}<br />.toggle_wraper{ padding:0px; margin:0px;}<br />div#container {<br /> margin: 50px auto 0px auto; /* centered */<br /> width: 400px;<br />}<br />.bg {<br /> clear: both;<br /> margin: 0px auto;<br /> width: 590px;<br /> background: #fff;<br /> -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);<br /> -khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);<br /> -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); <br /> position: relative;<br /> z-index: 90;<br />}<br />.headings {<br /> background: #59B;<br /> height: 40px;<br /> width: 590px;<br /> position: relative;<br /> padding-top:5px;<br /> border: 0px #A2A2A2 solid;<br /> -webkit-border-radius: 10px;<br /> top: 0px;<br /> -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);<br /> -khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);<br /> -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);<br /> z-index: 100;<br />}<br />.headings h2 {<br /> font-size: 30px;<br /> cursor:pointer;<br /> color: #fff;<br /> text-shadow: 1px 1px 2px rgba(0,0,0,0.2);<br /> text-align: center;<br />margin-top: 0px;<br />}<br />.detail img{ float:left; margin:15px 15px 7px 32px;}<br />.detail {<br /> padding: 0px 5px 35px 5px;<br />}<br />.detail h2 {<br /> font-size: 20px;<br />}<br />.detail p {<br /> padding-top: 19px;<br /> font-size: 14px;<br />}<br />.detail p a {<br /> color: #5599bb;<br /> text-decoration: none;<br />}<br />.detail p a:hover {<br /> text-decoration: underline;<br />}</blockquote>
4. Feito isso procure por:<br />
<blockquote style="border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-top-left-radius: 6px; border-top-right-radius: 6px; border: 1px solid rgb(220, 220, 220); box-shadow: rgb(220, 220, 221) -0.1px 0px 14px inset; color: #666666; font-style: italic; max-height: 500px; overflow-x: hidden; overflow-y: auto; padding-left: 9px;">
<div class='comments' id='comments'></blockquote>
5. Abaixo dessa linha cole o seguinte código:<br />
<blockquote style="border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-top-left-radius: 6px; border-top-right-radius: 6px; border: 1px solid rgb(220, 220, 220); box-shadow: rgb(220, 220, 221) -0.1px 0px 14px inset; color: #666666; font-style: italic; max-height: 500px; overflow-x: hidden; overflow-y: auto; padding-left: 9px;">
<div class='bg'><br /><div class='headings'><h2>Comentar Pelo Facebook</h2></div><br /> <div class='toggle_wraper'><br /> <div class='detail'><br />Se não carregar, atualize a página<br /><b:if cond='data:blog.pageType == &quot;item&quot;'><br /><div id='fb-root'/><br /><script><br />window.fbAsyncInit = function() {<br />FB.init({appId: &#39;<span style="color: red;">APPID</span>&#39;, status: true, cookie: true,<br />xfbml: true});<br />};<br />(function() {<br />var e = document.createElement(&#39;script&#39;); e.async = true;<br />e.src = document.location.protocol +<br />&#39;//connect.facebook.net/pt_BR/all.js&#39;;<br />e.async = true;<br />document.getElementById(&#39;fb-root&#39;).appendChild(e);<br />}());<br /></script><br /><fb:comments/><br /></b:if><br /></div><br /></div><br /></div></blockquote>
6. Substitua a parte em vermelho pelo seu <span style="color: red;">APPID</span>. Se você não sabe o que é isso, trata-se da ID do seu aplicativo criando no facebook, se você não tem, <a href="http://www.cblogger.net/2011/09/substituir-caixa-de-comentario-do.html" style="color: #555555; outline: none; text-decoration: none;" target="_blank">clique aqui e veja como fazer um e pegar o APP ID. Leia o tópico “Criando aplicativo”.</a><br />
7. Só pra finalizar, pesquise por <strong><head></strong> e baixo dela cole as linhas abaixo.<br />
<blockquote style="border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-top-left-radius: 6px; border-top-right-radius: 6px; border: 1px solid rgb(220, 220, 220); box-shadow: rgb(220, 220, 221) -0.1px 0px 14px inset; color: #666666; font-style: italic; max-height: 500px; overflow-x: hidden; overflow-y: auto; padding-left: 9px;">
<meta content=<span style="color: red;">'NOME DE USUÁRIO DO FACEBOOK</span>' property='fb:admins'/><br /><meta content='<span style="color: red;">APPID</span>' property='fb:app_id'/></blockquote>
8. Agora é só trocar as partes destacadas pelo o que se pede. <strong>Feito isso, salve.</strong><br />
Agora entre em uma de suas postagens e veja como ficou, o facebook com efeito accordion e o do blogger abaixo incorporado. Lembrando que só aparece nas páginas de postagem.<br />
E esse foi mais um de nossos tutoriais. Se gostou, dê um +1 e curta no facebook diretamente pelo sistema de comentários abaixo da postagem. Não se esqueça de comentar!<br />
<div>
<br /></div>
<br />
<div style="clear: both;">
</div>
</div>
<span style="background-color: #ffe7ca; color: #666666; font-family: Arial, Verdana; font-size: 13px; padding: 2px; text-align: right;"></span></div>
Vinícius Corrêa Eckerlebenhttp://www.blogger.com/profile/04970424075036952901noreply@blogger.com0