Si alguien lo leyó y se acuerda, en Sumarios automáticos sin JavaScript vimos un sistema muy ligero y práctico para crear esos resúmenes en la página de inicio, basado sólo en etiquetas data. Recordamos que las que utilizábamos eran:
- data:post.snippet ► un pequeño resumen del texto
- data:post.jumpText ► el salto "More"
- data:post.thumbnailUrl ► una miniatura de 72x72 px extraída del post
La principal ventaja de usar este sistema es que no había que cargar todo el contenido del post, leer y recortar el texto, leer y recortar la imagen y sustituir todo. Eso es lo que normalmente hacen los scripts que generan este tipo de resúmenes.
Y si me pareció (y me parece) mucho mejor este otro sistema con etiquetas data, es porque con él aprovechamos los datos que ya recopila Blogger de forma rutinaria y simplemente los mostramos, lo que supone una enorme ganancia en tiempo de carga.
Sin embargo, la miniatura era tan pequeña que nunca me terminó de agradar al 100% estéticamente hablando. En la portada de este blog podéis ver que ya las dejé cómo me gustaban -más grandes- y fue con el siguiente sistema.
Será mediante un pequeño script que, aprovechando la particularidad del sistema de archivo de imágenes de Blogger, busca la imagen que tiene la subcarpeta s72-c, que es precisamente la que tienen este tipo de miniaturas, y cambia esa carpeta por otra que nos muestra una imagen más grande (Ver: La ventaja de subir una sola imagen y disponer de cientos).
Este es el código que habrá que insertar antes de </head>:
<!-- Reemplazar miniaturas de 72px por otras de tamaño X -->
<script type='text/javascript'>
//<![CDATA[
function redimthumb(url,title,image,size){
var imagen=image;
var devolver ='<a href="'+url+'"><img src="'+imagen.replace('/s72-c/','/s'+size+'-c/')+'" title="Leer post completo" alt="'+title+'"/></a>';
if(imagen!="") return devolver; else return "";
}
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
function redimthumb(url,title,image,size){
var imagen=image;
var devolver ='<a href="'+url+'"><img src="'+imagen.replace('/s72-c/','/s'+size+'-c/')+'" title="Leer post completo" alt="'+title+'"/></a>';
if(imagen!="") return devolver; else return "";
}
//]]>
</script>
El funcionamiento es simple: se recibe la dirección del post, su título, la miniatura y el tamaño nuevo que deseamos y ese código monta un html consistente en una imagen con enlace a ese post y un title con el título de la entrada. Además, la carpeta de la miniatura la cambia para que sea del tamaño recibido, que es fundamentalmente para lo que montamos esto.De esta manera, la imagen de la izquierda que es la que mostraría data:post.thubnailUrl (una s72-c, recorte cuadrado de 72px), se podría ver cómo la de la derecha, que es otro recorte de la misma imagen pero de 150px.
Nos falta un segundo y último paso que consiste en situar la llamada a este script justo dónde queremos mostrar la miniatura y desde allí pasar los datos necesarios. Este sería el código y lo normal es que vaya justo antes del texto-resumen. Si vais a utilizar data:post.snippet, pues justo antes de él.
<script type='text/javascript'>document.write(redimthumb("<data:post.url/>","<data:post.title/>","<data:post.thumbnailUrl/>",150));</script>
El valor de 150 que veis marcado en verde, es el que marcará el tamaño de la nueva miniatura. Ahí podéis poner el que queráis, siempre teniendo en cuenta el tamaño original de la imagen.
¿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...
Un script muy bueno. :)
ResponderEliminarYo uso una versión similar pero con jQuery en la última plantilla que he creado y lo mejor que puede utilizarse en otras cosas como las Entradas populares. ;)
Abrazo. :)
Bueno, como siempre, normalmente no hay una única solución. A fin de cuentas jQuery no es más que una librería JavaScript.
EliminarY efectivamente, las entradas populares también usan la imagen s72-c. Bien visto :)
Oloman solicito tu ayuda yo se que no es el post adecuado para pedir apoyo pero aunque sea espero lo leas.
ResponderEliminarMi blog es http://winboox.blogspot.com/ todo funciona adecuadamente, y cuando entro a algunos hipervinculos entra bien y todo pero en algunos manda un mensaje diciendo algo como:
Advertencia: bla bla bla winboox.blogspot.com incluye contenido de usuarios.lycos.es.
¿A que se debe? o ¿Como podria solucionarlo? Mi blog tiene un poco mas de 2 años y no quisiera perderlo o que empezara a caer. Espero me contestes aqui o en mi correo si no quieres mantener el comentario. Espero me puedas ayudar.
Miguel20105@gmail.com
PORFAVOR SALUDOS
No sé qué puede ser Mike, pero el mensaje parece indicar que tienes algún widget o incluso algún material (imagen, vídeo, etc.) que pudiera tener derechos de autor. Eso explicaría por qué en unos enlaces te sale y en otros no. Tendrías que analizar qué tienen en común aquellos en los que salta.
EliminarGracias Oloman, ya analice mi plantilla y busque en el código HTML el link que me mandaba de donde, era la imagen que tenia agregada en el cuadro de comentarios, por eso solo me aparecía al abrir un post y no en la pagina principal, pero muchas gracias!
EliminarFerpecto :D
EliminarPues una vez visto esto, he hecho un mix en mi resumen de portada. El texto lo sigo truncando con java, pero la imagen la tomo de esta forma en vez de redimensionando la original. Aunque se siguen cargando los posts enteros, el tiempo de carga es menor porque no se redimensionan imágenes. Puede parecer una tontería, pero San Google me lo ha premiado con 3 puntos en el Page speed Test.
ResponderEliminarEl resumen de texto no lo cambio de momento, porque el snippet me parece demasiado corto. Si se pudiera modificar su longitud... Otra opción sería hacer como tú, y mostrar un resumen largo en el post más reciente y el snippet en el resto... queda bastante bien...
A mí tampoco me gusta el escaso contenido del snippet de Blogger, pero por ahora no se me ocurre otra manera distinta de hacerlo que con JavaScript, tal y cómo tú lo haces ahora.
EliminarMuy observador con lo de mi portada ;) De todas formas te comento que yo ya no uso el recorte de texto (script), porque directamente he eliminado el texto de las páginas de navegación (las que no son la de Inicio) y ahora sólo muestro títulos. Esa es la parte más pesada del script.
Cuando sí mostraba texto, no tenía más remedio que usarlo si no quería ir añadiendo MORE a todas mis entradas antiguas, pero ahora sólo tengo que hacerlo en las nuevas publicaciones. Ya comenté que con la nueva plantilla intentaba reducir el tiempo de carga.
Pues tal como lo has hecho debe ser la forma más ligera, y muy ingeniosa por cierto. Eres un crack :)
EliminarSi quiero implementar este sumario, supongo que primero debo borrar el que tengo ¿no?, es un buen trabajo sin duda.
ResponderEliminarNo exactamente. Esto no es un sistema de sumarios, sino sólo una parte de él. Esto sólo se ocupa de sustituir imágenes pequeñas por otras más grandes. En tu caso, añádelo justo después de dónde tengas <data:post.snippet/>
EliminarJamás le puse atención a la URL de las thumbnails, sin duda un script muy útil :)
ResponderEliminarUn saludo Oloman.
Seguro, pero sólo mientras Blogger no vuelva a cambiar algo. En este caso, en el sistema de imágenes :(
EliminarSí. Esa es otra cosa que tengo pendiente de ver si puede arreglarse con alguna información (variable DATA) pre-existente de Blogger, pero me temo que no va a ser fácil encontrarla. Y eso suponiendo que exista...
ResponderEliminarNo me funciona amigoo...
ResponderEliminardejame te explico y me ayudas porfavor..
este metodo es unicamente para agrandar la imagen que muestra el sumario de esta entrada
http://www.oloblogger.com/2011/03/sumarios-automaticos-sin-javascript.html
¿Verdad?
pues bien hago lo que tu dices en mi blog de pruebas pero no me sustituye la imagen, sino que me pone otra, ocea que lo que hace es dejarme la imagen de 72px y me otra antes de dicha imagen....
¿que puedo hacer para que remplaze la imagen y no que me ponga 2?
te lo agradeceria mucho :)
Seguramente es que dejas data:post.thubnailUrl. Realmente lo que hay que hacer es sustituir esa variable por el script, que ya se ocupa él de redimensionar e "imprimir" la grande.
EliminarOloman esto es aplicable a un widget. Mira en mi blog tengo varios gadget de entradas recientes con su correspondiente miniatura. El tema que si aumentas el tamaño de dicha miniatura sale muy pixelada. Existiría alguna forma de que saliera nítida y aumentar por ejemplo a 150px como indicas?. Mi blog El antepenúl...bueno si ya me conoces!. Un abrazo.
ResponderEliminarCon algunas modificaciones sí. Te he mandado a tu correo una prueba. Dime que tal te va y la publico si es eficaz.
EliminarOtra pregunta aunque es off-topic, es como has hecho para que el botón de compartir de twitter quede alineado correctamente. En mi caso deja un espacio muy grande con el botón siguiente. Uso tu sistema. Un abrazo....cuanto trabajo te doy.
ResponderEliminarLo tengo metido dentro de un DIV con este estilo:
Eliminarstyle="float:right;text-align:center;width:96px; padding:2px 0 0 0;margin:0;"
Y otra duda!jaja, también off-topic. Me gustaría poner un cartelito eventual en el blog en cualquier lugar de este, cabecera por ejemplo. Sería un texto con un fondo de color. Como hacerlo?
ResponderEliminarCrea un div con las propiedades que quieras y entre ellas incluye estas:
Eliminarposition:fixed;
top: 10px;
left: 10px;
Cambia los valores top y left al gusto e inserta el código antes de </body>
Hola olaman primero agradecerte por los post q publicas ya q me ha sido de mucha utilidad. El problema q tengo ahora es q no consigo extraer un contenido especifico de un post desde el home, es decir un texto que se encuentra dentro de un div en mi post. Tengo entendido q el data:post.snippet nos proporciona un resumen pero en este caso quiero personalizar para que me muestre el texto que yo quiero. Espero puedas ayudarme gracias.
ResponderEliminarNo sabría cómo hacer eso automáticamente de manera eficiente. Se me ocurre que podrías indicar que en página Home todo el texto del post fuera con display:none excepto ese div que tendrías que marcar con una clase o ID específica, pero no veo claro que fuera un sistema rápido.
Eliminarhola oloman comente en un post mi problema pero con este script lo consegui solucionar pero me surgio una duda saber si se podria modificar el data:post.snippet para poner mas caracteres con javascript
ResponderEliminarHasta la fecha no he encontrado ningún sistema para obtener más caracteres del resumen de serie de Blogge (data:post.snippet). Sin embargo hay métodos en JavaScript para generar un resumen de los caracteres que quieras: sumarios javascript.
EliminarHola, Oloman. Me gustaría aplicar este truco en el widget de Entradas Populares. Ya lo he intentado pero no aparecen las miniaturas. Me podrías explicar dónde poner el segundo código y si debo cambiar algo? Gracias
ResponderEliminarMejor utiliza lo que se explica en esta otra entrada:
EliminarAgrandar las miniaturas de los gadgets.
Genial Oloman. Gracias, esto me servirá. Saludos
EliminarEso no tiene pinta de tabla. Esto es una tabla y seguramente lo que hace ese código es crear un menú o más bien un sistema de pestañas ¿es algo de eso?
ResponderEliminarLe he echado un vistazo y eso está hecho con jQuery. No parece complicado, así que sólo es cuestión de que tenga un rato de esos de los que ando escaso :(
ResponderEliminarhola ^^ sera que se puede hacer que la imagen no sea cuadrada sino rectangutar pero más alta que ancha, y tambien si las publicaciones pueden estar dividas en dos, osea como el actual sumario que tengo en el blog .:: ✩ Nightmare Scans ✩ ::. quiero cambiarlo, ya que me trae un poco de problemas eso de que no coinsida el numero de entradas a mostrar ^^ gracias
ResponderEliminarHola, con este sistema sólo puedes hacer los recortes que permite Blogger y que están relacionados en esta otra entrada. Cuando lo veas comprobarás que la única forma es redimensionando la original, si esta también es más alta que ancha y eso te dará el problema de que el ancho será variable. Todas las originales tendrían que tener el mismo tamaño (o la misma proporción) para que funcionara bien del todo.
EliminarCon respecto a que las publicaciones estén divididaa en dos, este sistema no afecta a eso. Sólo se ocupa de recortar la imagen. Y no sé que quieres decir exactamente con lo del número de entradas a mostrar...
Hola Oloman, me pasa lo mismo que a Mynar García. Me aparece el thumbnail de 150px junto con el de 72px. Puedo borrar el de 72px eliminando el codigo que escribe post.thumbnailUrl pero después es como si no reconociera el thumbnail de 150px porque no cambia de posición al probar float:right y float:left como lo hacía el de 72px. Un ayudita please? Muchas gracias y enhorabuena por el blog, lo he descubierto al ser el blog del mes y me vino como caído del cielo!
ResponderEliminarBuenas. El problema es que tú haces los sumarios no con el truco que no usaba JavaScript, sino con él.
EliminarEn ese caso tienes que cambiar el código de esa rutina que crea los sumarios. En concreto esta línea:
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" height="'+img_thumb_height+'px"/></span>';
Ahí podrás cambiar el lado de flotación el padding.
Buenas tardes Oloman.
ResponderEliminarA ver si me puedes echar un cable...
Lo que quiero, y que me trae de cabeza, es poder cambiar en mi blog el tamaño de mis miniaturas. Veo que todas salen del famoso "s72-c" y la cuestión es dejarlas e "s128" osea SIN RECORTAR ya que es un blog de fotografía.
Los famosos "thumbail" tanto para enviar enlaces a facebook, las miniaturas de entradas populares, listas de blogs, etc todas van con miniaturas recortadas de 72 x 72 y lo que me gustaría es que queden sin recortar a s128.
No se si me puedes ayudar a implementar algún código en mi plantilla o ver que se puede hacer. Soy un poco novato en estos temas...
Te dejo el enlace a mi blog:
http://fotografiajuanjomediavilla.blogspot.com
Un saludo y muchas gracias de antemano.
Eso es fácil si conoces cómo maneja Blogger el almacenamiento de imágenes. Echa un vistazo al enlace del post titulado "La ventaja de subir una sola imagen y disponer de cientos".
ResponderEliminarSólo tienes que cambiar esta parte
('/s72-c/','/s'+size+'-c/')
...por esto otro
('/s72-c/','/s'+size)
Oloman, Estoy buscando esto hace rato específicamente para facebook... Quiero corregir la imagen "s72-c" que toma Facebook, y por ejemplo forzar que tome "s200-c". Entonces:
Eliminar1) El primer código queda incambiado y va antes de /head?
2) Donde coloco el segundo código?
3) Este segundo código quedaría así?
-script type='text/javascript'-document.write(redimthumb("-data:post.url/-","-data:post.title/-","-data:post.thumbnailUrl/-",200));-/script-
No. Para Facebook habría que hacer bastantes más florituras. Lo que no entiendo es por qué no te sirve esa. Yo tengo puesto esta etiqueta META que saca la miniatura de 72px y me va bien:
Eliminar<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
Gracias por tu respuesta. Sucede que con o sin esa linea que me dices, Facebook da el mensaje "Provided og:image is not big enough. Please use an image that's at least 200x200 px."
EliminarEn lugar de la miniatura de la entrada, Facebook utiliza la foto del banner del sitio, que es casi 1000 de ancho.
Por eso es que pensé que si podía forzar a la miniatura a 200 Facebook no usaría el banner.
Se te ocurre como hacerlo?
A ver si en tu plantilla tienes "post hentry". Si es así prueba con schema
Eliminarhaciendo que antes de <a expr:name='data:post.id'/> se quede esto:
<div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<b:if cond='data:post.thumbnailUrl'>
<meta expr:content='data:post.thumbnailUrl' itemprop='image_url'/>
</b:if>
<meta expr:content='data:blog.blogId' itemprop='blogId'/>
<meta expr:content='data:post.id' itemprop='postId'/>
Facebook sigue tomando la imagen recortada de 72px.
EliminarColoque estos códigos:
1- la etiqueta meta
2- el código antes de -a expr:name='data:post.id'/-
3- el código para reemplazar miniaturas de 72px por otras de tamaño X antes de /head.
El tema es que no se donde colocar esto:
-script type='text/javascript'-document.write(redimthumb("","","",300));-/script-
Tienes razón y no sé por qué pero a mí me pita eso de las miniaturas. Esto de Facebook es algo que me lleva un poco loco porque es sistema ABS (aveses va, aveses no va).
EliminarVoy a ver si preparo una chapuza...
¿No tendrá que ver que aún no he puesto la última parte del código?
EliminarEn el post dice "Nos falta un segundo y último paso que consiste en..."
Ese código no se donde colocarlo, ¿qué me sugieres?
Evidentemente, sin ese segundo paso no te va a funcionar nada porque es lo que hace que la función se ejecute.
EliminarDe todas formas ayer estuve toda la tarde intentando hacer algo para que en las META saliera una imagen de más de 72px, pero no lo logré, ni con este ni con otros tres sistemas que probé. Pienso que no debe ser fácil modificar las META al vuelo, pero quizás a alguien se le ocurra una idea feliz... algún día.
Aquí hay una solución para la descripción que viaja a Facebook y también para la imagen.
EliminarSin embargo entiendo que la imagen es redimensiado a partir de la de 72px a una de 200 para que Facebook tome la del post y no otra, lo cual hace que la imagen que va a Facebook sea correcta pero de muy baja calidad....
http://www.bloggerplugins.org/2012/01/wrong-description-image-facebook.html
Así es, la redimensión hace que sea de poca calidad, pero más vale eso que nada. Gracias
EliminarHola. Como pone en el enlace de "Administrador" la descripción se consigue colocándola entre <"p"><"/p">. Pero ocurre que el "snippet" de blogger tiene tan pocos caracteres que, creo, no lo coge Facebook. Poniendo en algún punto del "post-content· algo así como :
Eliminar<"p style='display: none'><"data:post.snippet/"> (Publicado por <"data:post.author/"> el <"data:post.dateHeader/"> a las <"data:post.timestamp/"> para el blog «<"data:blog.title/">»)<"/p">
He logrado que aparezca. (antes hay que pasar por el debugger de Facebook para que actualice la caché).
Saludos y gracias.
NOTA: he puesto las comillas para que no interprete el código como html
OK. Aunque pienso que todavía no es la solución ideal, gracias por la aportación.
EliminarUna pregunta, ojala me puedas echar una mano.. yo quisiera hacer lo mismo que haces con tu imagen pero cojer la imagen de incio y no del post..
ResponderEliminarTengo una template de galeria de videos, que automaticamente coje la imagen del video de la ebtrada y la pone en inicio.. yo quisiera cojer la imagen de inicia y ponerla en la entrada.. eso se puede?
Te paso el blog que monto para que se vea mejor el ejemlo: http://videosvide.blogspot.com/
Seria de enorme ayuda!
Muchas Gracias anticipadas!
Hola. Lo que entiendo es que quieres poner una imagen en la página de Inicio y que esa imagen se cargue luego en el post ¿es así? Si es así tendrías que hacerlo al revés. Cuando crees un post coloca una imagen y luego el vídeo. De esa manera en el post tendrás tu imagen y el sistema de sumarios la tomará para que se muestre en la página principal del blog.
EliminarMuchas gracias por tu respuesta, el problema que tengo es que si pongo "Entradas mas visitadas" no sale la imagen, por que el sistema busca la imagen en el post y no la encuentra.. pero la template que tengo, nose como se lo hace pero coje y le hace una captura al video, y la pone en el inicio en cada entrada.. y era haber si había alguna manera de mostrar la misma imagen en la entrada, para que el sistema detecte.. y muestra en el widget "entradas mas visitados" lo que intento buscar es algo automatico.. para no tener que hacer la foto cada vez que pongo 1 video.. no hay ninguna solución? o alguna chapusa xD que muestre la misma imagen que en el inicio pero en el post..
EliminarMuchas gracias por tu interes de ayudar! :) Se agradece y mucho!
Éxitos!
Los gadgets de Blogger sólo reconocen como miniaturas las propias imágenes subidas a Blogger y esa que te sale a tí sale de YouTube, por tanto te vale para los sumarios, pero no para Posts Populares, Entradas Recientes, etc.
EliminarComprueba la dirección de esa miniatura y la de otra imagen subida por tí y verás la diferencia en el formato de la URL. Automático si quieres que te sirva para ambas cosas, va a ser que no...
Para resúmenes de texto a medida, tendrías que recurrir a algo como esto: Sumarios automáticos
ResponderEliminarHola Oloman entonces para poner una imagen de 130x 90 px como deberia hacerlo? Gracias
ResponderEliminarHola podrías hacerlo de esta misma manera pero sacando un cuadrado de 130x130.
EliminarLuego tienes dos opciones, la fácil que es forzar el tamaño de la miniatura en cuanto a altura a 90px, lo cual la deformaría, o bien ponerle ese tamaño (130x90) al contenedor de la miniatura y añadirle un overflow:hidden para que no se vea lo que "sobra"
¿Hablo en ruso o se entiende?
Se entiende perfectamente.
ResponderEliminarMe faltó añadir... "sin ánimo de ofender". Es nunca sé a qué nivel tengo que bajar. En ocasiones explico de más y otras veces me dicen que soy demasiado técnico o_O
EliminarUna ultima cosita me ha funcionado perfecto, sin embargo cuando pongo una pagina no me sale el texto. Por que?
ResponderEliminarEjemplo:
En esta pagina va bien http://www.motojuegos.org, pero en una pagina independiente no se ve nada http://www.motojuegos.org/p/juegos-friv.html
No sé qué quieres conseguir en la página estática pero es que son dos cosas distintas. En la página principal se cargan automáticamente las miniaturas de los posts y un pequeño resumen del texto de los mismoa, pero en la página estática ¿qué pusiste? Ahí sólo se verá lo que escribas.
EliminarDe todas formas sí que vi un texto, pero si lo tienes dentro del selector "pop-up" pues no se verá si no pasas el puntero por encima de algo... algo que no existe.
Adivinando lo que intentas hacer, es posible que tengas que condicionar para que los resúmenes (miniatura más texto) sólo te salga en páginas tipo index. Así no se haraán resúmenes en las páginas estáticas.
Tengo claro como condicionar pero no exactamente lo que debo condicionar para que no me salga en las paginas estáticas
ResponderEliminarYa esta ya lo encontre http://www.motojuegos.org/p/juegos-friv.html gracias por tu ayuda
ResponderEliminarNo, necesitare tu ayuda porque debo condicionar el id main pero tengo puesto
ResponderEliminarcon lo que le estoy diciendo que si no es una pagina individual haga el thumb, pero no se como meter dos condicionales. Gracias
Se te quedó el mensaje a medias y no lo entendí. Para poner código HTML usa una herramienta que lo pasa a texto plano y que encontrarás a la izquierda (Herramientas online).
EliminarDe todas formas supongo que era la condición que tienes puesta así que te paso también este enlace.
Perfecto gracias al enlace de las condicionales. ya esta arreglado. Gracias Oloman
ResponderEliminarSsssstupendo ;)
EliminarMe gusta mucho la idea. Ya que implementé uno de los sumarios que pusiste en otra entrada y la foto queda muy pequeña. En concreto tengo
ResponderEliminarLo primero, Gracias por la explicación :)
Despues de varios intentos con todos los data:post.snippet que encontraba y previsualizando despues los cambios.... Sólo en dos de ellos veo el aumento de la imagen pero el problema está en que me encuentro con las dos imagenes, la pequeña de antes y debajo de ésta la nueva mas grande. Si pongo el último código debajo de data:post.snippet me aparece la imagen pequeña , el resumen y debajo la grande....como puedo quitar la imagen pequeña?? Donde puede estar el fallo??
ahora veo otro detalle. Tengo instalado SUMARIOS. PRIMER POST COMPLETO SOLO EN HOME. RESTO CON SNIPPET AUTOMATICO. Que antes no salió publicado porque puse la linea del código. Tambien veo que al final del primer post que no está cortado (se muestra completo) despues del final del cuerpo de la entrada sale las miniaturas, el resumen y el tipico leer mas... :S De momento creo que lo quitaré y lo dejaré tal cual. A que puede deberse?? no es compatible con los sumarios rapidos???
ResponderEliminarOtra vez yo :) lo único que he conseguido es que no salga en la primera entrada y esa se quede como debe ser, pero la imagen pequeña en los resumenes no desaparece. He cambiado el segundo codigo de posicion dentro del codigo de sumario usando d referencvia data:post.snippet y lo único que consigo es cambiar el orden de aparicion dentro del cuerpo de la entrada: las dos imagenes seguidas, una arriba del resumen , otra debajo... así que no se
ResponderEliminarMe encantaría dejar ese tamaño nuevo de la imagen en el sumario ya que el original es un pelin pequeño apra mi gusto. Y las dos juntas esteticamente no me gusta. Crees que habría alguna forma de eliminarla?? Gracias de nuevo y siento las molestias que pueda ocasionarte
Eché un vistazo a tu blog y creo que está ya como querías. Supongo que lo lograste arreglar en estos dos días de demora que llevo ¿no?
EliminarHOLA, tengo un problema que no se resolver, tengo un blog donde cuelgo cuentos narrados en videos por capitulos, el problema es que los videos se cargan como entradas y aparece la ultima en primer lugar, quedando los cuentos al revés, primero aparece el ultimo capitulo y en ultimo lugar el primero, ¿habría alguna forma de cambiar el orden de las entradas?.... gracias de antemano, un saludo
ResponderEliminarNo, Pepa. Los blogs son así y siempre se ve en primer lugar lo último publicado.
EliminarSin embargo puedes editar las entradas y cambiar las fechas para que salgan en el orden que tú quieras.
Oloman, te dejo una consulta acá porque no se específicamente donde dejarla. Me gusta el truquillo que tenés en tu blog, en el cual el primer sumario tiene como el cuadrado caído. Creo que se ve muy bien y bueno, si querés compartir como lo hiciste, me gustaría aplicarlo en el blog de cine que cree (el cual figura en el enlace).
ResponderEliminarDesde ya muchas gracias, un saludo.
En .contemini quita el overflow:hidden; y luego añade a .miniaturas unos
Eliminar-webkit-transform: rotate(-6deg);-moz-transform: rotate(-6deg);transform: rotate(-6deg);
Sólo eso, aunque si lo quieres sólo para el primer sumario, eso último tendría que ser aplicado al selector .wrapfullpost:first-child .miniaturas {}
Oloman, muchas gracias.
ResponderEliminarTe cuento, la primera parte sale a la perfección. Ahora, cuando intento que sólo se aplique al primer post no me sale. Hice varias pruebas y nada. Lo que no entiendo es exactamente donde tengo que poner .wrapfullpost:first-child.
Por otro lado, cuando el cuadrado sale caído aparece negro de color de fondo, el espacio. ¿Cómo puedo hacer para ponerle otro color?
Gracias nuevamente y espero no molestarte ;)
Eso de .wrapfullpost:first-child es un selector CSS y por tanto tienes que añadirlo en tu plantilla, en la parte de estilo dónde van el resto de selectores de tu blog. El fondo lo pones también en .contemini:
Eliminar.contemini {
overflow: visible;
background: white;
}
.wrapfullpost:first-child .miniaturas {
overflow: visible;
-webkit-transform: rotate(-10deg);-moz-transform: rotate(-10deg);transform: rotate(-10deg);
}
Oloman, te agradezco mucho la explicación. Sabés que cuando me respondiste lo volví a probar y no me funcionó. Recién volví a intentarlo y ahora si quedo perfecto. Me encanta como queda, un detalle que lo hace ver distinto :)
Eliminar...
Voy al post que escribiste sobre el perfil del autor debajo de las entradas :D
OK. Me alegro de que al final te saliera. Para otra vez suscríbete a los comentarios cuando dejes alguno y así Blogger te avisará cuando alguien conteste ¡pasó casi un mes que lo hice! :)
EliminarListo! ya me suscribí!
EliminarHola Oloman,ante todo gracias y sabes que me funciona perfectamente, tus miniaturas, pero es que estoy obsesionado, siempre con quitar los máximos elementos en una plantilla. Pregunta ¿Se puede hacer sin utilizar javascript, solo con css? Gracias
ResponderEliminarMientras no haya una DATA para imágenes distinta de data:post.thumbnailUrl, la respuesta es no. Esa que hay ahora y que utilizamos para los resúmenes (o sumarios) sin JavaScript, es de 72x72px y cualquier ampliación que hagas pixelaría demasiado. El asunto con este script es que la sustituímos por una más grande y ahí no tenemos problema con la calidad.
EliminarDe todas formas prueba con data:post.firstImageUrl y me dices, que yo no he tenido ocasión de probar a fondo y a veces me ha funcionado y a veces no.
Gracias Oloman por guiarme, pruebo y te comento. Un saludo
ResponderEliminarHola Oloman, necesito tu ayuda porfavor, pues veras le agrege el widget de "Noticias Relacionadas" a mi blog pero las miniaturas lanzan un Natural 72x72 y se me ve feo, llevo dias tratando con eso como puedo solucionarlo? Gracias...
ResponderEliminarHola. Date una vuelta por esta otra entrada
EliminarHola Oloman,
ResponderEliminarA mi me salen las miniaturas recortadas y estiradas, nose si es por este script, otro script, el CSS... ¡menudo lío!
Te dejo la dirección del blog donde estoy probando este script, es un blog de pruebas así que a penas tiene nada: http://photonicaclientes3.blogspot.com.es/
A ver si me podrías orientar un poquillo ¡saludos!
Hola. Te salen bien. Para que todas tengan el mismo tamaño y queden ajustadas a los rectángulos que forman el panel de la página principal, no queda más remedio que "recortarlas" para hacerlas iguales. No sé qué problema ves.
EliminarQuiero que salga la imagen tal cual, más chica no me importa, pero no recortada. Que cambie la proporción, pero que no se recorte ¿porqué pasa?
EliminarGracias por responder ¡saludos!
En ese caso se verán deformadas, pero si no te importa entonces te sobra todo este código. Será suficiente con buscar el selector (clase o ID) que contiene la imagen y ponerle un width y un height de las medidas que necesitas. Por ejemplo:
Eliminar#PopularPosts img { width: 160px; height: 80px;}
No, Dori. No hay ninguno que se pueda usar con el sistema sin JavaScript. Te dejé un enlace en un anterior comentario que hiciste sobre este mismo tema, que te llevaba a un sistema en el que sí podías elegir la longitud de los resúmenes.
ResponderEliminarClaro. Tienes que aplicar un float:left; al selector de la miniatura. No puedo ser más específico porque no sé qué estructura tienes (no sé en cual de tus blogs tienes esto)
ResponderEliminarMil gracias por este post y por muchos otros que tienes. Tenía una suscripción mediante email hacia la página de mi protectora de animales. Hace poco cree el blog y no sabía cómo hacer para que la gente suscrita en mi base de datos le llegasen también las actualizaciones del blog. Me quedaba poder incluir la imagen sin que quedase muy mal. y gracias a tu post lo he conseguirdo.
ResponderEliminarMil gracias!!
De nada. Me alegro de que la información te haya servido.
EliminarTu script falla en eso, en que no mete ninguna clase especial para poder manejar las imágenes y no existe .Image:thumb, así que es imposible que así las configures.
ResponderEliminarSi en tus entradas sólo hay vídeos y no hay imágenes, esto te funcionará:
div[id^="aim"] img {
float: left;
padding-right: 20px;
}
Hola, me gustaría saber si esto se puede hacer pero en la versión movil, es decir, en las plantillas responsive, las thumbnails que colococa blogger son muy pequeñas me gustaria saber como ampliarlas, que se vean mas grandes, es casi lo mismo que explicas, pero quiero que sea los moviles. Gracias por tu ayuda
ResponderEliminarSi realmente tuvieras una plantilla "responsive" no tendrías este problema, así que supongo que realmente usas una de las plantillas para móviles que Blogger facilita ¿es así?
EliminarSi la respuesta es afirmativa, entonces no podrás modificar casi nada. Tampoco lo que comentas.
Saludos.
ResponderEliminarSé que este post es bastante antiguo y no conseguí que tuvieras otro más actualizado, pero a ver si me ayudas.
Un blog que creé le subí 2 post de prueba. Las 2 imágenes hiper-pixeladas. Buscando y buscando dí con que la imagen se publicó a 72x72 de tamaño "natural" y no a 420x420 como debiera ser. El tema es que eso lo hizo blogger automáticamente.
¿Hay algo que hice mal?, ¿qué hacer?
Gracias.
Reinaldo ¿dónde te ocurre eso que lo vea?
EliminarSaludos!
EliminarEn: http://www.ksbc.manrei.com/
Creo que Blogger no cambió nada. Simplemente es que la plantilla está mal diseñada en cuanto a eso.
EliminarSi buscas seguramente hay alguna línea dónde se salga esto:
<img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>
Y eso siempre genera una imagen cuadrada de 72px. Es posible que haya más de una línea como esa.
En su lugar usa esto otro:
<img expr:src='resizeImage(data:postFirstImage,400,"1:1") />
Saludos Oloman!
EliminarLas imágenes no aparecen sustituyendo la etiqueta. ¿Alguna otra idea? Gracias.
No veo que lo hayas cambiado...
EliminarSaludos!
EliminarDespués de varios intentos, di con que unificando tu idea con la etiqueta por defecto:
img expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnailUrl,400,"1:1")'
Dio resultado... Muchas gracias por el aporte!
Hola amigo tengo un problema espero puedas ayudarme ya que nadie lo ah hecho, tengo un blogger de tecnologia y al compartir mis post la imagen que se comparte con los post aparece recortada osea mas pequena.
ResponderEliminarEl detalle esque intente compartir el post por mi cuenta en google+ y me encontre con que si selecciono la imagen que quiero compartir del post aparece la original, pero me lanza la cortada como automatica, osea paracen dos una recortada y una bien, pero la recortada es la que se comparte automaticamente.
Te dejo un ejemplo de las imagenes:
recortada: https://2.bp.blogspot.com/-X3uc71u0YmA/VzepTBTmZAI/AAAAAAAAIm4/XjPGAYh7Ik8XveAow_66VJ-xR89nLT6zACLcB/w530-h278-p-rw/oppo-sign.jpg
original:https://2.bp.blogspot.com/-X3uc71u0YmA/VzepTBTmZAI/AAAAAAAAIm4/XjPGAYh7Ik8XveAow_66VJ-xR89nLT6zACLcB/w530-h395-p-rw/oppo-sign.jpg
La unica diferencia que encuentro entre ellas es esto : w530-h278-p-rw
No se porque pase esto me podrias ayudar seria de gran ayuda gracias
Hola Jesús. Pues eso es simplemente porque Google+ hace eso y recorta la imagen para ajustarla a su formato de posts. Lo mismo hace Facebook y en ambos casos no tiene arreglo.
EliminarEl único arreglo posible es que tus imágenes sean directamente de la misma proporción que muestra G+ y así no las tendrá que recortar. Esto es, de 530x278 px o cualquier otro tamaño proporcional a ese. El problema es que por ejemplo en Facebook, la proporción es otra.
Si entiendo lo de google, pero este problema que te comento no me pasaba anteriormente, llevo dos anos y medio con mi blog y eh notado que solo sucede en estos meses abril mayoo junio, como te comento si le doy a seleccionar la imagen a google+ me aparece la imagen bien y no recortada y la que se corparte en twitter automaticamente tambien sale recortada como si la imagen que tomara del thumbnail del post fuera recortada alguna solucion ?
EliminarPues si el problema no es ese, entonces no te sabría decir Jesús. Tienes que tener en cuenta que Google+ ha cambiado últimamente su diseño y por tanto, también la forma de presentar la información. He probado en el antiguo y no me corta las imágenes; sin embargo, en el nuevo efectivamente sí que las recorta.
Eliminartambien eh notado que en mi contador de visitas de blogger muestra arriba de 2500 visitas y en adsense nunca pasa de 200 no creo que tanta jente use bloqueador de anuncios es un bajon de diferencia grande
ResponderEliminarTampoco te voy a poder ayudar con esto. Ni el SEO ni la publi son cosas que domine.
EliminarOk amigo una cosa mas ya solucione lo de la imagen parece que era una meta mal situada, quisiera saber si me puedes ayudar cuando comparto mis post en google+ antes del titulo del tema se muestra el nombre de mi pagina sabes como lo quito?
ResponderEliminarEjemplo:
OloBlogger: Como cambiar las minuauras de tu blog
y yo quiero que me aparezca solo:
Como cambiar las minuauras de tu blog
como elimino el nombre de mi blog del principio
Si editas tu plantilla, al principio encontrarás algo así:
Eliminar<title><data:blog.pageName/>| <data:blog.title/></title>
Si quieres eliminar el nombre de tu blog, que se quede en un simple:
<title><data:blog.pageName/></title>
Hola! ¿Qué tal estás?
ResponderEliminarEn mi caso se trata del thumbnail para la versión móvil (que se ubica en el área llamada 'mobile-index-post'), tiene relación de aspecto automática de 1:1 y quisiera cambiarla para poner las imágenes con un width de 100% pero con menos height, no sé si me hago entender. Logré redimensionar las imágenes de las entradas populares gracias a un script que compartieron, pero con los thumbnails de los posts no he podido. ¿Podrías ayudarme, por favor? Te lo agradecería mucho.
Esperaré tu respuesta :D
Por cierto, por si acaso este es mi blog.
Un saludo, que tengas un día espléndido.
Buenas Jisela
EliminarPuedes usar este mismo script, pero como lo que quieres es recortar en rectángulo, en el primer trozo de código deberás cambiar:
'/s'+size+'-c/'
por
'/w900-h750-c/'
Eso sería para una proporción 6:5 que me pareció ver que era la que intentabas sacar. Si no, cambia los valores 900 y 750 al gusto.
Oloman muy buen post! Las Imagenes que suelo utilizar no son cuadradas y el gadget de Blogger(Entras Populares) me genera una imagen 72x72 o sea cuadradas por lo tanto me salen las imagenes recortadas. Hay Alguna forma de que pueda poner las dimensiones especificas tanto de width como de height? Te agradezco de antemanos
ResponderEliminarHola Eliseo.
EliminarComo este post es antiguo, actualmente conozco al menos dos sistemas más de hacer lo que necesitas, pero tendrás que adaptar tú el código.
Esta explicación te serviría para usar el código de esta entrada, pero cambiando la conversión a una imagen cuadrada (300-c) a una de cualquier ancho/largo (w300-h200).
Y también puedes usar actualmente esto otro operador, nativo de Blogger, para evitar usar JavaScript.
la solcuion es mas simple de lo que parece, sin javas ni nada de nada solo codigo blogger y css, igual para celulares
ResponderEliminar