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

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
¿Te ha resultado útil este artículo, recomiendanos?
Si



Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.

Related post

Comentarios

9 comentarios:

  1. no me aparece esto ]]> podrias ayudarme
    ni tampoco esto

    ResponderEliminar
  2. hola amigo,, me da error cuando coloco los codigo en esta linea

    ResponderEliminar
  3. Hola. Buen día o noche. Mira, resulta que me gustó mucho el código y el efecto que tiene, pero lamentablemente sólo funciona en artículos "vírgenes", ya que en aquellos que tienen uno o más comentarios con respuesta no funciona. Sabes si tenga que modificar algo, y si es así, qué debo modificar. Espero tu respuesta, gracias.

    ResponderEliminar
  4. Respuestas
    1. Luis, una duda que guarda relación con la personalización del cuadro de los comentarios:

      Una necesidad no satisfecha como administrador, supongo que compartida con muchos blogueros, es la edición de los comentarios, al menos de los que uno mismo hace para enmendar alguna palabra inapropiada, solecismos, etc. En Wordpress puede hacerse sin problemas y hace años existía un método que parecía funcionar. Consistía en editar el código relativo a los comentarios con el fin de que apareciese, junto al icono de la papelera, el botón con el lápiz de edición. Diez años atrás trataban de explicarlo así:

      http://vinilosriptuto.blogspot.com.es/2005/11/como-editar-comentarios-en-blogger.html

      ¿Conoces algún sistema que en la actualidad sirva para poder activar esta función adicional?

      Muchas gracias.

      Eliminar
  5. Hola De nuevo Luis, Como esta todo? Vine de nuevo por tu blog, y vi esta entrada y quise probar, pero no surte efecto e investigando un poco vi que el código javascript que almacenaste en google se callo, podrias subirlo de nuevo por favor? Gracias por todo tu blog amigo.

    ResponderEliminar
    Respuestas
    1. Hola Ernesto, en efecto ha surgido varios cambios desde que publique este post el código donde se encontraba fue eliminado, es por este motivo que no funciona, tratare de actualizar este post.

      Saludos.

      Eliminar
    2. Hola Luis, Gracias por tu pronta respuesta, espero con esperanzas de que puedas hacerlo, en efecto es nesesario ya que una perzonalizacion al formulario de nuestro blog no vendrian nada mal :), Saludos y gracias de nuevo Luis, estoy pendiente y revisando tu blog cada vez que puedo.

      Eliminar