ENMARCAR Y SEPARAR COMENTARIOS EN BLOGGER!!!

Hola!! Ya estoy de vuelta por aquí con un nuevo tutorial como enmarcar y separar comentarios en blogger.

Si como habéis leído, es muy sencillo y fácil, la verdad que ya os digo que no os pondría nada que fuera difícil, siempre quiero que diseñéis vuestro blog lo más sencillo y fácil posible, así que aquí estoy yo para ayudaros con ello. Este tutorial es muy sencillo más de lo que vosotros/as pensáis, parece complicado pero no lo es para nada. Os enseñaré diferentes formas de hacerlo y es muy fácil de verdad que yo no pongo nada complicado, al revés siempre para que sea más llevadero... Lo primero que os voy ha enseñar es como poner una ralla debajo de cada uno de los comentarios y a separarlos y muchísimas cosas más. Pero para eso tenéis que prestar atención, ha estos tutoriales. 

 

-.Para tener los comentarios del blog de este modo tenéis que poner el siguiente código y hacer lo siguiente. 

Abrir personalizar plantilla- Añadir CSS y el código de aquí abajo!

.comments .comment-block {
padding-bottom:10px;
border-bottom:1px solid #240B3B; /* Borde de los comentarios */
}
.comments .comments-content .datetime { /* Fecha de los comentarios */
font-style:italic;
font-size:9px;

}

-Para poner imagen en el separador de comentarios es más sencillo todavía y sin complicaciones. 

.comments .comment-block {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs0GMMIpyHf9aIFF6anA4_A5MwGzioh2Yc2PbvQUq5NoFLZizk_J_hF2Km51WqgMvgwPlPHMXiKiQDbFoLDMGvqV5gkYWpgOK9hQf6WK8QzMv2-NShZ-3Iq1CRFHQ9Uuex5rDR1_tO-lk/);
background-repeat:no-repeat;
background-position:center bottom;
padding-bottom:20px;
height:70px;
}
.comments .comments-content .datetime { /* Fecha de los comentarios */
font-style:italic;
font-size:9px;
}

-Lo que está en azul, es la URL de la imagen pero vosotros la podéis cambiar por cualquier otra.

En está ocasión el código ya es diferente, y hay que ponerlo de forma distinta, pero es muy sencillo también y fácil de poner.  

Para conseguir este tipo de estilo marca la casilla Expandir plantillas de artilugios ahí mismo en Diseño | Edición de HTML y busca esta línea:

<b:loop values='data:post.comments' var='comment'>

Debajo de ella agrega esto:

<div class='comentarios-cb'>

Luego busca un poco más abajo el siguiente </b:loop> que encuentres y justo arriba de él agrega esto:

</div>

Ahora antes de ]]></b:skin> pega lo siguiente:

.comentarios-cb {

background:#E6E6E6; /* Color de fondo */

border-top:1px solid #240B3B; /* Borde superior */

border-bottom:1px solid #240B3B; /* Borde inferior */

margin-bottom:20px;

}

.comment-body {

padding:10px;

color:#000; /* Color de los comentarios */

}

.comment-timestamp { /* Fecha de los comentarios */

font-style:italic;

font-size:9px;

padding-right:10px;

padding-left:10px;

}

#comments-block .comment-footer {

margin-bottom:5px;

}

#comments-block .avatar-image-container {

float:left;

position:static;

margin-right:15px;

margin-left:5px;

margin-top:5px;

}

Pero, si os es más fácil directamente podéis poner el ultimo código este de arriba en CSS, y así podéis cambiarlo todo a vuestro gusto y antojo.