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!

7 comentarios:

▬ 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