ACTUALIZADO
Para que los avatares de los comentarios queden más atractivos, la mejor manera es agregándoles estilos. Acá les dejo dos opciones para personalizarlos:OPCIÓN 1: CIRCULAR
Vamos a Edición de HTML y buscamos la línea ]]></b:skin> y justo antes pegamos:
.comments .avatar-image-container, .comments .avatar-image-container img { {
max-width:60px !important; /*Ancho */
width:60px !important; /*Ancho */
max-height:60px !important; /*Alto */
height:60px !important; /*Alto */
}
.comments .avatar-image-container {
overflow: hidden;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVWFo0iNPE6mzTvGAWQ0SKJM0_Ql5yPrSbC-iHhTeRTFaNeZO8_VsusBtx0pdSMjfEZm5r8yCJjvGNf7m0vZapVX7CYamn3C-7JCoAeAPiHaeUNrp1v6-1MdNZEHYrWayYcEnViZaImJo/s1600/avatar+anonimo.png); /*Imágen de autor anónimo */
box-shadow: 1px 1px 1px 0 #ccc; /*Color de sombra */
-moz-transition: 0.8s;
-webkit-transition: 0.8s;
-o-transition: 0.8s;
transition: 0.8s;
border: 4px solid white; /*Borde del contenedor de avatar */
border-radius:50%;
}
OPCIÓN 2: CUADRADO
Antes de ]]></b:skin> pegás:
.comments .avatar-image-container {
width: 60px; /*Ancho del contenedor debe ser igual a ancho de imagen */
height: 60px; /*Alto del contenedor debe ser igual a ancho de imagen */
max-height: 60px;
overflow: hidden;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVWFo0iNPE6mzTvGAWQ0SKJM0_Ql5yPrSbC-iHhTeRTFaNeZO8_VsusBtx0pdSMjfEZm5r8yCJjvGNf7m0vZapVX7CYamn3C-7JCoAeAPiHaeUNrp1v6-1MdNZEHYrWayYcEnViZaImJo/s1600/avatar+anonimo.png); /*Imágen de autor anónimo */
box-shadow: 1px 1px 1px 0 #ccc; /*Color de sombra */
-moz-transition: 0.8s;
-webkit-transition: 0.8s;
-o-transition: 0.8s;
transition: 0.8s;
border: 4px solid white; /*Borde del contenedor de avatar */
}
.comments .avatar-image-container img {
width: 60px; /*Ancho de la imagen debe ser igual a ancho del contenedor */
height: 60px; /*Alto de la imagen debe ser igual a ancho del contenedor */
}
width: 60px; /*Ancho del contenedor debe ser igual a ancho de imagen */
height: 60px; /*Alto del contenedor debe ser igual a ancho de imagen */
max-height: 60px;
overflow: hidden;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVWFo0iNPE6mzTvGAWQ0SKJM0_Ql5yPrSbC-iHhTeRTFaNeZO8_VsusBtx0pdSMjfEZm5r8yCJjvGNf7m0vZapVX7CYamn3C-7JCoAeAPiHaeUNrp1v6-1MdNZEHYrWayYcEnViZaImJo/s1600/avatar+anonimo.png); /*Imágen de autor anónimo */
box-shadow: 1px 1px 1px 0 #ccc; /*Color de sombra */
-moz-transition: 0.8s;
-webkit-transition: 0.8s;
-o-transition: 0.8s;
transition: 0.8s;
border: 4px solid white; /*Borde del contenedor de avatar */
}
.comments .avatar-image-container img {
width: 60px; /*Ancho de la imagen debe ser igual a ancho del contenedor */
height: 60px; /*Alto de la imagen debe ser igual a ancho del contenedor */
}
Después Guardar Plantilla y listo.
Hola me podrías decir como puedo introducir esto en wordpress, me agrada mucho este efecto redondeado, lo quisiera implementar en este blog www.the-genuine.com
ResponderEliminarquisiera saber como implementaste el juego de angry bird en la imagen, como pudisteis ponerle el javacsript a la imagen.
ResponderEliminarGracias
Muy pronto publicaré una entrada para explicar cómo añadir ese gadget a vuestro blog. Sólo estate atento a mis publicaciones. Gracias por tu aporte.
EliminarMe encanta, gracias por compartirlo. Solo una pregunta, cómo obtienes el estilo que actualmente presentas en tus comentarios; ya mencionaste como cambiar el avatar, pero cómo hago lo demás.
ResponderEliminarHola. El estilo que actualmente se aplica en los comentarios, los extraje del código fuente del blog Oloblogger, de Oloman. ¿Qué tal si visitas su sitio y se lo pides a él? Lo que te puedo decir es él lo llama "Estilo bocadillo cómic". Espero él te sepa ayudar. Saludos y gracias por comentar y visitar mi blog.
EliminarGracias por la información, ya lo había visto en Oloblogger, pero como vi el tuyo antes de abrir el de él, te pregunte a ti primero :)
EliminarDe nada BooksVzla. Gracias por visitar mi web. Saludos
EliminarGracias Lucas, gracias por compartir, pero tengo un problemita en mi blog: la imagen del ávatar no cubre completamente el contenedor, ¿puedes ayudarme?
ResponderEliminarYa actualizé la entrada para que no se produzca ese problema, EL GARRICK. Intenta volver a copiar los estilos y seguramente se solucionará. Saludos
ResponderEliminarGracias =) lo haré y aprovecho para preguntarte si tienes un banner de tu blog para incluirlo en el mío.
ResponderEliminarGracias por querer agregar un banner en tu sitio. Cuando tenga tiempo me tomaré unos minutos para poder confeccionar algunos banners. Contactaré contigo para cuando los tenga. Gracias.
EliminarPor lo pronto agregaré un link sencillo en espera de tu banner. Ya subí la entrada actualizada y el ávatar sale a la mitad: http://www.camaparados.com/2012/02/aqui-iniciamos.html seguramente es cosa de mi plantilla, modifiqué los colores mientras ubico el problema. Gracias.
EliminarNo sirve, bueno mejor dicho no me funka me deja el mismo problema de ELGARRICK, sera q este codigo no sirve por tener los comentarios anidados. Chekea bien esto porfas.
Eliminar