En este tutorial veremos como agregar CSS a la caja de comentarios "Ver Comentarios Blogger".
Con un pequeño código CSS podremos darle un estilo único a nuestros mensajes en la caja de comentarios.


Antes de comenzar veremos una demostracion: 

Comencemos:  

  • Paso 1: Vamos a Blogger>> Plantilla>> Editar HTML>>.
  • Paso 2: Buscamos la siguiente linea (Ctrol + F)
<b:skin></b:skin>
  • Paso 3: Desplegamos el código aquí dentro ►<b:skin></b:skin>
  • Paso 4: Dentro de ►<b:skin></b:skin> Buscamos la siguiente linea.
]]></b:skin>

  • Paso 5: Justo por encima de ]]></b:skin> pegamos el siguiente código CSS.

#pra-comment{
position: relative;
background:#538cd6;
width:650px;
padding:10px;
font:normal 12px trebuchet ms;
text-align:justify;
border:3px solid #436590;
margin:0 10px 10px 0;
margin-top: 10px;
line-height: 1.3em;
}
#pra-comment::after, #pra-comment::before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none
}
#pra-comment::before {
border-top-color: #436590;
border-width: 15px;
left: 10%;
margin-left: -36px
}
#pra-comment::after {
border-top-color: #538cd6; /* Samakan dengan warna background */
border-width: 9px;
left: 10%;
margin-left: -30px
}

  • Paso 6: Todavia en la plantilla buscamos la siguiente linea. 
<p><data:blogCommentMessage/></p>

  • Paso 7: Seguramente encontraras mas de 2 <p><data:blogCommentMessage/></p> remplazalas todas por la siguiente linea
<div id='pra-comment'><data:blogCommentMessage/></div>

  • Paso 8: Guardamos los cambios realizados

Ahora para agregar un información sobre la caja de comentarios  o el texto que queramos agregar 

  • Paso 1: Vamos a Blogger>> Configuración>> Entradas y Comentarios



  • Paso 2 Guardamos la configuracion

Listo ya tendríamos nuestra caja de comentarios con un toque de estilo 

- - 25 Comentarios
Tag

Comentarios (25)

  1. Que hay amigo como le cambio el color a la letra del cuadro a blanca y por otro lado como pusistes esos emoticones de aca arriba saludos

    ResponderEliminar
  2. @Carlos PavonTe comento justo por debajo de:

    font:normal 12px trebuchet ms;

    pega la siguiente linea...
    color:white;

    White; puedes cambiarlo por el color que desees

    ResponderEliminar
  3. Buenas!
    Quiero añadir una imagen justo encima de la caja de comentarios de mi blog, ¿Cómo puedo hacerlo?

    Un saludo

    ResponderEliminar
  4. Gracias amigo ahora si logre personalizar los comentarios,,

    ResponderEliminar
  5. Yo lo que quiero es modificar el estilo de los comentarios, al igual que tu blog, una imagen redonda al lado izquierda de mi nombre, y la fecha al lado izquierda, comentarios separados, flecha abajo, etc.. Si pudieras decirme como, te lo agradecería

    ResponderEliminar
    Respuestas
    1. Si creo que es lo que me estas pidiendo tengo el tutorial en un borrador, ahora mismo lo publicare para que puedas ver si es lo que me pides

      Eliminar
    2. Ok, muchas gracias! Te currastes mucho el blog, me gusta tu blog, lo agregué a favoritos, a demás eres muy rápido respondiendo comentarios! =D

      Eliminar
    3. Gracias a ti!
      Respondo rápido por que en este momento esta horrible en donde vivo y no puedo salir, llueve a cantaros jajaja, estoy aburrido en la compu jejeje

      Eliminar
    4. xD, una pregunta ¿Cual es el link de la entrada de comentarios?

      Eliminar
    5. Mmm... no te entiendo que me quieres preguntar

      Eliminar
    6. Si pudieras darme el html que usas para los comentarios de aquí abajo de tu blog te lo agradecería, por cierto, estoy viendo un poco tu blog y es genial!

      Eliminar
    7. Ese gadget no lo tengo como entrada. Se ve que me lo he pasado por alto solo tienes que agregar en un gadget HTML/Javascript el siguiente codigo HTML

      <style type="text/css">
      ul.sakahayang_recent_comments{list-style:none;margin:0;padding:0;}
      .sakahayang_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
      .sakahayang_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
      .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
      .sakahayang_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
      .sakahayang_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 11px;font-style: italic;line-height: 1.4;}
      </style>
      <script type="text/javascript">
      //<![CDATA[
      // Recent Comments Settings
      var
      numComments = 5, <i>numero de comentarios</i>
      showAvatar = true, <i> motrar avatar</i>
      avatarSize = 30, <i> altura y ancho del avatar en px.<i>
      roundAvatar = true,
      characters = 40, <i> numero de caracteres que se mostrara<i>
      defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
      hideCredits = true;
      maxfeeds=20,
      adminBlog='Fernando Salas';
      //]]>
      </script>
      <script type="text/javascript" src="http://btreaders.googlecode.com/files/rcwanau.js"></script>
      <script type="text/javascript" src="http://blog.kangismet.net/feeds/comments/default?alt=json&callback=sakahayang_recent_comments&&max-results=20"></script>

      Eliminar
  6. Como podría modificar los comentarios para hacerle sólo un borde al comentario y a su avatar?
    Mil gracias

    ResponderEliminar
    Respuestas
    1. Dime si te resulta de esta manera:
      Ve a tu plantilla y buscan la siguiente linea (Ctrol + F)
      ]]></b:skin>
      Justo por encima de ]]></b:skin> pega el siguiente código

      .comments .comments-content .user{font-style:normal;font-weight:bold}
      .comments .avatar-image-container{float:left;max-height:50px;overflow:hidden;width:50px;background:#f5f5f5;border-radius:100%;margin:5px;}
      .comments .avatar-image-container img{max-width:45px;height:45px;padding:4px;border-radius:100%;}
      .avatar-image-container{border:1px solid #ccc;float:left;max-height:45px;overflow:hidden;padding:5px;width:45px}


      Espero que te sirva y dime si te resulto

      Eliminar
    2. Hola Fernando, muchas gracias por tu ayuda, al final no me ha servido porq aunque es redondo y lo intento poner cuadrado no queda encajado en la imagen del avatar sino que es más grande por el lado derecho y no consigo encajarlo.
      Gracias de nuevo

      saludos

      Eliminar
  7. Fernando después de navegar y buscar ayuda he llegado a tu blog. Cordial saludo.
    Mira tengo problemas al responder a comentarios que hacen en mi blog: vintageymanualidades.blogspot.com Bueno trato de dar respuesta y me sale un recuadro para unirme a google+, yo no quiero eso, casualmente esto me empezó a ocurrir después que me retire de google+. en Configuracion comentarios aparece solo ubicación y el resto de opciones no aparece. Ya no se que hacer. Agradezco tu ayuda.

    ResponderEliminar
    Respuestas
    1. La verdad que te mentiría si te daría una respuesta a tu comentario. No se que problemas tengas con google+, no te puedo dar una solución a lo que no tengo idea.
      Espero que sepas disculparme

      Eliminar
    2. Gracias por tu respuesta. Continuare para solucionar este mal.
      Un abrazo.

      Eliminar
  8. Que tal amigo pero me podrias decir como poner los botones en tu formulario en la parte que dice Comvertir tu comentario en html y abajo tienes como tres botones como lo haces saludos

    ResponderEliminar
  9. Hola gracias por tu tutorial a mi lo que me gustaria es personalizar donde dice al final del post ("10"comentarios ) Me gustaria poner eso centrado y un poco mas grande es posoble?
    Gracias anticipadas

    ResponderEliminar
  10. ¡Hola! estoy iniciando mi blogg y aun soy novata en esto ... a mi no me funciona y no se si sea porque tengo un salto de linea. Espero tu respuesta y quisiera ayuda en otras áreas :)

    ResponderEliminar
    Respuestas
    1. En nuestro menu busca "OTRO TEMA" y deja tu publicación en que deseas que te ayudemos

      Eliminar
:))
:((
:D
:(
:)
:-)
;)
=))
:p
=.=
==
^_^
/=he
:*
/=r
/=l
:v
/=ok
/=clap
(y)
(yy)
/=hi
/=j
/=hup
/=hd
/=hl
/=hr
/=s
<3

Instrucciones Para omentar

Incertar Enlace

Utilice el codigo <a href='LINK'> EJEMPLO </a>

Cargar Imagen

[img] LINK_ANH [/img] -Use el codigo para cargar una imagen.

Formato Word

<b> negrita </b>
<i> cursiva </i>
<u> texto subrayado </u>
<strike> texto tachado </strike>

Insertar un Fragmento de codigo

Primero use esta herramienta para codificar el codigo que quiera agregar.
Luego utilice el codigo [code] CODIGO HTML [/code]

Cerrar