Cambiar el tamaño de miniatura del gadget 'Entradas populares' | Oloblogger Esto es algo que antes requería de un JavaScript para poder cambiar la imagen original que carga el gadget y que tan sólo tiene 72 píxeles,...

11 de octubre de 2016

Cambiar el tamaño de miniatura del gadget 'Entradas populares'

Esto es algo que antes requería de un JavaScript para poder cambiar la imagen original que carga el gadget y que tan sólo tiene 72 píxeles, de manera que obteníamos otra mayor aprovechando el ya muy conocido asunto de las múltiples imágenes de diferentes tamaños de las que disponemos en Blogger cuando almacenamos una nueva en su servidor asociando... antes Picasa y ahora Google Fotos.

Sin embargo actualmente conseguir esto es mucho más sencillo debido a la incorporación de nuevos operadores a Blogger y en concreto para esta ocasión a resizeImage (también explicado anteriormente) y que precisamente incorpora el gadget de Entradas Populares en su nuevo código. Nuevo sí, pues no hace mucho ha sido también actualizado.

Miniaturas de Entradas Populares


Así pues, lo primero que tendremos que hacer es editar la plantilla y localizar el código del gadget. Lo distinguiremos si buscamos la palabra clave "popularposts".

Una vez localizado, la línea que nos interesa es la que reza:

<b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 72, "1:1") : data:post.thumbnail' var='image'>

¿Veis ese número 72 que anda por ahí? Pues ese es el que indica que las imágenes originales de las respectivas entradas pasen al gadget con un tamaño cuadrado de sólo 72px.


La manera de que en dicho gadget salgan más grandes (o más pequeñas si por algún motivo nos interesara así) sería cambiando esa cifra por otra. Por ejemplo, para obtener un recorte cuadrado de la imagen original de 300px el código debería cambiarse así.

<b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 300, "1:1") : data:post.thumbnail' var='image'>


Creo que es muy sencillo así que si no os funciona la cosa lo único que puede pasar es que tengáis todavía el código antiguo del gadget y que no encontréis la línea que he indicado. Si es así entonces lo más práctico será eliminar el gadget y volverlo a añadir. Eso con seguridad actualizará el código y como las opciones de configuración son pocas, no perdéis nada y apenas tiempo.




Y cómo probablemente el diseño se desajuste un poco si hacéis muy grandes las miniaturas, este CSS os podría resolver la papeleta:

.PopularPosts ul,
.PopularPosts li,
.PopularPosts img {
margin: 0 !important;
padding: 0 !important;
text-indent: 0 !important;
}
.PopularPosts .item-thumbnail {
float: none !important;
margin: 10px 0 !important;
}
.PopularPosts .item-title a {
font-weight: bold;
font-size: 110%;
}


Para aquellos que todavía tienen dificultades con cómo añadir cada cosa dónde corresponde, Mónica Lemos ha tenido a bien realizar un vídeo tutorial sobre el contenido de esta entrada.

En su blog Blogger paso a paso podéis encontrar más

¿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.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

32 comentarios :

  1. Oh!! genial Oloman!! :) lo añadiré a mi post de gadgets imprescindibles, y haré vídeo para esto!!
    con mención Obvio!!

    Muchas gracias!! eres un crack!!

    ResponderEliminar
  2. Super, una modificación más, disponible para la lista. ;)

    ResponderEliminar
  3. Hola, Oloman!
    Perdón por poner mi pregunta aquí, ya que no tiene que ver con la entrada, pero no se donde ponerla.
    Tienes algún tuto o puedes decirme como hacer que algún gadget que yo elija se haga flotante y se detenga o se quede arriba o a la altura que yo quiera del blog cuando se haga scroll?

    ResponderEliminar
    Respuestas
    1. hola mile, yo tambien he buscado ese artilugio hace tiempo y lo único que pude hacer para darle solución fué ponerle el atributo fixed a todo el sidebar. pero no es lo mismo. lo que terminé resolviendo fué no hacer las publicaciones más largas que el sidebar y me va bien así, no todos tienen el tiempo de leer tanto. a veces con una imagen y poco texto basta. así que te deseo lo mejor en tu busqueda.

      Eliminar
    2. A ver si esto os sirve: portamento.js

      Y aquí una breve descripción de su uso.

      Eliminar
  4. Hola, olomam! La verdad que eres la persona que se dedica tiempo y tienes ideas absobrobrosa. Yo aun sigo con el tema de blogspot y estube un Tiempo estudiando.Mi inquietud es ;si puedes dar una idea como modificar la plantilla para Android. Uso la plantilla personalizada y no me salen las entradas. Quería un diseño sencillo. Muchas gracias por tu tiempo y se agradece por lo que haces.

    ResponderEliminar
    Respuestas
    1. Hola david. si se puede modificar. tienes dos opciones. la primera es irte a plantilla y en la opción de plantilla movil seleccionar una plantilla que se adapte a lo que deseas, como dices algo sencillo. si ya lo probaste y no te funcionó yo te recomiendo hacerte de una plantilla responsive. es decir una plantilla que se adapte automaticamente a cualquier tamaño de pantalla, si deseas puedes ver un ejemplo en: http://tejiendowebs.blogspot.com ahí muestro varias plantillas que te permiten un diseño dinámico y puede ser lo que buscas, y si no hay muchas mñas por mirar. Un saludo desde colombia. ahhh y pasa a visitar nuestra web: www.kangutingo.com que fué arreglada y modificada con varios de los tutos que ofrece oloman.

      Eliminar
    2. Como dice Kangutingo, la mejor opción es hacer una plantilla adaptable (responsive o RWD).

      Para empezar puedes hacer pruebas con esta y luego ya ir modificándola a tu gusto: Plantilla simple para Blogger con diseño adaptable.

      Eliminar
  5. Oloman como siempre gran trabajo, eso se puede agregar a cualquier diseño, en el diseño que uso en este blog es diferente intento hacer el cambio no pasa nada. http://www.cgvertex.com
    Saludos
    Robero

    ResponderEliminar
    Respuestas
    1. hola men. en la respuesta N.7 está la solución a tu inquietud, espero le sirva.

      Eliminar
    2. ¿Ya arreglado con eso, Moderador?

      Eliminar
  6. tengo una pregunta para ti mas bien dos, es que tengo un blog nuevo es :http://leonasdelanueva.blogspot.com/ mi pregunta es si puedo enviar mis entradas G+ automaticamente, la otra es que si G+ permite publicaciones de titulos de adultos.

    ResponderEliminar
    Respuestas
    1. hola men, si lo permite debes ir a configuraciones y luego a : Configuración de entradas, comentarios y elementos compartidos, ahí en la parte de abajo te deja elegir con cuál cuenta de G+ compartir automaticamente. de una que estamos te recomiendo usar una galería para los post con imagenes, oloman tiene una muy buena en el siguiente enlace: http://www.oloblogger.com/2014/07/galeria-de-imagenes-sencilla-blogger.html ojalá se haya resuelto la duda. un saludo omee.

      Eliminar
  7. la respuesta para MODERATOR sería: añade esa linea al css.
    .PopularPosts .item-thumbnail img {
    width: 100%;
    height: initial; }

    ojalá y le ayude con lo que necesita ome.

    ResponderEliminar
    Respuestas
    1. gracias por tu respuesta man, eres el mejor, ahora entiendo porque el potro de ciudad blogger era el mejor respondiendo porque el respondia a todo no como este oloman que no responde

      Eliminar
    2. no es eso men. yo tambien tengo blogs de los que me llega trabajo para arreglar páginas webs, y hay meses que llega tanto trabajo que me es imposible atender como es debido a mis visitantes, todo es cuestión de priorizar lo que hay que hacer primero. yo creo que oloman está juicioso haciendo su trabajo a los clientes que han pagado por su diseño web y por eso no responde. pero en fin, yo soy uno de los que visita mucho su web porque el contenido es de primera, y las ideas que él dá me han salvado de muchas en mis creaciones para páginas web. Un saludo desde Colombia, y aquí el responsable de KANGUTINGO. ;)

      Eliminar
    3. gracias parcero, por tus comentarios me gustaria visitar tus paginas, me dejas cuales son, espero que no lo tome como spam oloman

      Eliminar
    4. claro. tengo tres varias pero estoy enfocado en tres: 1. http://www.kangutingo.com/
      2. http://soundnotes-power.blogspot.com.co/
      3. http://tatuajestemporalesbucaramanga.blogspot.com.co/

      Eliminar
    5. El Potro es un buen amigo y un buen Blogger, así que nada más que añadir a tu comentario sobre él Pornodelanueva. Sobre el resto, cada cual tiene su vida y sus "tempos". Ahora por ejemplo es hora de contestar comentarios atrasados. Aunque sea tarde, siempre lo hago.

      Eliminar
  8. Hola Oloman, he utilizado varios tutoriales de aquí y este es mi primer comentario, que es nada menos que para pedir algo jeje. No tiene mucho que ver con esta entrada. Me gustaría saber si es posible que el gadget de "Entradas populares" muestre solo las entradas de una determinada etiqueta. La verdad he buscado pero no encuentro algo así, no sé si busco de la forma incorrecta o qué, o si ni siquiera exista tal cosa para blogger, pero no hallo nada parecido. Espero que puedas brindarme alguna respuesta. Saludos.

    ResponderEliminar
    Respuestas
    1. Hola Nico. En un principio no se puede hacer eso que quieres.

      Los posts populares es un gadget nativo de Blogger basado en las visitas. Ese dato de las visitas es algo que no podemos controlar de manera automática para saber cuáles son las más visitadas (las más populares) y por tanto las que debemos incluir en el gadget. Si no sabemos eso no podremos sacar una lista propia de "posibles" para luego filtrar por etiqueta... ergo no se puede. O al menos no sería nada fácil hacerlo.

      Eliminar
    2. Muchas gracias por responder Oloman. Supongo que sabía que no existía tal cosa para blogger, pero aún me aferraba a un rayito de esperanza jaja. Muchas gracias de nuevo.

      Eliminar
  9. hola estoy agradecida por tu tutorial, pero no encuentro el codigo como hago?

    ResponderEliminar
    Respuestas
    1. Hola Nohely. Para buscar determinado código en tu plantilla tienes que entrar desde el Escritorio > Plantilla > Edición HTML. Una vez que tienes a la vista todo el código de la plantilla, entonces pincha en el cuadro dónde precisamente ves el código y a continuación teclea CTRL+b. Con eso se abrirá un buscador justo en el borde de ese cuadro (distinto del buscador del navegador que en principio se suele abrir en la parte superior de la ventana, no en el cuadro). Ahí ya puedes escribir lo que quieras y te buscará sólo dentro de la plantilla.

      Eliminar
  10. Hola oloman quisiera saber como puedotener el control del ancho y alto de la imaguen? saludos!

    ResponderEliminar
    Respuestas
    1. Hola Erick, Diría yo que deber agregar código en la corchea de .PopularPosts img {
      width: 200px !important;
      height: 200px !important;
      } hZ LA PRUEBA, TAMBIEN PUEDES CAMBIAR LOS PX POR % ASÍ POR EJEMPLO PARA QUE SE ADAPTE AL ESPACIO PONES: width: 100%; height:100%;

      Eliminar
    2. Muchas gracias me sirvio mucho!

      Eliminar
  11. es un placer erick, ya que el maestro "Oloman" está ocupado en sus labores, trato de ayudar tanto cómo el lo ha hecho conmigo. Un saludo desde SANTANDER COLOMBIA, en KANGUTNGO nos encanta ayudar. :)

    ResponderEliminar
  12. Muchas gracias por esta información. Me sirvió de mucho ;)

    ResponderEliminar
  13. Se que este tutorial es viejo, pero me ha ayudado mucho. Gracias

    ResponderEliminar
  14. Justo lo que necesitaba... gracias.

    ResponderEliminar