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.

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.