Eso de borrar alguna imagen por accidente nos suele dar más de un disgusto, pero si encima es precisamente la que representa nuestro avatar, pues el cabreo ya es monumental ¿cómo no se va a ver en mis comentarios la imagen de mi avatar si estoy en mi propio blog?Cuando eso ocurre no os quepa duda que lo sabréis enseguida, pues la señal de dirección prohibida que sale es inconfundible. La tenéis en grande aquí al lado.
El truco (o chapuza) para arreglar esto consiste en hacer una sustitución de imágenes con CSS, algo que aprendí hace muy poquitos días en Kseso CSS y que también sirve para cambiar imágenes en otras circunstancias distintas y no sólo por lo del borrado.
El procedimiento sería el siguiente:
Localizar la URL de la imagen borrada
Primero tenemos que averiguar la dirección de la imagen de nuestro avatar borrado que sigue cargando nuestra plantilla. Esta parte es fácil si tenéis Chrome, ya que sólo habrá que localizar un comentario propio reciente y pinchar sobre la imagen en cuestión (nuestra señal de dirección prohibida) con el botón derecho y accediendo a Inspeccionar elemento enseguida veremos la URL.
Si no disponemos de un inspector de este tipo tendremos que fijarnos en el texto de ese comentario, copiar un segmento significativo y acceder al código fuente. Con él a la vista buscamos ese comentario y lo seguimos hasta el final, dónde encontraremos unos datos etiquetados como timestamp, permalink, author y finalmente avatarUrl. La dirección tras esta última es la que nos interesa.
Si la probáis en el navegador saldrá con la señal de marras, pero esa es la que Blogger va a interpretar siempre que es la nuestra. La copiamos en algún sitio y como en las recetas de cocina, la reservamos para usarla después.
Preparar una nueva imagen
Creamos un nuevo avatar de al menos las mismas dimensiones que use nuestro blog (normalmente 45x45px), alojamos la imagen y conseguimos también la dirección que igualmente reservamos.
Para hacer esto podemos usar directamente Picasa o bien subirla a una entrada en borrador que podemos eliminar sin problemas tras conseguir la URL.
Insertar el CSS
Entre las etiquetas SKIN (lo más abajo posible) o incluso en el Diseñador de plantillas > Avanzado > Añadir CSS, insertamos este segmento de código, sustiyendo URL_BORRADA y URL_NUEVA por esas dos que tenéis guardadas.
.avatar-image-container img[src$="URL_BORRADA"] {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 45px; /* La anchura de la nueva imagen */
height: 45px; /* La altura de la nueva imagen */
padding-left: 45px; /* Igual a la anchura de la nueva imagen */
background: url(URL_NUEVA);
}
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 45px; /* La anchura de la nueva imagen */
height: 45px; /* La altura de la nueva imagen */
padding-left: 45px; /* Igual a la anchura de la nueva imagen */
background: url(URL_NUEVA);
}
En URL_BORRADA ni siquiera hace falta poner la dirección completa, sino sólo el final, pero tened cuidado de que sea una parte significativa para que el navegador no la confunda con otra similar.
Explicación
En teoría tendríamos dos imágenes en el mismo bloque (la de img y la del background) pero la magia la hace ese box-sizing que limita el ancho del contenedor para el avatar a 45px. Al ponerle un padding de esa misma medida y tener prioridad este, el espacio para la imagen original pasa a 0 y esta "desaparece".
Sin embargo el background con la nueva imagen que ocupa precisamente todo el padding se verá perfectamente, simulando la sustitución que pretendíamos. Para más información sobre esto podéis acceder al artículo de Kseso Css.
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Creo que al final terminaré por denunciarte por tanto spam como haces de mi blog en el tuyo xD xD~
ResponderEliminarMejor mete por ahí un enlace al artículo original en css-tricks.
No obstante gracias y muy buena aplicación práctica a blogger del "truquillo"
Un saludo
Joer tío que no puedo estar referenciando en cascada, que tú ya lo hiciste y lo de css-tricks ni lo vi. Y no miento... Yo dónde lo aprendí fue en tu blog.
EliminarBuen truco!
ResponderEliminarHOla Oloman, espero tu puedas ayudarme, mi problema es que compre un dominio en http://www.dominiosplus.com/ y resulta que no puedo poner en blogger, sera que tu puedes decirme como. Ya pregunta a la pagina y lo unico que me responden es aregla las DNS, pero no me dicen como espero tu si puedas ayudarme
ResponderEliminarNo tengo nada publicado sobre eso, pero mira aquí
EliminarUna pregunta, no es relacionada a esta entrada..
ResponderEliminarEn los últimos días he estado intentando cambiar el tamaño de la letra en los comentarios de la caja de blogger, la letra sale muy pequeña y quisiera que fuera mas grande, al igual que los avatares que salen junto a los comentarios, que linea de códigos es la que se encarga de ello?
Hola no se trata de modificar líneas existentes, sino que tienes que añadir las que te hagan falta en tu CSS. Aquí tienes una lista de las clasesz que controlan los comentarios anidados. Seguramente con que añadas las del contenedor general con un font-size, tendrás lo que quieres.
EliminarHola Oloman. Sé que esta consulta no va aquí, pero como es parecida a ver si me puedes decir algo. hay una chica de un blog (yo no la conozco) que por desconocimiento ha borrado todas las imágenes que tenía en su picasa home...evidentemente han desaparecido de su blog y la muchacha preguntaba si alguien sabía qué había pasado(porbrecilla). La cuestión que me parece que no se van a recuperar y tendrá que empezar de nuevo seguramente....porque me parece que no las había conservado en su pc. ¿Sabrías tú si se pueden recuperar de alguna manera?
ResponderEliminarAgradezco de antemano tu respuesta....
No. Lo siento mucho pero no conozco ninguna manera y además me parece que no la vas a encontrar...
EliminarEspera, encontré una cosa pero no sé si será verdad. Que mire en su papelera de Windows a ver si las tiene ahí. Si es así le será fácil recuperarlas, aunque puede que tengan nuevas direcciones.
EliminarHola Oloman. Gracias por tu respuesta.
ResponderEliminarYa estuve mirando ayer por varias páginas y la verdad, creo lo mismo que tú, creo que no lo va a conseguir.
De todas maneras, esto que dices...la papelera de windows? te refieres a la de reciclaje? a la que tenemos en el propio pc? no, verdad? porque yo en mi papelera no he encontrado nunca nada que haya eliminado, por ejemplo, del picasa web.
Te importa decirme a qué te refieres?
Muchísimas gracias
Sí me refiero a esa, pero ya dije que no sabía si era verdad. Lo leí, pero no puedo comprobarlo, así que si dices que no hay nada supongo que sólo funciona cuando se use Picasa sincronizado con el disco duro, al modo de DropBox.
EliminarSí, sí así sí, solo en el caso de que fueran eliminadas desde esa sincronización y directamente de lo que sería Picasa programa...desde el momento en que lo quitas de lo que es Picasa Web(como alojador, claro)ya no va a parar ahí.
EliminarBueno, no te preocupes. Pregunté porque como a veces parece que está todo inventado....pues por si acaso.
La muchacha ya se ha hecho a la idea de que tiene que volver a empezar, y a guardar copia de las imágenes en su disco duro....que nunca se sabe...
Muchísimas gracias por tu interés.
Un cordial saludo
Muchas gracias! Espero que me lo puedan sucio ar, yo loveo conplicado para mi. Yo crei que me ocurrió desde que me di de alta en google+ , ya que antes cuando hacia comentarios me salia la foto que puse en blogger desde un principio.
ResponderEliminarPara mi google + lio, no lo entiendo. Muchas graciad por tu blog. Felicidades
Este comentario ha sido eliminado por el autor.
ResponderEliminarPues no lo sé. Eso también me pasa en una plantilla de pruebas que tengo y la verdad es que también me vuelve loco ese fallo. A mí no me mereció la pena seguir buscando y simplemente configuro de nuevo desde el apartado páginas poniendo la opción de mostrar arriba. O sea, que no te voy a dar solución...
EliminarEste comentario ha sido eliminado por el autor.
EliminarEste comentario ha sido eliminado por el autor.
EliminarBueno, eso si el diseño te lo permite...
Eliminar¡¡¡AUXILIO OLOMAN!!!, Blogger ahora no permite publicar entradas sin título. Cuando estás haciendo una entrada que no poseé título y deseas publicarla te dice "Required field must not be blank", una advertencia que es imposible de saltarla. Yo tengo muchas entradas a las cuales no les coloco título por razones de diseño, esto me ha complicado la vida. Cuéntame que puedo hacer para seguir publicando entradas sin título. GRACIAS¡¡¡
ResponderEliminarYa lo solucioné, es cuestión de añadir un espacio. Espero que los de Blogger no se aviven y nos cag... con esto también.
ResponderEliminarGracias amigo!, ME SALVASTE!
EliminarEs que no tiene mucho sentido publicar entradas sin título y yo pienso que es un "control" para que no publiquemos por accidente sin ellas. Pero siempre hay casos especiales como ahora te pasa a tí, así que enhorabuena por encontrar una solución fácil.
EliminarOloman, mi diseño de página es bastante complicado y yo el gral soy bastante complicado. Visita mi blog y verás porque muchas de las entradas no poseen título. A veces es una cuestión de diseño, debido a que no en todas mis publicaciones acepto comentarios y estos están bloqueados, a no ser que filtre por etiquetas. No sé si me explico.
EliminarHola: mi problema es que borré la imagen de mi perfil del google que era la que salía en los comentarios del blog y me quedé sin imagen en los comentarios. Ahora he puesto un nuevo perfil pero sigo sin imagen en los comentarios. He hecho lo que tú explicas con el CSS poniendo la url de la imagen borrada y de la imagen nueva pero no me resulta. ¿qué estaré haciendo mal? Muchísimas gracias
ResponderEliminarNo sé, sólo se me ocurre que pongas mal la imagen borrada. En tu caso es esta:
Eliminarhttp://1.bp.blogspot.com/-PQz7QQ49vWo/T1eS2pdJKpI/AAAAAAAAK4I/O2t3DdWDhkU/s45/LIDIA.jpg
De todas formas en tu blog de Cocina sana y fácil no tienes este código puesto. Prueba que no hace daño si no funciona.
Muchísimas gracias por contestarme. Me fui de vacaciones y no lo había visto pero te diré que lo había hecho y como no dio resultado lo había quitado. Ahora lo he vuelto a hacer de nuevo usando la url que tú me das y lo he puesto dentro de SKIN pero al final como dices y parece ser que tampoco me ha resultado. Mira, lo que he puesto es esto: .avatar-image-container img[src$=" http://1.bp.blogspot.com/-PQz7QQ49vWo/T1eS2pdJKpI/AAAAAAAAK4I/O2t3DdWDhkU/s45/LIDIA.jpg "] {
Eliminardisplay: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 45px; /* La anchura de la nueva imagen */
height: 45px; /* La altura de la nueva imagen */
padding-left: 45px; /* Igual a la anchura de la nueva imagen */
background: url(http://1.bp.blogspot.com/--7GpdWV8FuM/UkC3iiriK7I/AAAAAAAATCg/pYZY74K1Qd4/s1600/perfil.jpg
);
}
Cielos!! esto del htlm es mucho más difícil que cocinar, jeje.
Lo que no entiendo es lo de que en mi blog no tengo este código puesto ¿a qué lugar del blog te refieres? Perdona mi ignorancia.
Un saludo y muchas gracias
Has puesto algunos espacios en blanco y saltos de línea que probablemente hagan que no funcione ese código. Prueba a copiar este tal cual:
Eliminar.avatar-image-container img[src$="http://1.bp.blogspot.com/-PQz7QQ49vWo/T1eS2pdJKpI/AAAAAAAAK4I/O2t3DdWDhkU/s45/LIDIA.jpg"] {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 45px; /* La anchura de la nueva imagen */
height: 45px; /* La altura de la nueva imagen */
padding-left: 45px; /* Igual a la anchura de la nueva imagen */
background: url(http://1.bp.blogspot.com/--7GpdWV8FuM/UkC3iiriK7I/AAAAAAAATCg/pYZY74K1Qd4/s1600/perfil.jpg);
}
Oloman: que paciencia más grande has tenido conmigo. No se cómo decirte lo agradecida que te estoy. Ya me ha funcionado. Te doy un millón de gracias.
EliminarDicen que esa es la madre de las ciencias. No sabes lo que me alegro de que finalmente te haya funcionado :)
EliminarHola Oloman ,soy María Amparo de Alcublas (Valencia) llevo un blog desde hace cuatro años ,hace cosa de medio año ,un día intento entrar como bloguer en Asociación Cultural Virgen de la Salud-Jaime I de Alcublas y ya no habido manera de conseguirlo ,al final tuvimos que crear un nuevo blog, Asociacion C Virgen de la Salud -Jaime I de Alcublas ,ahora en este nuevo iba todo bien hasta hace cuatro días que me llaman y me dicen que no pueden ver las fotos que sale una señal de prohibido ,he estado curioseando el blog ,y hasta un año atrás incluido el blog viejo, todas las entradas ,que he subido con fotografías propias están en señal de prohibido y desde el 5 de octubre 2012 las entradas están bien sin problemas, del blog viejo ,ya que como usuario si se puede ver como bloguer ,no podemos acceder ,si puedes ayudarnos ,somos una asociación cultural que representamos una recreación histórica del paso del Rey Jaime I el Conquistador por la población de Alcublas en la reconquista de Valencia ,imagínate acabamos de celebrar la fiesta ,tenia cuatro entradas con mas de 700 fotografías ,he recuperado las fotos con el álbum picassa ,de dos entradas ,pero me ha llevado muchísima trabajo, imagínate de todo un año ,que puedo hacer ,aquí te mando el correo de la asociación, acvsji@gmail.com
ResponderEliminarHola. No puedo ver eso que comentas porque el blog sólo tiene entradas en 2013, así que no sé cómo es posible que las de 2012 se hayan perdido. De todas formas, si efectivamente hay un grupo de imágenes de determinada fecha que no se ven, es porque el que las subió (más bien el perfil con el que se subieron), ha borrado intencionada o accidentalmente esos ficheros y eso quiere decir que se perdieron definitivamente.
EliminarOtra opción es que se subieran a otro servicio de hosting de imágenes distinto de Blogger y en ese caso pudiera ser que dicho hosting haya dejado de funcionar.
Hola yo tenia mi blog y de repente hoy veo que entodas las fotos que tenia me aperece la señal esta de prohibido que es lo que ha podido pasar? que puedo hacer?
ResponderEliminarSólo hay dos posibilidades, la mala y la regular:
Eliminar- que has borrado accidentalmente (desde Picasa o desde Google+) la carpeta dónde estaban las imágenes de tu blog
- que has marcado la carpeta de las imágenes como privada y entonces no salen en web
La primera opción es irreversible por lo que yo sé. La segunda todavía podrías arreglarla cambiando los permisos de la carpeta