Ir al contenido principal

Personalizar avatares en los comentarios

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%;
}

También
Podés darle al avatar un efecto de zoom con rotación al pasar en cursor por ensima.
Seguido de lo anterior agregar:

.avatar-image-container:hover {
z-index:999999;
border: 4px solid white;
-webkit-transform: rotate(-5deg) scale(1.4) skew(1deg) translate(0px);
-moz-transform: rotate(-5deg) scale(1.4) skew(1deg) translate(0px);
-o-transform: rotate(-5deg) scale(1.4) skew(1deg) translate(0px);
-moz-transition: 0.8s;
-webkit-transition: 0.8s;
-o-transition: 0.8s;
transition: 0.8s;
}


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 */
}

También
Podés darle al avatar un efecto de zoom con rotación al pasar en cursor por ensima.
Seguido de lo anterior agregar:

.avatar-image-container:hover {
z-index:999999;
border: 4px solid white;
-webkit-transform: rotate(-5deg) scale(1.4) skew(1deg) translate(0px);
-moz-transform: rotate(-5deg) scale(1.4) skew(1deg) translate(0px);
-o-transform: rotate(-5deg) scale(1.4) skew(1deg) translate(0px);
-moz-transition: 0.8s;
-webkit-transition: 0.8s;
-o-transition: 0.8s;
transition: 0.8s;
}

Después Guardar Plantilla y listo.
Invitame un café en cafecito.app

Comentarios

  1. Anónimo25/2/12

    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

    ResponderEliminar
  2. Anónimo25/2/12

    quisiera saber como implementaste el juego de angry bird en la imagen, como pudisteis ponerle el javacsript a la imagen.
    Gracias

    ResponderEliminar
    Respuestas
    1. 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.

      Eliminar
  3. Me 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.

    ResponderEliminar
    Respuestas
    1. Hola. 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.

      Eliminar
    2. Gracias 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 :)

      Eliminar
    3. De nada BooksVzla. Gracias por visitar mi web. Saludos

      Eliminar
  4. Gracias Lucas, gracias por compartir, pero tengo un problemita en mi blog: la imagen del ávatar no cubre completamente el contenedor, ¿puedes ayudarme?

    ResponderEliminar
  5. Ya actualizé la entrada para que no se produzca ese problema, EL GARRICK. Intenta volver a copiar los estilos y seguramente se solucionará. Saludos

    ResponderEliminar
  6. Gracias =) lo haré y aprovecho para preguntarte si tienes un banner de tu blog para incluirlo en el mío.

    ResponderEliminar
    Respuestas
    1. Gracias 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.

      Eliminar
    2. Por 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.

      Eliminar
    3. No 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

Publicar un comentario

Más leído

Galería de Imágenes Simple, con Javascript y CSS

¡Hola! Ya extrañaba escribir en mi blog. Vuelvo con esta genial galería de imágenes que es muy fácil de insertar y es súper simple. Sólo es necesario insertar el HTML, y decorarlo un poco con CSS, veamos: <div id="galeria"> <div id="galeria_imagen"> <img id="imgGaleria" src=" URL-IMAGEN-POR-DEFECTO " /></div> <div id="galeria_miniaturas"> <img class="miniatura" onclick="javascript:document.getElementById('imgGaleria').src=this.src;" src=" URL-IMAGEN-1 " /> <img class="miniatura" onclick="javascript:document.getElementById('imgGaleria').src=this.src;" src=" URL-IMAGEN-2 " /> <img class="miniatura" onclick="javascript:document.getElementById('imgGaleria').src=this.src;" src=" URL-IMAGEN-3 " /> <img class="miniatura" onclick="javascript:document.getEle

Ventana flotante con botón cerrar

Esto será algo muy útil cuando debas dejar algún mensaje o aviso para tus lectores. Se trata de una ventanita, con apariencia similar a las de Windows, que es flotante y tiene la opción de cerrar con un efecto fade utilizando un botón. Insertarla es muy simple, sólo pega este código en un gadget HTML/Javascript y puedes cambiar algunos valores para personalizar la ventana a tu gusto. <div id='ventana-flotante'>    <a class='cerrar' href='javascript:void(0);' onclick='document.getElementById(&apos;ventana-flotante&apos;).className = &apos;oculto&apos;'>x</a>    <div id='contenedor'>        <div class='contenido'> Aquí va el mensaje.        </div>    </div> </div> <style> #ventana-flotante { width: 360px;   /* Ancho de la ventana */ height: 90px;   /* Alto de la ventana */ background: #ceffad;   /* Color de fondo */ position: fixed; top: 200 px; left: 50%;

Tabs, menú de contenidos con pestañas. Versión CSS

Seguro conocerás este sistema de pestañas, que nos permite mostrar de manera alternativa distintos contenidos en un mismo espacio. Hay distintas versiones como con jQuery , o utilizando CSS, más específicamente la pseudoclase :target . Aquí veremos como obtener un resultado similar, pero utilizando la pseudoclase :checked. Comencemos con la estructura. <div id="contenedor">     <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />     <label for="tab-1" class="tab-label-1"> Pestaña1 </label>         <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />     <label for="tab-2" class="tab-label-2"> Pestaña2 </label>         <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />    

Efecto biselado con CSS

Utilizando CSS, podemos crear un efecto de biselado para utilizar en botones, mensajes, contenedores o lo que se les ocurra. Veremos 2 formas de aplicar este efecto, una utilizando bordes y otra implementando la propiedad box-shadow . Con los bordes, encontraremos una forma más tradicional que nos permite que los bordes inferior y lateral derecho sean más oscuros simulando relieve. HTML <div class="biselado"> Texto </div> Hola, soy un cuadro con outset. .biselado { background: #2323ff ;   /* Fondo, debe ser más claro que el borde */ border: 5px outset #4444ff ;   /* Grosor del Borde */   /* Color del Borde */ color: white ;   /* Color del texto */ text-align: center ;   /* Alineación del texto */ text-shadow: -1px -1px rgba(0,0,0,.2); } O podemos lograr el efecto contrario, reemplazando la palabra outset que se encuentra antes del color del borde por inset . Hola, soy un cuadro con inset. Veamos ahora una manera más efectva de simul

Botón circular 3D realista con CSS

El secreto está en la propiedad box-shadow . Luego border-radius para darle forma y ya lo obtenemos. See the Pen Botón tridimensional realista. by Lucas Maidana ( @LucasMaidana ) on CodePen . El HTML típico de un botón. <a class='boton' href='URL-DEL-BOTON'></a> Y el CSS. .boton {   background: url( http://www.ashleyjt.net/windows/images/Android.png )  /* Url de la imagen */  no-repeat center center, #62BC0F /* Color del botón */ ; background-size: 60%;  /* Tamaño de la imagen */   height: 200px;   /* Alto del botón */   width: 200px;   /* Ancho del botón */   display: table;   border-radius: 100%;   cursor: pointer;     box-shadow: /* Sombras externa */ inset 0 10px 15px rgba(255,255,255,.35), inset 0 -10px 15px rgba(0,0,0,.05), inset 10px 0 15px rgba(0,0,0,.05), inset -10px 0 15px rgba(0,0,0,.05), /* Sombra interna */ 0 5px 20px rgba(0,0,0,.1); } /* Al presionar */ .boton:active {   box-shadow: inset 0 5px 30px rgba(0,0,0,.2);  /* S

Texto con borde

¿TEXTO CON BORDE? ¿Posible hacerlo sólo con CSS? SI ES POSIBLE NOTA : Esta propiedad no es compatible con todos los navegadores. Se recomienda Chrome o Firefox. Para lograrlo, debemos aplicar la propiedad text-shadow  para lograr muchas sombras del mismo color simulando un sólo borde. A <div class="texto1"> Texto </div> le aplicaremos: .texto1 { color:white;   /* Color del texto */ text-shadow: 1px 1px 0 blue ,                   -1px -1px blue ,                    1px -1px blue ,                   -1px 1px blue ,                    0 1px blue ,                    1px 0 blue ,                   -1px 0 blue ,                    0 -1px blue ; } Puedes cambiar blue por el color que desees. Aquí mas ejemplos. borde .texto2 { color:#AAFFB1; background:#AAFFB1; padding:20px 80px; text-shadow: 1px 1px 0 #2F7235, -1px -1px #2F7235, 1px -1px #2F7235, -1px 1px #2F7235, 0 1px #2F7235, 1px 0 #2F7235, -1px 0 #2F7235, 0 -1px #2F7235; } texto .