Como modificar el cuadro de comentarios de mi blog


El formulario de Blogger de comentarios es la única sección de blogs de blogspot que todavía irrita a los usuarios en gran cantidad, porque no los pueden modificar o no tienen algún tutor que les explique cómo hacerlo. Este widget es un JavaScribt y es compatible para todos los navegadores. El tutorial de hoy le ayudará a crear un botón muy hermoso la cual tiene las funciones de ampliarse y contraerse, como también mostrar el formulario de comentarios, la cual se va a activar y esconderse cuando le dan un clic. Nosotros vamos a usar funciones simples de jQuery para habilitar un botón y que sea mostrado, luego oculte todas las secciones div que sujetan la caja de comentarios.

¿Cómo funciona?

El uso de este widget es muy fácil de usar, cuando se lo instale en su blog, usted podrá observar una gran diferencia al anterior cuadro de comentarios que tenía en su blog de Blogger, cuando un usuario quiere dejarte un comentario, lo único que necesitan hacer es dar un clic en el botón, luego se va a expandir y ahí pueden dejar su comentario, pero esta función tiene buenas ideas, porque también les va a mostrar las fotos de las personas que comentaron y una foto adicional de usted en dibujo. Solo miren la imagen y se darán cuenta de lo que estoy diciendo. 


Instalar en blogger

La guía de instalación es extremadamente simple. He mantenido los pasos lo más claro posible. Sólo tienes que copiar y pegar los códigos y nada más.

   1.-  Ir a Blogger> Plantilla
   2.-  Haga una copia de seguridad de su plantilla
   3.-  Haga clic en Edición de HTML
   4.-  Haga clic en Continuar
   5.-  Haga clic en Expandir plantillas de artilugios
   6.-  Justo debajo de <head> pega el siguiente código:



                                                                                                     
  <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
   
    $(&quot;.toggle_container&quot;).hide();
 
    $(&quot;h3.trigger&quot;).click(function(){
        $(this).toggleClass(&quot;active&quot;).next().slideToggle(&quot;slow&quot;);
    });
 
});
</script>                                                                                                         

7. Ahora busca este código,   ]]></b:skin>   y justo encima de ella pegue el siguiente código CSS.

h3.trigger {
background: url(http://mybloggertricks.googlecode.com/files/comment-boxbg.png) no-repeat;
height: 44px;
line-height: 46px;
width: 518px; border-radius:4px;
font-family:Arial;
font-size: 1.4em;
font-weight: bold;
text-align:left;
color:#A1A1A1;
float: left;
cursor:pointer;
box-shadow: #333 0px 1px 3px;
padding:0 0 0 50px;
margin:10px 0px 10px 10px;
}

h3.active {
background-position: bottom left;
color:#ddd;
}
.toggle_container {
padding-left:10px;
overflow: hidden;
clear: both;
}


                                                                                                        


- Para cambiar el ancho del botón puedes editar width: 518px por el ancho que usted quiera.


- Para cambiar el color, tamaño de fuente, tipo de letra del texto, para el mensaje "Haga clic aquí para añadir un comentario!" Edite la parte resaltada de color amarillo del código.

8. Luego busque este código:




<b:includable id='comment-form' var='post'>

                                                                                                        


9. Justo debajo debe pegar el siguiente código:

<h3 class='trigger'>Haga clic aquí para añadir un comentario</h3>
<div class='toggle_container'>
<div class='block'>
                                                                                                        



Luego busca este código  </b:includable> y justo arriba de el pega este código:


<p style=' line-height:0px; font-family:Arial; font-size:8px; font-weight:bold; text-align:right;'><a href='#' style='color:#CAC8C8;'><i>Blogger</i></a></p>
</div>
</div>


                                                                                                          
Vea la imagen de abajo para ver que ha seguido los pasos correctamente.


 
10. Guarde su plantilla y listo eso es todo


Ahora abra su blog de Blogger para ver sus cambios, a sus visitantes les encantara hacer un comentario con esta nueva función. 


¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber




Share:

Related post

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments: