Cómo hacer foto de perfil "sobre mi" redondo

9.10.14


Para hacer este tutorial debes de tener en tu blog el gadget de perfil

Paso 1:  vamos a nuestro panel de blogger plantilla editar HTML
Paso 2: Clic en los puntos suspensivos donde dice  <b:skin>… </b:skin>
Paso 3: buscar:  .post-body img  (presionar la tecla Ctrl y F al mismo tiempo, se abrira del lado derecho una cajita de búsqueda)
Paso 4: Aparecerá marcado dos veces con amarillo, borrar todo, como se ve en la siguiente imagen.











Paso 5: Luego de borrar el código anterior pegar este código

/* Perfil  redondo
----------------------------------------------- */
.widget.Profile .widget-content>a img.profile-img {
float: center;
min-width: 100px!important;
min-height: 100px!important;
max-width: 100px;
border-radius: 100px;
float: center;
}
.widget.Profile {
text-align: center;
float: center;
margin: auto;
}
/* perfil redondo
----------------------------------------------- */

Paso 6: guardar plantilla
 Hacer mas grande la imagen: solo se deben de cambiar los valores  que coloque de color rojo. En todos tiene que tener el mismo valor.
*Este código esta en http://www.everylittlepolish.com/

  • Hemos finalizado! El resultado es muy bonito ♥ 

  • Y ustedes lo van a usar en su blog? yo no me resisti y lo estoy usando! Me ha gustado el resultado!!




más post bonitos que de seguro te van a interesar

36 comentarios

  1. ¡Me encanta el blog! Es muy útil y sencillo...
    ¡Gracias por este blog digno de premio!
    1 saludo compañera :-)

    ResponderBorrar
    Respuestas
    1. Hola, gracias! Espero te sirva este tutorial ♥
      Feliz día!

      Borrar
  2. jooo por mas que lo busco no lo encuentro :( con lo bien que lo tienes explicado, para una vez que me entero!!!jajaja

    un besazo guapisima ;)

    ResponderBorrar
  3. Respuestas
    1. De nada Alicia! Espero te sea útil! Feliz dia ♥

      Borrar
  4. Hecho, me encanta como queda) Muchas gracias)
    Un saludo.

    ResponderBorrar
  5. Acabo de cambiar la plantilla y ya no encuentro este post-body img ... que hago?

    ResponderBorrar
    Respuestas
    1. Ho,a, Olga! Perdón sali de viaje y hasta ahora regrese, solucionaste tu problema?

      Borrar
  6. hola! quisiera saber si hay alguna forma que la foto de perfil sea un poco mas grande.. sea redondeado o cuadrada, la cosa es que esta muy chiquita :(

    ResponderBorrar
    Respuestas
    1. Hola! pues puedes hacerla más grande redonda, arriba lo explico. cambia todos los valores en rojo , los 4 valores deben de tener la misma cantidad..

      Borrar
    2. muchisimas gracias! otra preguntilla, si quiero la foto cuadrada pero mas grande, cual seria el codigo? he buscado como loca pero no encuentro ni un tutorial!
      Gracias de ante mano!!!!
      saludos

      Borrar
    3. Hola, bueno, si has copiado este código pues solo borrale el : border-radius: y listo, la imagen te queda cuadrada y ya l ahaces más grande con los otros valores

      Borrar
    4. Muchisisisisisimas gracias! eres un amor de persona!! :D enserió te lo agradezco! un montón!
      Haber si puedes hacer un tutorial de como hacer la barra de "paginas" quede arriba y fija, como la tuya
      esa verde agua en donde tienes inicio y cuando bajas esta barra baja contigo! esta genial. ojalas puedas compartirlo
      porque me he partido el coco buscando tutoriales de como hacerlos y no lo he encontrado!
      un abrazote!!!
      GRACIIIIAAAAS :D

      Borrar
    5. Hola, hola! Que alegre que al fin te resulto :D!
      Bueno, no sé aun si pueda compartirlo es demasiado grande el código! pero lo tendré en cuenta

      Borrar
  7. Tu blog me ha sido muy útil, muchas gracias por postear todos estas entradas :) Tengo un pequeño problema, no me sale el .post-body img... No sé cómo hacer en ese caso :(

    ResponderBorrar
    Respuestas
    1. Hola, me alegra que el blog te sea de ayuda! Dejame la dirección de tu blog para ver en tu caso que palabra buscar :/

      Borrar
  8. no encuentro post mg :( y no me sale el buscador...

    ResponderBorrar
  9. Hola Wendy! descubrí tu página hace unos días y estoy encantada, es una pasada y estoy aprendiendo un montón de cosas! muchísimas gracias por compartir tanta información tan útil! Acabo de hacer este tutorial y ya tengo mi foto redonda, pero tengo un plan de problemitas, por un lado no me deja cambiarle el tamaño, cuando cambio el valor no cambia el tamaño del círculo. Por otro lado se me queda la foto a la izquierda, y no centrada como la tuya... ¿Sabes que puedo estar haciendo mal? Muchas gracias!!!

    ResponderBorrar
    Respuestas
    1. Hola, hola! Bienvenida al blog, me alegra muchísimo saber que te es útil.
      He ido a tu blog y para centrar la imagen debes de buscar donde dice: /* float: left; */ cambiar el left y escribes right y asi se centrara la imagen.

      Borrar
    2. Al parecer tienes dos códigos para el perfil así que tienes que buscar : .profile-img { y abajo te va aparecer esta liena: /* float: left;

      Borrar
  10. Hola. acabo de seguir este tutorial y lo que me ha convertido todas las imágenes que he subido a mi blog en redondas como la foto de perfil :(, ahora no se como volver atrás.......me ayudas??

    ResponderBorrar
    Respuestas
    1. Hola, acabo de regresar de tu blog, creo ya lo solucionaste?

      Borrar
  11. Jo, pués no me ha funcionado. Lo he hecho todo peeeeeeeeeeeero sigue saliendo cuadrada la foto :(

    Alguna sugerencia?

    ResponderBorrar
    Respuestas
    1. Hola, he ido a tu blog y hasta abajo de todo tu blog la he encontrado, la imagen y si esta redonda ?

      Borrar
  12. ¿Cómo se hace para que la foto esté en el sidebar como primer gadget como la tienes tu?

    Gracias por leerme guapa.

    ResponderBorrar
    Respuestas
    1. ¡Hola! bueno , no sé si entendí bien pero para tener de primero el gadget de perfil como la foto, solo debes de arrastrar el gadget hasta el inicio y ¡listo!

      Borrar
  13. No sabes cuanto queria saber como poner la imagen en circulo jjaja lo he hecho y ha resultado bien, pero al parecer tengo otro problema, la imagen se ve muy borrosa y no se como solucionarlo, tu sabes como podria arreglar la imagen para que se vea nitida? :)

    ResponderBorrar
    Respuestas
    1. ¡hola, hola! Qué alegre que encuentres la solución en el blog ♥ si se ve borrosa puede ser que la foto es muy pequeña y al aplicarle el código la haga aun poco más grande y pierde su nitidez.

      Borrar
  14. Hola Wendy
    Justo esta imagen la he cambiado hace poquito, la imgen de mi perfil, una breve descripción y mi email lo he unido todo en un gadget de imagen. Pero no me gusta que se vea la foto tan pequeña. Quiero que todo ese conjunto y, sobre todo la foto, se vea más grande. ¿Cómo debo hacerlo?
    Si puedes entrat en mi blog para que veas lo que te explico.
    Muchas gracias.

    ResponderBorrar
    Respuestas
    1. Hola, hola, bueno no sé pero este tutorial no aplica nada a tu caso porque como me comentas tu tienes todo en un gadget de imagen así que la única solución es que edites nuevamente la imagen y hagas tu foto más grande, y hagas más grande la letra porque cuesta leer un poco tu email

      Borrar
    2. Hola
      Sí, lo hice así pero luego siempre me lo pone como máximo a 200px, se reajusta.
      No sé si editarlo de nuevo e ir probando.
      Es que el tamaño que tienes en el tuyo me encanta, así de grande.
      Muchas gracias por contestar.
      Un beso.

      Borrar
    3. Ohh, bueno tal vez puedes ajustar el ancho de tu sidebar es por eso que se ajusta a 200 quizá y cuando guardes el gadget no le des clic al check de → reducir hasta ajustar

      Borrar
  15. Hace como cuatro horas que me estoy rompiendo la cabeza tratando de cambiar el diseño de mi blog, MUCHISIMAS GRACIAS por tu tutorial, no sabes cuanto me ayudo, ya estoy tan frustada que tengo ganas de llorar.

    Me salvaste!

    ResponderBorrar

Gracias por tus comentarios

9.10.14

Cómo hacer foto de perfil "sobre mi" redondo


Para hacer este tutorial debes de tener en tu blog el gadget de perfil

Paso 1:  vamos a nuestro panel de blogger plantilla editar HTML
Paso 2: Clic en los puntos suspensivos donde dice  <b:skin>… </b:skin>
Paso 3: buscar:  .post-body img  (presionar la tecla Ctrl y F al mismo tiempo, se abrira del lado derecho una cajita de búsqueda)
Paso 4: Aparecerá marcado dos veces con amarillo, borrar todo, como se ve en la siguiente imagen.











Paso 5: Luego de borrar el código anterior pegar este código

/* Perfil  redondo
----------------------------------------------- */
.widget.Profile .widget-content>a img.profile-img {
float: center;
min-width: 100px!important;
min-height: 100px!important;
max-width: 100px;
border-radius: 100px;
float: center;
}
.widget.Profile {
text-align: center;
float: center;
margin: auto;
}
/* perfil redondo
----------------------------------------------- */

Paso 6: guardar plantilla
 Hacer mas grande la imagen: solo se deben de cambiar los valores  que coloque de color rojo. En todos tiene que tener el mismo valor.
*Este código esta en http://www.everylittlepolish.com/

  • Hemos finalizado! El resultado es muy bonito ♥ 

  • Y ustedes lo van a usar en su blog? yo no me resisti y lo estoy usando! Me ha gustado el resultado!!




Share to Facebook Share to Pinterest

36 comentarios:

  1. ¡Me encanta el blog! Es muy útil y sencillo...
    ¡Gracias por este blog digno de premio!
    1 saludo compañera :-)

    ResponderBorrar
    Respuestas
    1. Hola, gracias! Espero te sirva este tutorial ♥
      Feliz día!

      Borrar
  2. jooo por mas que lo busco no lo encuentro :( con lo bien que lo tienes explicado, para una vez que me entero!!!jajaja

    un besazo guapisima ;)

    ResponderBorrar
  3. Respuestas
    1. De nada Alicia! Espero te sea útil! Feliz dia ♥

      Borrar
  4. Hecho, me encanta como queda) Muchas gracias)
    Un saludo.

    ResponderBorrar
  5. Acabo de cambiar la plantilla y ya no encuentro este post-body img ... que hago?

    ResponderBorrar
    Respuestas
    1. Ho,a, Olga! Perdón sali de viaje y hasta ahora regrese, solucionaste tu problema?

      Borrar
  6. hola! quisiera saber si hay alguna forma que la foto de perfil sea un poco mas grande.. sea redondeado o cuadrada, la cosa es que esta muy chiquita :(

    ResponderBorrar
    Respuestas
    1. Hola! pues puedes hacerla más grande redonda, arriba lo explico. cambia todos los valores en rojo , los 4 valores deben de tener la misma cantidad..

      Borrar
    2. muchisimas gracias! otra preguntilla, si quiero la foto cuadrada pero mas grande, cual seria el codigo? he buscado como loca pero no encuentro ni un tutorial!
      Gracias de ante mano!!!!
      saludos

      Borrar
    3. Hola, bueno, si has copiado este código pues solo borrale el : border-radius: y listo, la imagen te queda cuadrada y ya l ahaces más grande con los otros valores

      Borrar
    4. Muchisisisisisimas gracias! eres un amor de persona!! :D enserió te lo agradezco! un montón!
      Haber si puedes hacer un tutorial de como hacer la barra de "paginas" quede arriba y fija, como la tuya
      esa verde agua en donde tienes inicio y cuando bajas esta barra baja contigo! esta genial. ojalas puedas compartirlo
      porque me he partido el coco buscando tutoriales de como hacerlos y no lo he encontrado!
      un abrazote!!!
      GRACIIIIAAAAS :D

      Borrar
    5. Hola, hola! Que alegre que al fin te resulto :D!
      Bueno, no sé aun si pueda compartirlo es demasiado grande el código! pero lo tendré en cuenta

      Borrar
  7. Tu blog me ha sido muy útil, muchas gracias por postear todos estas entradas :) Tengo un pequeño problema, no me sale el .post-body img... No sé cómo hacer en ese caso :(

    ResponderBorrar
    Respuestas
    1. Hola, me alegra que el blog te sea de ayuda! Dejame la dirección de tu blog para ver en tu caso que palabra buscar :/

      Borrar
  8. no encuentro post mg :( y no me sale el buscador...

    ResponderBorrar
  9. Hola Wendy! descubrí tu página hace unos días y estoy encantada, es una pasada y estoy aprendiendo un montón de cosas! muchísimas gracias por compartir tanta información tan útil! Acabo de hacer este tutorial y ya tengo mi foto redonda, pero tengo un plan de problemitas, por un lado no me deja cambiarle el tamaño, cuando cambio el valor no cambia el tamaño del círculo. Por otro lado se me queda la foto a la izquierda, y no centrada como la tuya... ¿Sabes que puedo estar haciendo mal? Muchas gracias!!!

    ResponderBorrar
    Respuestas
    1. Hola, hola! Bienvenida al blog, me alegra muchísimo saber que te es útil.
      He ido a tu blog y para centrar la imagen debes de buscar donde dice: /* float: left; */ cambiar el left y escribes right y asi se centrara la imagen.

      Borrar
    2. Al parecer tienes dos códigos para el perfil así que tienes que buscar : .profile-img { y abajo te va aparecer esta liena: /* float: left;

      Borrar
  10. Hola. acabo de seguir este tutorial y lo que me ha convertido todas las imágenes que he subido a mi blog en redondas como la foto de perfil :(, ahora no se como volver atrás.......me ayudas??

    ResponderBorrar
    Respuestas
    1. Hola, acabo de regresar de tu blog, creo ya lo solucionaste?

      Borrar
  11. Jo, pués no me ha funcionado. Lo he hecho todo peeeeeeeeeeeero sigue saliendo cuadrada la foto :(

    Alguna sugerencia?

    ResponderBorrar
    Respuestas
    1. Hola, he ido a tu blog y hasta abajo de todo tu blog la he encontrado, la imagen y si esta redonda ?

      Borrar
  12. ¿Cómo se hace para que la foto esté en el sidebar como primer gadget como la tienes tu?

    Gracias por leerme guapa.

    ResponderBorrar
    Respuestas
    1. ¡Hola! bueno , no sé si entendí bien pero para tener de primero el gadget de perfil como la foto, solo debes de arrastrar el gadget hasta el inicio y ¡listo!

      Borrar
  13. No sabes cuanto queria saber como poner la imagen en circulo jjaja lo he hecho y ha resultado bien, pero al parecer tengo otro problema, la imagen se ve muy borrosa y no se como solucionarlo, tu sabes como podria arreglar la imagen para que se vea nitida? :)

    ResponderBorrar
    Respuestas
    1. ¡hola, hola! Qué alegre que encuentres la solución en el blog ♥ si se ve borrosa puede ser que la foto es muy pequeña y al aplicarle el código la haga aun poco más grande y pierde su nitidez.

      Borrar
  14. Hola Wendy
    Justo esta imagen la he cambiado hace poquito, la imgen de mi perfil, una breve descripción y mi email lo he unido todo en un gadget de imagen. Pero no me gusta que se vea la foto tan pequeña. Quiero que todo ese conjunto y, sobre todo la foto, se vea más grande. ¿Cómo debo hacerlo?
    Si puedes entrat en mi blog para que veas lo que te explico.
    Muchas gracias.

    ResponderBorrar
    Respuestas
    1. Hola, hola, bueno no sé pero este tutorial no aplica nada a tu caso porque como me comentas tu tienes todo en un gadget de imagen así que la única solución es que edites nuevamente la imagen y hagas tu foto más grande, y hagas más grande la letra porque cuesta leer un poco tu email

      Borrar
    2. Hola
      Sí, lo hice así pero luego siempre me lo pone como máximo a 200px, se reajusta.
      No sé si editarlo de nuevo e ir probando.
      Es que el tamaño que tienes en el tuyo me encanta, así de grande.
      Muchas gracias por contestar.
      Un beso.

      Borrar
    3. Ohh, bueno tal vez puedes ajustar el ancho de tu sidebar es por eso que se ajusta a 200 quizá y cuando guardes el gadget no le des clic al check de → reducir hasta ajustar

      Borrar
  15. Hace como cuatro horas que me estoy rompiendo la cabeza tratando de cambiar el diseño de mi blog, MUCHISIMAS GRACIAS por tu tutorial, no sabes cuanto me ayudo, ya estoy tan frustada que tengo ganas de llorar.

    Me salvaste!

    ResponderBorrar

Gracias por tus comentarios