Personalizar comentarios en Blogger



Para incluirlo este estilo de Comentarios personalizados en nuestro blog de Blogger ir a:

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

]]></b:skin>
Arriba de esta linea pegar

 /* Caja del comentario
-----------------------*/
.comment-content{
background:#FF4848;
padding:13px;
border-radius:10px;
color:#FFFFFF; }
h4{/* Titulo "No hay comentarios/Nro Cometarios" */
border-radius: 10px;
background:#FF4848;
text-align:center;
color:#FFFFFF;
text-shadow: 0px 0px 3px #FFFFFF;
}
.user {/* Nombre del usuario */
background: #FAF1F1;
padding: 7px;
margin-left: 10px;
border-radius: 10px 10px 0 0;
}
.icon {
background: transparent;
}
.comment-block{/* Caja */
position:static !important; /* Mantiene el Avatar delante */
background:#FFBBBB ;/* Color de Fondo de la Caja */
padding:10px;
border-radius: 15px 15px 15px 15px;
}
.comment-block a{/* Links de la caja*/
font-weight: normal;
}
.avatar-image-container{/* Contorno de los avatares */
background:#FFBBBB;
padding:5px;
border-radius:50% 50% 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%;
}
.avatar-image-container img:hover{/* Avatares de comentarios "HOVER" con rotacion*/
border-radius:50%;
transform: rotate(360deg) ;
-webkit-transform: rotate(360deg) ;
-moz-transform: rotate(360deg) ;
-o-transform: rotate(360deg) ;
-ms-transform: rotate(360deg) ;
}
.secondary-text a{/* Links Fecha/Responder/Eliminar */
color: #FF4848;
padding: 3px;
background:#FAF1F1;
float: center;
border-radius:5px;
text-shadow: none;
}
.comments .continue a {
background:#FF4848 !important;
color:#fff !important;
float:right!important ;
padding:2px 2px!important;
height:18px;
line-height:10px !important;
margin-top:-1px !important;
text-shadow:0 0 !important;
box-shadow:inset 0 1px 2px #fff;
}
.comments .continue a:hover {
font-style: normal !important;
color: #000 !important;
text-decoration: none;
}
Al terminar Guardar plantilla.



Si te gusta la entrada compártela.

¡Gracias!

5 comentarios:

  1. Gracias por el aporte amigo !

    ResponderEliminar
    Respuestas
    1. De nada gracias por visitar este espacio.

      Eliminar
  2. Gracias por el aporte. Lo he aplicado con éxito en mi sitio. Un abrazo.

    ResponderEliminar
    Respuestas
    1. Gracias por visitar este sitio, me alegra saber que es útil.

      Eliminar
▬ 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