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!!
36 comentarios
¡Me encanta el blog! Es muy útil y sencillo...
ResponderBorrar¡Gracias por este blog digno de premio!
1 saludo compañera :-)
Hola, gracias! Espero te sirva este tutorial ♥
BorrarFeliz día!
jooo por mas que lo busco no lo encuentro :( con lo bien que lo tienes explicado, para una vez que me entero!!!jajaja
ResponderBorrarun besazo guapisima ;)
Hola Carol! cual no encuentras :( ! Te ayudo?
BorrarMuy buen tutorial!
ResponderBorrar¡Gracias!
De nada Alicia! Espero te sea útil! Feliz dia ♥
BorrarHecho, me encanta como queda) Muchas gracias)
ResponderBorrarUn saludo.
Que bien! si queda muy bonito ! ♥
BorrarAcabo de cambiar la plantilla y ya no encuentro este post-body img ... que hago?
ResponderBorrarHo,a, Olga! Perdón sali de viaje y hasta ahora regrese, solucionaste tu problema?
Borrarhola! 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 :(
ResponderBorrarHola! 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..
Borrarmuchisimas 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!
BorrarGracias de ante mano!!!!
saludos
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
BorrarMuchisisisisisimas gracias! eres un amor de persona!! :D enserió te lo agradezco! un montón!
BorrarHaber 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
Hola, hola! Que alegre que al fin te resulto :D!
BorrarBueno, no sé aun si pueda compartirlo es demasiado grande el código! pero lo tendré en cuenta
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 :(
ResponderBorrarHola, me alegra que el blog te sea de ayuda! Dejame la dirección de tu blog para ver en tu caso que palabra buscar :/
Borrarno encuentro post mg :( y no me sale el buscador...
ResponderBorrarHola, lo has conseguido? perdón la demora
BorrarHola 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!!!
ResponderBorrarHola, hola! Bienvenida al blog, me alegra muchísimo saber que te es útil.
BorrarHe 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.
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;
BorrarHola. 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??
ResponderBorrarHola, acabo de regresar de tu blog, creo ya lo solucionaste?
BorrarJo, pués no me ha funcionado. Lo he hecho todo peeeeeeeeeeeero sigue saliendo cuadrada la foto :(
ResponderBorrarAlguna sugerencia?
Hola, he ido a tu blog y hasta abajo de todo tu blog la he encontrado, la imagen y si esta redonda ?
Borrar¿Cómo se hace para que la foto esté en el sidebar como primer gadget como la tienes tu?
ResponderBorrarGracias por leerme guapa.
¡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!
BorrarNo 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¡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.
BorrarHola Wendy
ResponderBorrarJusto 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.
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
BorrarHola
BorrarSí, 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.
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
BorrarHace 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.
ResponderBorrarMe salvaste!
Gracias por tus comentarios