terça-feira, 18 de outubro de 2011

Sistema de comentário em ligthbox para o blogger

Depois de muitas tentativas e muitos fracassos, finalmente conseguir montar um código e dar um novo visual no seu blog. Elaborei um belo sistema que permite que seus leitores comentem em seu blog de uma forma bem criativa a partir de uma lightbox.

Comentário em lightbox no blogger
Clique aqui para ver uma demonstração

Juntei alguns trechos de códigos do lightbox Pirobox com os os códigos de comentário do blogger. Confesso que foi difícil obter o devido funcionamento, mas consegui e agora você pode aplicar essa nova forma de fazer comentários em seu blog de uma forma diferente da que estamos acostumado. Apenas siga os passos abaixo:

1. Entre no blogger e acesse o painel principal do seu blog.

2. Clique em “Modelo” –> “Editar HTML” e marque a opção “Expandir Modelos de Widgets”.

3. Cole o seguinte código acima de </head>

<link href='http://codigosblogger.webs.com/Cblogger/style.css' rel='stylesheet' type='text/css'/>
<link href='http://codigosblogger.webs.com/Cblogger/comentarbot.css' rel='stylesheet' type='text/css'/>
<script src='http://www.pirolab.it/pirobox/js/jquery.min.js' type='text/javascript'/>
<script src='http://www.pirolab.it/pirobox/js/jquery-ui-1.8.2.custom.min.js' type='text/javascript'/>
<script src='http://www.pirolab.it/pirobox/js/pirobox_extended.js' type='text/javascript'/>
<!-- or use minified version  "pirobox_extended_min.js"  -->
<script type='text/javascript'>
$(document).ready(function() {
    $().piroBox_ext({
        piro_speed : 900,
        bg_alpha : 0.7,
        piro_scroll : true ,
        piro_next : false
    });
});
</script>

5. Agora procure por:

<a name='comment-form'/>

6. Cole o seguinte código abaixo da linha procurada.

<div style='display:none;'>

7. Um pouco mais abaixo você vai encontrar o seguinte trecho:

<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src=''/>
</b:if>

Depois de </b:if> cole a tag: </div>

8. Agora procure por:

<div class='post-footer-line post-footer-line-1'>

9. Cole o código abaixo depois dessa linha.

<b:if cond='data:blog.pageType == "item"'>
<div class='botaoparacomentar'><a class='pirobox_gall1' href='#fazercomentario' rel='inline-400-370' style='height: 100%; width: 100%;'>Fazer comentário</a></div>
<div id='fazercomentario' style='display: none; background: white; padding: 20px; border-radius: 15px;'>
<h2>Faça um comentário</h2>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='245' id='comment-editor' name='comment-editor' src='' width='365px'/>
</div></b:if>

Pronto! Agora é só visualizar pra ver se não tem nenhum erro, em seguida salvar. Espero que tenham gostado na modificação que promete deixar seu blog mais interativo.

Marcadores: , , ,

9 Comentários:

Às 18 de outubro de 2011 16:45 , Blogger Mc Mateus disse...

zika

 
Às 20 de outubro de 2011 05:39 , Blogger Eminem Fã disse...

Gostei bastante cara, muito obrigado adorei o post, belo trabalho :)

 
Às 21 de outubro de 2011 20:44 , Blogger Holtz disse...

Como faz pra fazer isso porem escrito Usar editor antigo

 
Às 21 de outubro de 2011 22:47 , Blogger Códigos Blogger disse...

Onde? Você quer dizer "Comentar pelo editor antigo?"

 
Às 22 de outubro de 2011 21:21 , Blogger Holtz disse...

Sim! Isso mesmo mas...
No meu blog olha ai..
http://animaliavirtual.blogspot.com
E bem provavem que de fail :(

 
Às 4 de dezembro de 2011 11:23 , Blogger Leonor Carboila disse...

nao consegui fazer, deu erro! |:

 
Às 4 de dezembro de 2011 22:42 , Blogger #Wesley!Pego disse...

deu erro

 
Às 5 de dezembro de 2011 14:01 , Blogger Códigos Blogger disse...

Por favor, nos informe qual o erro para concertarmos.

 
Às 1 de janeiro de 2012 22:59 , Blogger adventure disse...

não funcionau no meu blog, aparece a seguinte mensagem:
Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
Mensagem de erro em XML: The element type "div" must be terminated by the matching end-tag
Error 500

 

Postar um comentário

Se você gostou deste artigo deixe um comentário!

Duvidas ou sugestões comentem aqui! =D
*Não insultar autor ou leitores da postagens
*Não pedir parceria por comentários
*Não publicar spam ou similar.

Assinar Postar comentários [Atom]

Links para esta postagem:

Criar um link

<< Página inicial