» » » Caja de comentarios estilo 2

Caja de comentarios estilo 2





Para incluir este estilo de Comentarios personalizado en nuestro blog de Blogger ir a:

Diseño ►Edición HTML ►Presionar Ctrl + F, en el buscador pegar

/* Comments


→ Borrar todo el código predeterminado en la plantilla.

 En su lugar pegar el siguiente código CSS
/* Comments
----------------------------------------------- */
.comments .comments-content .icon.blog-author {
background-repeat: no-repeat;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjd-kJZJzbth93aDZLgZyyAR0EayajJ2vs4CiX_ox_e_GhxCi_eq1vOQAc39bNiV9TsR5J9uuwUFhVViICocVTouK0XbmONuvXUeIDZH2wGF_jPD6uAiLJCHkJr6xz3U_JHXEZshDhf_g/s20/plumanegra.png);
}
.icon.blog-author{
display:inline-block;
height:18px;
margin:0 0 -4px 6px;
width:18px;
}
.avatar-image-container{/* Contorno de los avatares */
background:#FFA4A4;
padding:5px;
border-radius:50% 10% 0% 50%;
}
.avatar-image-container img{/* Avatares de comentarios */
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
border-radius:50%;
}
.comment-block{/* Caja */
position:static !important; /* Mantiene el Avatar delante */
background: url( );
padding:30px;
border: 1px dotted #FFA4A4;
border-radius: 5px 1px 50px 1px;
-moz-box-shadow: 0 0 2px #FF9999, inset 0 0 20px #FF9999;
-webkit-box-shadow: 0 0 2px #FF9999, inset 0 0 20px #FF9999;
-goog-ms-box-shadow: 0 0 2px #FF9999, inset 0 0 20px #FF9999;
box-shadow: 0 0 2px #FF9999, inset 0 0 20px #FF9999;
}
.comment-content{/* Caja del comentario */
background:#F5F3F3;
padding:23px;
border-radius: 5px 1px 30px 1px;
color:#000;
}
.user.blog-author a {/* Link autor*/
 background: #FAF1F1;
 padding: 3px;  
 margin-left: -5px;
 text-decoration: none;
 border: 1px solid #ACACAC;
 -moz-box-shadow: 0 0 15px #FF9999, inset 0 0 15px #FF9999;
 -webkit-box-shadow: 0 0 15px #FF9999, inset 0 0 15px #FF9999;
 -goog-ms-box-shadow: 0 0 15px #FF9999, inset 0 0 15px #FF9999;
 box-shadow: 0 0 15px #FF9999, inset 0 0 15px #FF9999;
}
.secondary-text a{/* Links Fecha/Responder/Eliminar */
color: #FF4848;
padding: 3px;
background:#FAF1F1;
float: center;
border-radius:5px;
border: 1px solid #ACACAC;
-moz-box-shadow: 0 0 15px #FF9999, inset 0 0 15px #FF9999;
-webkit-box-shadow: 0 0 15px #FF9999, inset 0 0 15px #FF9999;
-goog-ms-box-shadow: 0 0 15px #FF9999, inset 0 0 15px #FF9999;
box-shadow: 0 0 15px #FF9999, inset 0 0 15px #FF9999;
text-decoration: none!important;
}
.secondary-text a:hover{/* Links Fecha/Responder/Eliminar */
color: #000;
text-decoration: none!important;
}
.comments .continue a{/* Responder/Añadir comentario */
background:#FAF1F1 !important;
color:#FF4848 !important;
float:center!important ;
padding:2px 2px!important;
height:18px;
line-height:18px !important;
margin-top:-1px !important;
text-shadow:0 0 !important;
border: 1px solid #ACACAC;
-moz-box-shadow: 0 0 15px #FF9999, inset 0 0 15px #FF9999;
-webkit-box-shadow: 0 0 15px #FF9999, inset 0 0 15px #FF9999;
-goog-ms-box-shadow: 0 0 15px #FF9999, inset 0 0 15px #FF9999;
box-shadow: 0 0 15px #FF9999, inset 0 0 15px #FF9999;
width:25%;
}
.comments .continue a:hover {
font-style: normal !important;
color: #000 !important;
text-decoration: none;
}
.comments .thread-toggle a{/* Respuestas*/
margin-top: 5px;
color:#FF4848 !important;
border: 1px solid #ACACAC;
-moz-box-shadow: 0 0 15px #FF9999, inset 0 0 15px #FF9999;
-webkit-box-shadow: 0 0 15px #FF9999, inset 0 0 15px #FF9999;
-goog-ms-box-shadow: 0 0 15px #FF9999, inset 0 0 15px #FF9999;
box-shadow: 0 0 15px #FF9999, inset 0 0 15px #FF9999;
text-decoration: none;
}
Al terminar Guardar plantilla.


Si te gusta la entrada compártela.

¡Gracias!

7 comentarios:

  1. Lourdes A. García.28/3/15

    Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  2. Pandora Verdandi19/2/16

    Tengo una duda, me gustaría que saliera una determinada imagen de avatar cuando deja un comentario un anónimo. ¿En qué parte del código puedo solucionar esto? Muchas gracias de antemano!

    ResponderEliminar
    Respuestas
    1. Cambio-Cambie20/2/16

      Pandora pone
      .avatar-image-container img[src="http://img1.blogblog.com/img/anon36.png"] {opacity:0;}
      .avatar-image-container {background:url(URL DEL AVATAR ANONIMO) no-repeat scroll 50% 50% !important;
      }

      Eliminar
    2. Pandora Verdandi20/2/16

      Muchísimas gracias por la ayuda. Ya he podido solucionarlo :)

      Eliminar
    3. Cambio-Cambie2/3/16

      Me alegro

      Eliminar
  3. Anónimo18/7/19

    perdona, pero busque en todo mi platilla y no encuentro " /* Comments " no sera alguna otra cosa para buscar?

    ResponderEliminar
  4. lazaro hdz8/1/21

    Hsbbssb

    ResponderEliminar

▬ Antes de comentar recuerda:▬
► No se permite spam.
► No permitimos un vocabulario inapropiado.
► Se se lo más especifico posible.

►Para convertir tu comentario en HTML puedes utilizar algunos códigos:
- Si deseas incluir un enlace utiliza este código:<a href="URL de la Pagina">Titulo del enlace</a>
- Para introducir un código, utilice la etiqueta <i rel="pre"> AQUÍ TU CÓDIGO ... </i>
- Para insertar una imagen, utilice la etiqueta <i rel="image"> SU URL IMAGEN AQUÍ ... </i>
- Para insertar un título, utilice la etiqueta <b rel="h3"> SU TÍTULO AQUÍ ... </b>
- Para insertar una nota, utilice la etiqueta <b rel="quote"> NOTA QUE AQUÍ ... </b>
- Para insertar texto en negrita, utilice la etiqueta <b> SU TEXTO AQUÍ ... </b>
- Para insertar texto en cursiva, utilice esta etiqueta<i> SU TEXTO AQUÍ ... </i>

No olvides suscribirte para recibir las actualizaciones

Back to Top