JMiur [E]

El gadget Lista de blogs es interesante porque es una de las formas más sencillas de mostrar el contenido de los feeds de cualquier sitio pero, también lo podemos usar para mostrar los nuestros, por ejemplo, las últimas entradas.

Tiene una ventaja sobre otros sistemas: podemos mostrar miniaturas que se correspondan con las imágenes que haya en esas entradas pero tiene una limitación, sólo muestra una entrada por blog. Sin embargo, ya que los feeds son una dirección URL a la que podemos acceder agregándole algunos parámetros, podríamos utilizar esa facilidad para mostrar varias entradas del mismo sitio.

Los parámetros en cuestión son start-index max-results que son los mismos que se utilizan para agregar varios sitemaps. Lo empleamos agregándolos al final de la URL:

http://miblog.blogspot.com/feeds/posts/default?start-index=1&max-results=1

hará que se lea una sola entrada, la última ya que por defecto, los feeds están ordenados cronológicamente. Del mismo modo:

http://miblog.blogspot.com/feeds/posts/default?start-index=2&max-results=1 mostrará la segunda
http://miblog.blogspot.com/feeds/posts/default?start-index=3&max-results=1 mostrará la tercera

y así sucesivamente.

Entonces, vamos a agregar un elemento Lista de Blogs e iremos poniendo las URLs de nuestro sitio, cambiando start-index. Pondremos tantos como se nos ocurra y marcaremos las opciones a gusto.

Si guardamos eso veremos el gadget con las últimas entradas de nuestro blog pero, aún así, podríamos intentar personalizarlo más ya que tiene propiedades definidas por defecto por el mismo Blogger y como el código es accesible, nada impide que lo cambiemos. Entonces, primero crearemos un elemento Lista de blogs, agregaremos las URLs, guardaremos y luego, en la parte de Edición HTML expandiremos la plantilla y veremos el widget que se llamará BlogList1, BlogList2 o algo similar, dependiendo de si ya tenemos agregado otro gadget del mismo tipo:
<b:widget id='BlogList1' locked='false' title='EL TITULO' type='BlogList'>
<b:includable id='main'>
... borraremos todo lo que está acá y lo reemplazaremos ...
</b:includable>
</b:widget>
Ahora, borraré el contenido completo del includable y lo reemplazaré por otro donde he eliminado ciertas cosas y reemplazado las clases CSS para evitar conflictos:
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div class='milista' expr:id='data:widget.instanceId + &quot;_container&quot;'>
<!-- el gadget es una lista -->
<ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
<b:loop values='data:items' var='item'>
<!-- cada item de la lista corresponde a una entrada -->
<li>
<!-- inicio rectángulo de cada entrada -->
<div class='UEcontenido'>
<!-- la imagen flotará a la izquierda -->
<div class='UEthumbnail'>
<b:if cond='data:item.itemThumbnail'> 
<!-- si en el post hay una imagen, la usamos -->
<img class='UEsithumb' expr:src='data:item.itemThumbnail.url'/>
<b:else/>
<!-- si no hay una imagen, ponemos una imagen personal -->
<!-- acá debemos poner la dirección URL de la imagen a utilizar -->
<img class='UEnothumb' src='URL_imagen_por_defecto'/>
</b:if>
</div>
<!-- el titulo y enlace de la entrada -->
<div class='UEtitulo'>
<a expr:href='data:item.itemUrl' target='_blank'><data:item.itemTitle/></a>
</div>
<!-- el texto con el resumen de la entrada -->
<div class='UEresumen'><data:item.itemSnippet/></div>
</div>
<!-- final rectángulo de cada entrada -->
<div style='clear: both;'/>
</li>
</b:loop>
</ul>
</div>
</div>
Por supuesto, si se comprende qué es cada parte, esto podría organizarse de cualquier otra forma; en este ejemplo, sólo faltaría agregar el CSS antes de </head>:
<style>
.milista ul { border-bottom: 1px dotted #555; list-style-type: none; margin: 0; padding: 0; }
.milista ul li { background-color: #000; border-top: 1px dotted #555; clear: both; list-style: none; }
.milista ul li:hover { background-color: #123; }
.milista .UEcontenido { padding: 5px; }
.milista .UEtitulo { line-height: 50px; height: 50px; }
.milista .UEtitulo a { color:#ABC; font-family: Tahoma; font-size: 13px; font-weight: bold; }
.milista .UEtitulo a:hover { color: #CDE; text-decoration: none; }
.milista .UEthumbnail { float: left; margin: 0 5px 0 0; }
.milista img { height: 50px; width: 50px; }
.milista .UEresumen { clear: both; color: #999; font-family: Tahoma; font-size: 10px; }
</style>

137 comentarios:

Anónimo  

Esta muy bueno el truco, pero... ¿no hay ya un gadget que hace lo mismo?

Responder
Joan Irazu  

me gusto, yo habia visto uno parecido pero las entradas se cambiaban con jquery, me gusto y te queria preguntar ahorita que vi los parametros, se le puede agregar mas entradas en el gadget de Feed de las ultimas entradas, ya ves que lo maximo son 5 se le puede agregar mas entradas con los parametros.

Responder
JMiur  

JorG:
No tengo idea pero l oque abunda no sobra.

CHiCken:
No, no creo que puedahacerse eso. Pudes probar colocando la URL pero dudo que funcione.

Responder
Unknown  

Muy bueno, te robo lo del css :)

Responder
Bloguero  

Muchas gracias por este truco. La verdad que viene muy bien para completar la sidebar con elementos que faciliten la navegación e incrementen el tiempo de permanencia de nuestras visitas.

Como siempre, muy últil tu blog.

Gracias.

Responder
VozMadridista  

Muy buena idea. Uso las lisas de blogs y me gusta como se presentan, pero siempre aborrecí (de hecho lo quité) la forma en que se presentaban normalmente las "últimas entradas" propias. Voy a ver si lo pongo en práctica.

Molesto tu atención sobre otro elemento que resultaría muy interesante de tener a disposicion. No sé como se llamará, yo lo denomino Tabber Widget. Puedes ver una imagen de lo que mer refieroaquí. Me parece una manera muy prolihja de organizar links hacia contenido propio o ajeno y la he visto usada en blogs personalizados en el propio blogger (así que sí se puede hacer). El de la foto tiene un CSS Style como sigue:

/*--------Tabber--------*/
#tabsidebar-wrapper {
width: 402px;
float: left;
border-top: 1px none #DCDCDC;
border-left: 1px none #DCDCDC;
border-bottom: 1px none #DCDCDC;
margin: 0 0 0 5px;
}
.tabberlive .tabbertabhide {
display:none;
}
.tabber {
display:none;
}
.tabberlive {
margin-top:2px;
}
.tabber h2 {
border-bottom:2px solid #DCDCDC;
margin-bottom: .3em;
padding:0;
line-height:1.2em;
}
.tabber .widget {
margin-bottom:1em;
}
.tabber .widget-content {
margin:0 5px;
}
ul.tabbernav {
margin:0;
padding:8px 0;
border-bottom: none;
font-weight:bold;
}
ul.tabbernav li {
list-style:none;
margin:0;
display:inline;
font-weight:700px;
}
ul.tabbernav li a {
padding: 8px .5em;
margin-right:2px;
border: 1px solid #DCDCDC;
border-bottom: none;
background: #EEE;
text-decoration: none;
}
ul.tabbernav li a:link {
color:#369;
background: url(http://3.bp.blogspot.com/_7XLk5hM-lpg/SlngY7bEWMI/AAAAAAAABFA/SG_RbqSN6XM/s400/titulo-posts.jpg) repeat;
}
ul.tabbernav li a:visited {
color: #369;
}
ul.tabbernav li a:hover {
color:#00F;
border-color:#DCDCDC;
}
ul.tabbernav li.tabberactive a {
background-color:#FFF;
color:#369;
border-bottom:1px solid #FFF;
}
ul.tabbernav li.tabberactive a:hover {
color:#369;
background:#FFF;
border-bottom:1px solid #FFF;
}
.tabberlive .tabbertab {
background:#FFF;
padding:5px;
border:1px solid #CCC;
border-top:0;
}
.tabberlive .tabbertab h2 {
display:none;
}
.tabberlive .tabbertab h3 {
display:none;
}
Lo que no alcanzo en mi limitado entendimiento, es saber cómo se aplica para insertarlo en el blog.

Sugerencias...?

Responder
VozMadridista  

Encontré una referencia que parece solucionar mi inquietud en el blog dde Oloman. Gracias de cualquier modo.

Responder
JMiur  

Graciela: Todo suyo :D

Gracias, Daniel :D

Responder
Adrián J. Messina  

Esta excelente la idea, parece facil de aplicar y muy ingeniosa.
La voy a tener en cuenta, en estos dias intentare aplicarla, luego comentare al respecto.
Como siempre elegantes y llamativas entradas Jmiur, un procer.
Un gran saludo!

Responder
Bonzu Pipinpadaloxicopolis III  

Este sistema me gusta

Responder
Theemilio_crazy  

@Bonzu Pipinpadaloxicopolis III

Excelente lo mismo digo...

Responder
Marcos Gabriel  

Eu ja usava este sistema de gadgets do blogger para fazer isto ...

A vantagem é que não precisa de javascript para funcionar logo voce sempre terá recent posts mesmo com o JS desativado.

Responder
Bonzu Pipinpadaloxicopolis III  

Hola JMiur, te comento que estoy usando este sistema pero además me di cuenta que tambien se puede usar el feed de las etiquetas y tener un las últimas entradas de etiquetas específicas. :-)

Responder
JMiur  

Claro. Funciona con cualquier tipo de feed.

Responder
Bonzu Pipinpadaloxicopolis III  

Entonces también se podría usar con el feed de los comentarios y así tener los últimos comentarios sin usar un script. Tiene sus desventajas porque no te muestra el nombre del comentarista.

Responder
JMiur  

Que no se vea el script no significa que no exista. En todos estos casos, es Blogger quien las ejecuta o lee los feeds así que el resultado final diferira demasiado en cuanto a tiempo y procesos de carga.

Responder
Bonzu Pipinpadaloxicopolis III  

Claro, olvidaba ese detalle ¬_¬

Responder
Unknown  

hola. se puede identificar las entradas cronologicamente de feedburner? feeds.feedburner.com/blogspot/ZsXe ?start-index=2&max-results=1 algo similar al ejmplo de arriba

Responder
JMiur  

No creo. De todos modos, no tiene mucho sentido ya que el feed original es el de Blogger, Feedburner sólo los gerencia.

Responder
Bilosony2™  

muy bueno... tengo una idea se podria usarlo pero que la primera entrada no se vea???

Saludos!!

Responder
Bilosony2™  

Disculpa ya re solvi mi duda jeje pero ahora tengo otra como puedo hacer para que este gadget solo aparesca en la pagina principal y en las otras no se vea.....???

Responder
JMiur  

Usando los condicionales de Blogger.

Responder
AnbuZer0  

Hola. Tengo un problema, después de hacer todo lo que indicas no logro hacer que se vean las miniaturas, sale el titulo y el resumen pero no la imagen. Alguna solución o alternativa?
Saludos (:

Responder
JMiur  

AnbuZer0:
Si se trata de este blog:
http://never4us.blogspot.com/
se ven perfectamente y por cierto, has logrado una estética muy interesante. Me gustó :D

Responder
AnbuZer0  

Jaja gracias, lo logre siguiendo algunos de tus consejos.

Mi intento esta en http://pruebasnever.blogspot.com/ aquí siempre pruebo y experimento antes de insertarlo en mi blog.

Saludos (:

Responder
Unknown  

Disculpa creo que no me explique bien, Mi intento con el post esta en este blog http://pruebasnever.blogspot.com/ aquí trate de hacer lo indicado, pero no se muestran las miniaturas, se puede ver el titulo y el resumen, pero no sé porque razón las miniaturas no se muestran.

El diseño del otro blog lo logre siguiendo los pasos de algunos de tus post Jeje fue de bastante ayuda para lograr lo que quería :)

Saludos!

Responder
JMiur  

También se ven bien. La única diferencia con el otro es que allí son mas grandes y miden 500x200 pero, las imágens se ven perfectamente. Esto es lo que veo.

Responder
AnbuZer0  

Ah! no no me refiero a eso, yo hablo de la barra que está entre el header y los post (donde dice #Otakuqueserespeta) yo intente hacer lo que se relaciona a este post, mostrar en esa barra las “últimas entradas con miniaturas”... hice todo como explicas, solo quiero insertar 3 entradas, pero aparecen las 3 últimas entradas sin las miniaturas. (Agregue los feeds del otro blog)

Disculpa las molestias :)

Responder
JMiur  

Entiendo. Tampoco he podido ver esas miniaturas cuando agrego tu sitio a una Lista de Blogs l oque significa que el problema no hay que buscarlo por el lado del código sino que hay algo en el mismo Blogger que no las envia.

Responder
Isaac Chavero  

Hola, como podemos hacer que la lista de enlace se abrá en la misma ventana y no en una aparte

Responder
Isaac Chavero  

prueba superada solo habia que eliminar los target blank, perdona las molestias

Responder
Emilio Luna  

Una pregunta, que podemos hacer para alinear el título (yo no pongo el inicio del post) junto en el centro de cada recuadro -rectángulo- (aquí el título va arriba a la derecha de la imagen). Gracias

Responder
JMiur  

El título se controla con esto:
.post h2 {}
por defecto dice: text-align:left; así que cambias eso por l oque quieras poner. No sé cuál es el diseño que quieres lograr.

Responder
Emilio Luna  

Hola J.Miur, gracias por contestarme. El caso es que quiero mantener la distancia entre líneas (en los post donde hay dos líneas de título) y bajarlo un nivel. Te dejo la dirección de mi blog http://elantepenultimomohicano.blogspot.com/

Cambie left por center, pero no hubo cambio alguno. Muchas gracias J.Miur por la ayuda y por el tutorial que es estupendo.

Responder
JMiur  

En ese blog no veo que haya entradas resumidas y el centrado de los títulos se hace con eso que te dije:
.post h2 {text-align:center;}
alli, puede verse que dice la regla sigue diciendo text-align:left;

Responder
Emilio Luna  

La verdad es que me refería al widget de entradas recientes. Centrar el texto en el rectángulo creado. Alineado tal cual está, a la izquierda junto al thumbnail pero con el mismo margen arriba y abajo y en el caso que las líneas de título fueran largas, mantuvieran el espacio actual entre ellas.

Responder
JMiur  

No sé cómo podrías hacer eso a menos que uses una tabla con dos celdas alineadas verticalmente, una para la imagen y otra para el texto.

Responder
Emilio Luna  

Muchas gracias JMiur, me gusta como queda. Una última pregunta cómo adaptar este modelo a las entradas populares. Ponerlas con el mismo estilo (milista, en este caso). Muchas Gracias.

Responder
JMiur  

No veo cúal es ese widget. Si es genrado por un script (imagin oque así es) no hay otra alternativa que modificar el script en si mismo.

Responder
Emilio Luna  

Me refería al gadget de blogger de entradas populares. El último que ha incorporado junto a estadísticas. Era poner las entradas populares de tu blog igual que las últimas entradas de este post, que esta genial por otra parte.

Un saludo.

Responder
JMiur  

Es similar al otro. No tengo el detalle para darte pero, me fijare si puedo hacer una entrada al respecto.

Responder
Bilosony2™  

Jmiur hay alguna manera como para poder hacer lo mismo pero con picasa haci muestro las ultimas imagenes subidas?

Saludos!!

Responder
JMiur  

Con un elemento de este tipo me parece que no. Para eso, deberías usar algún script que leyera los feeds de los albums.

Responder
Javier  

Lo intento en mi blog, http://ambitotoros.blogspot.com/ y me surgen dicicultades. Se van quedando las entradas repetidas, ¿Podría ayudarme?, gracias

Responder
JMiur  

No sé donde está tu ejemplo de todas maneras, es algo que no puede vere online. Si hay entradas repetidas es que has cometido algún error y has dejado alguna parte sin condicionar.

Responder
Pablo  

disculpa lo puse en mi web pero no aparencen las imagenes, supongo que es por las urls son de otra web y quisiera saber como editarlo?? :D

Responder
JMiur  

No sé dónde lo has puesto. Que sea de otra web no influye, los feeds siempre son externos.

Responder
Pablo  

mmm...
mira este es mi blog http://movies.changocel.com/
el gadget no muestra ninguna imagen no se si sea por el dominio personalizado, incluso intente con la direccion blogspot y no anda,
tengo otro gadget que hace lo mismo y si muestra las miniaturas pero al momento de darle clic afecta a adsense D: si ocupo las miniaturas ya que mostraria los ultimos juegos, videos e imagenes :S

gracias por contestar mi primera pregunta y espero que tengas alguna respuesta :D

Responder
JMiur  

Si el gadget al que te refieres es el de la izquierda, ahi se ven las miniaturas: captura.

Responder
Pablo  

es la imagen que usa cuando no encuentra un en el post :/ y los post si tienen imagen

Responder
JMiur  

Las imagenes son tomadas de los feeds del sitio y por l oque se ve, ese blog:
http://juegos.changocel.com/
no los tiene habilitados o son parciales. Si te fijas en la dirección de los feeds, verás que no se ven imágenes:
http://juegos.changocel.com/feeds/posts/default

Responder
Manuel Alberto  

Hola JMiur.
Tengo el siguiente problema con el gadget de Últimas Entradas de blogger:
Error en IE8
Como se puede apreciar, una de las miniaturas del gadget, no lo es.
Esto me había sucedido anteriormente con la imagen de un gif animado.
Lo solucioné, "caseramente", colocando al inicio del post una miniatura de la imagen para que sea tomada por el feed.
Ahora se repite el problema para una imagen que sirve de enlace para mostrar un video.
Esto ocurre en IE8, ya que en FF, se ve todo bien.
Qué puede estar sucediendo?
Gracias por tu ayuda :)

Responder
JMiur  

No sé cuál es el método que estás utilizando. No es este del que habla la entrada. De todas maneras, en ese código que se ve hay un error ya que las imágenes de las miniaturas dicen esto:

<img width="50px" height="50px" ..............

Y en los atribuots width y height no se debe colocar la unidad pixeles; debe ser así

<img width="50" height="50" ..............

Responder
Manuel Alberto  

Estoy usando el gadget que provee blogger para mostrar las últimas entradas.
El dato de la miniatura 50x50 está dado en el gadget.
Creo que el gadget automáticamente aplica ese valor cuando uno lo elige.
Alguna sugerencia?

Responder
JMiur  

En realidad, los únicos gadgets que provee Blogger son los que figuran en la parte llamada Basico; el resto, son gadgets creados por empresas o personas diversas. En este caso particular, por este sitio:
http://www.bloggerplugins.org/2009/07/recent-posts-widget-blogger-thumnail.html
que es un sitio web como cualquier otro y no tiene relación alguna con Blogger; no es el único de ese tipo, hay otros y todos hacen más o menos lo mismo con ciertas variantes.

De todos modos, los gadgets de ese tipo, ese y cualquier otro, sólo pueden ser modificados a través de las opciones que ofrece quien los ha creado. No hay forma de modificarlos o de corregir errores ya que se insertan con un IFRAME.

Si lo que se quiere es tener un control más o menos completo sobre la forma de mostrar las entradas debe agregarse alguna clase de script para leer los feeds (que es lo que hace el gadget) y luego mostrar el resultado de alguna manera; eso es lo que intenta mostrar esta otra entrada.

Responder
Manuel Alberto  

Gracias por la explicación.
Saludos

Responder
Kas-Tro  

Gran tutorial JMiur como siempre..tengo una duda resuelta que en el titulo me queda un espacio muy grande entre lineas y si lo redusco si va completo mas arriba y no queda centrado con las imagenes, tambien me preguntaba como poner menos espacio entre las lineas de las descripcioens de las entrada de este wiget ya que me aparecen muy seperadas.. gracias http://prueba2056.blogspot.com/

Responder
JMiur  

El espacio entre líneas se controla con line-height pero sólo te servirá para linear verticalmente en ciertas condiciones.

Puedes colocar el interlinaido normal y luego bajar el título con padding pero no se alineará automáticamente en el centro:

.milista .UEtitulo {
height: 50px;
line-height: 1;
padding-top: 10px;
}

o puedes usar otras propiedades para hacer eso y alinearlo perfectamente sin importar la cantidad de líneas pero, teniendo en cuenta que no funcionará en IE7 o en versiones inferiores de IE8:

.milista .UEtitulo {
display: table-cell;
height: 50px;
line-height: 1;
vertical-align: middle;
}

Responder
Kas-Tro  

Gracias me quedo super bien ahora..

Responder
Santiago  

Saludos :) Queda muy simpático haciéndolo de esta forma pero... al crear dos o más entradas nuevas y publicarlas, se desconfigura. Es decir, se repite una de las entradas. Cuál podría ser el problema?

Responder
JMiur  

Lo desconozco. Nada de lo que hace un gadget es controlable.

Responder
Liz Hopps  

Hola
Espero que estès bien?
Y si sólo deseo las miniaturas?..se puede???

Muchos cariños y gracias

:D
LIZ

Responder
JMiur  

Sí. Creo que si. Bastaría indicarlo en el gadget, seleccionando sólo Miniatura o sino, directamente eliminando todo lo que está entre:

<!-- el titulo y enlace de la entrada -->

y

<!-- final rectángulo de cada entrada -->

Responder
Liz Hopps  

Gracias ...como siempre una un Maestro Yoda =P

=)

LIZ

Responder
Maite  

Hola JMiur :)
vengo con algo que creo es algo complicado... para despejar un poco mi sidebar y organizarme mejor mantuve dos gadgets de blogs amigos e hice un blog nuevo con todos los demás enlaces que me interesaban. En éste nuevo no me interesa sidebar sino páginas (http://hastalalunaidayvuelta2-enlacesautismo.blogspot.com/)
Lástima que uno de los que quité fue el gadget de blogs de recursos y materiales y ahora me siento un tanto perdida porque me era muy útil ver el nombre y el titulo de la ultima entrada publicada, lo típico del gadgets de blogs. Podría hacer algo similar para una entrada y lo pongo como codigo en una de las páginas? me han "chivado" ;) que podría ser un código basado en la idea de esta entrada pero lo veo imposible para mi.
Te lo agradecería mucho, me siento coja sin tener esa información a mano. La otra opción es poner un gadget de blogs en uno de prueba y consultarlo allí, pero resulta muy muy incómodo y además hacerlo "bien" sería igualmente facilitar información para quien lo consulte, no solo para mi. Ahora simplemente tengo los enlaces a las direcciones de los blogs (en la pagina de "materiales") pero algo tan útil se ha convertido en nada más que en una lista de nombres. ¿Me haces magia una vez más por favor?
Muchas gracias. Un abrazo

Responder
JMiur  

Maite:
Muy claro no me queda pero igual hablo en voz alta :-)

Puedes colocar un gadget en cualquier página individual y sól overlo en esa página; no hace falta que esté en la sidebar sino que puede colocarse en cualqueir otro lugar y condicionarse para que sólo se muestre en esa página.

También puedes usar un script y colocar una lista de entradasleyendo los feeds. Puede hacerse de muchas maneras simples o más complejas. Eso es l oque hacen algunos trucos como las Tablas de Contenidos.

Del mismo modo puede usarse cualquier tipo de script de últimas entradas, todos funcionan más o menos igual con variantes en cuanto a diseño.

De todo eso, lo mas sencillo es el gadget, sin duda, ya que con eso no es necesario agregar ningún script.

Responder
Maite  

Ohhh puedo poner el código del gadgets de blogs en una ventana de edición de html ?? como si estuvieramos haciendo una entrada? eso sería perfecto!!!
Me saldría la relación de cada blog y debajo de cada uno la última entrada... como tengo los de autismo en la sidebar de la luna.
Pero Jmiur, cuando expandí artilugios (creo haberlo hecho así, hice muchas pruebas y todas mal... ) y cogí la parte del cod que pone b:widget etc etc correspondiente al gadget de blogs no conseguía que saliese nada. Tienes alguna entrada que me pueda servir de referencia de las líneas de código que tengo que usar exactamente?
Eres una maravilla :D qué alegría me acabas de dar !!!!

Responder
JMiur  

No, eso no puedes hacerlo. Mejor dicho, puedes pero no funcioanrá, debe estar en la plantilla misma, en un widget como cualquier otro.

No sé cuál es la idea del diseño pero, por ejemplo, en MATERIALES Y APOYOS, abaj de todo hay una lista Blogs de recursos y materiales. Supongamos que, en luagr de tener esa lista, lo que quisiera es ver l oque meustra el gadget de Lista de Blogs (creo entender que eso quieres).

Entonces, lo que puedo hacer es colcoar ese gadget debajo del elemento Blog y listo; el resto es cuestión de darle algún tipo de formato con CSS dentro de l oque e pueda; de esa manera, habrá una "continuidad entrada-gadget", y eso se condiciona de tal modo que sólo se ejecute en esa página estática.

Responder
Maite  

"No, eso no puedes hacerlo" ... mi gozo en un pozo... jajajaja
Lo que apuntas exactamente eso es lo que quiero !!!! (me extendí tanto para explicarlo que lo hice confuso :D )
Al leerte me ha recordado al colegio, quise buscar una solución tan complicada para algo que yo misma creí complejo, que no pensé en la opción más sencilla y correcta :D me has rejuvenecido por un rato sin quererlo jajajj gracias!

Ya tengo trabajito para cuando no se me cierren los ojos como ahora. Lo condicionaré para que solo se muestre en esa pagina, y listo.
Qué bueno Jmiur! un besazo !

Responder
JMiur  

Bien :-D

Se me ocurre que, como la página es ancha, tal vez un gadget no se vea muy bien, habría que probar pero, llegado el caso, pueden agregarse dos o tre y ponerlos en columnas uno al lado del otro, siempre debajo de la entrada.

Responder
Maite  

Ay! que me planteas mucho código jajaja dos o tres! esperemos que no me de mucho trabajo :D gracias! ya te contaré ;)

Responder
JMiur  

Pruebe. Usted puede :-)

Responder
Maite  

He podido!!! pero solo el primer paso :) he usado tus condicionales. Qué alivio, no me salia! jajaja

Pero como bien dices estéticamente queda... fatal! tendría que separarlo en dos. Podríamos simplificar dividiendo el gadget en dos columnas al igual que hacemos el texto en dos columnas en las entradas? si es así... no me sale :$ si tienen que ser dos gadgets supone separar los enlaces y se pierde el orden de actualización de los blogs (tampoco es lo más importante, no pasa nada).
Por cierto... veo un inconveniente, lo de "pagina principal" queda por encima del gadget de blogs, evidentemente. Podemos usar una condicional en esta pagina para decir que lo ponga debajo del gadget? estas cosas son ya demasiado complicadas para mi...

Responder
JMiur  

Empiezo con lo simple. Lo de Página principal es la parte de las entradas que permite la navegación pero, acá no hay navegación así que stambién se puede condicionar u ocultar en esa página:
#blog-pager {display:none;}
Si se quiere, luego se agrega un enlace al home en la parte inferior ya que eso es todo lo que hace ese enlace.

Una cosa que haría es, siempre en el condicional, eliminar márgenes:
.main .widget {margin: 0;padding: 0;}
.post-body {margin: 0;}
.post {margin: 0.5em 0 0;padding-bottom: 0;}
#BlogList1 {margin: 0;padding: 20px;}

Y por último, es posible crear columnas sólo con CSS; por ejemplo:
.blog-list-container ul li {
clear: none;
float: left;
font-size: 12px;
height: 170px;
width: 320px;
}

Responder
Maite  

Qué buena idea quitar lo de pag principal! si total lo que tú dices, no se navega! ni sabía que podíamos quitar eso :D
He puesto las dos columnas y muchisimo mejor! algo me dificulta quitar los márgenes, porque puse el bloglist1 con los márgenes precisamente fuera de la condicional porque si no me daba problemas (jejejj se nota que estoy desentrenada!) y cuando lo intento poner dentro me quita el fondo de la caja pero con tiempo lo volveré a intentar :D hoy me toca un descansito, disfruta tu también :D un abrazo y mil gracias !!!

Responder
JMiur  

Si ese gadget sólo se muestra en esa página, convendría que el CSS también estuviera condicionado y debería funcionar normalmente. Si no muestra el fondo, revisa porque debe ser algún error de sintaxis, un punto y coma, un espacio, algo que falta o sobra.

Responder
John Mistery Doe  

Hola JMiur!

Tengo un problema con el gadget, al principio funcionaba perfectamente y mostraba las ultimas 10 entradas publicadas, pero al publicar hoy 2 entradas nuevas, no aparecen las nuevas y se repiten 2 de las entradas que anteriormente se mostraban. Que puedo hacer?

Saludos.

Responder
John Mistery Doe  

Hola de nuevo JMiur
El problema se soluciono por si solo, parece ser que solo había que esperar un tiempo a que se actualizara (o eso creo). Perdona las molestias.

PD: Se podrían enlazar también las miniaturas? Saludos.

Responder
JMiur  

De todas manera, es posible que aparezcan repetidas; aparentemente, eso ocurre cuando se edita y se actualiza alguna entrada.

Responder
María Pilar  

Gracias por esta aportación. Tenía otro gadget, pero no me funcionaba bien, me salían repeticiones siempre que editaba una entrada nueva. Este me ha quedado tal como tú indicas. Hay maestros y hay maestros de maestros. Saludos.

Responder
John Mistery Doe  

Hola JMiur, Como podria colocar este gadget dentro de una entrada?, Saludos!

Responder
JMiur  

Del mismo modo que en la plantilla o en un elemento HTML con la salvedad que el script deberá ser cargado desde un archivo externo ya que no podrás escribirlo en una entrada.

Responder
TV ISLAMUJERES  

lo hice tal cual me funcionó a la primera, perooooo, al actualizar uno de los blogs, la imagen en miniatura no cargó, me sale como un enlace roto??? no se en donde está el error http://bit.ly/fcVxWB, pensé que tal vez era cuestión de esperar a que se actualizara, pero nada, ya llevo un día así, algún consejo??

Responder
JMiur  

Si en el código fuente de la págima, no ves que Blogger haya agregado la etiqueta:
<link rel="image_src" ...... >
con la dirección de la miniatura, no puedes hacer nada ya que tampoco aparecerá ese dato en los feeds.

Deberías colocar una imagen por defecto, reemplazazo esto: URL_imagen_por_defecto por la dirección de esa imagen.

Responder
TV ISLAMUJERES  

Agregué nueva entrada (incluyendo dos fotos)en uno de los blog, pero no cargo, sale como enlace roto, lo que tu me dices con reemplazar imagen por defecto te refieres a que usará esa imágen cuando la entrada no tenga imagen no??, pero si le puse imágenes, de hecho las primeras si las aplicó bien..Gracias

Responder
JMiur  

En el código fuente se ve que el atributo SRC de esa imagen dice: URL_imagen_por_defecto

Responder
Unknown  

Me gusta mucho esta idea, pero no me gustan las miniaturas, me gusta como lo tienes tu, como le haces para que aparezca solo la lista o eso es lo que yo veo :-l

Responder
JMiur  

No entiendo a lo que te refieres.

Responder
Unknown  

Me refiero a esto

http://i.min.us/ilhlbA.JPG

Responder
JMiur  

Eso es simplemente el elemento Feeds que se puede agregar desde la primera ventana de Diseño como cualquier otro gadget y donde colcoas la URL del feed de tu blog.

Responder
Unknown  

Y hay un CSS que lo controle??

Responder
María Pilar  

Hola JMiur, tengo este gadget puesto en mi blog y me gusta, solo que cuando pongo un título muy largo a la entrada una parte del mismo flota por encima de lo escrito, ¿cómo puedo bajar la imagen y dejar el título de la entrada solo y a la izquierda como lo tienes tú?

Responder
JMiur  

Veamos si funciona esto. En:

.milista .UEtitulo {
height: 50px;
line-height: 50px;
}

quita line-height: 50px; que está pensado para centrar verticalmente el texto pero, si tiene dos líneas, habrá problemas.

Cambiarlo para que el título se vea a todo lo largo y arriba, requiere modificar varias cosas del CSS; te doy una idea aproximada para que pruebes y luego vemos:

.milista .UEcontenido {
clear: both;
padding: 5px;
position: relative;
}
.milista .UEthumbnail {
float: left;
margin: 20px 5px 0 0;
position: absolute;
}
.milista .UEtitulo {
height: 20px;
position: absolute;
top: 0;
}
.milista .UEresumen {
float: right;
font-family: Tahoma;
font-size: 11px;
margin: 20px 5px 0 0;
width: 155px;
}

Responder
María Pilar  

Muchas gracias JMiur, siguiendo tus indicaciones he conseguido resolver mi problema. Ahora lo dejo porque me pesan las pestañas. Me falta elegir el color adecuado y me quedará un gadget si no como los tuyos, al menos presentable.

Responder
JMiur  

Perfecto :D

Responder
John Mistery Doe  

Hola JMiur en el comentario numero 82 de esta entrada te pregunte como podría insertar este gadget dentro de una entrada y me contestaste que tendría que cargar el script desde un archivo externo. Me podrías decir como hacerlo? No tengo ni idea. Gracias!!!

Responder
JMiur  

Debes copiar el contenido del script en un archoivo de texto y subirlo a alguna parte cono google Sites o DropBlox; luego, en la entrada, se lo carag de este modo:.

<script src="URL_ARCHIVO" type="text/javascript"></script>

Responder
John Mistery Doe  

Gracias!!

Responder
Emilioj96  

Groso! Mil Gracias!

Responder
Valentín VN  

Muchísimas gracias.

Me funciona muy bien y he eliminado un widget externo que funcionaba cuando le daba la gana.

Mejor cuando "uno se lo guisa, uno se lo come".

Gracias, JMiur.

Responder
JMiur  

Perfecto, Valentín :D

Responder
Anónimo  

Muchísimas gracias de antemano.
Instalé el script y funcionó bien. Pero cuando cree una entrada nueva, ésta no aparece sino hasta después de muchísimas horas, casi un día. Solo aparece en ese lapso (además de las otras 4 entradas) la penúltima entrada y repetida. ¿Cómo se puede agilizar la presentación de la última entrada?
Muchas gracias

Responder
JMiur  

Eso no depende del script; depende de Blogger e incluso, a veces, depende del tipo de conexión ya que ciertos servicios, cachean la información y no muestran actualizaciones aunque estas existan.

Responder
Anónimo  

Muchísimas gracias JMiur. Eres un maestro y una buenísima gente.

Responder
Albert Arques  

Hola JMiur, es muy interesante este artículo. He estado probando y me encuentro con una questión: Es posible que la imagen del Feed que coloca por defecto Blogger (imagen tamaño s72-c) sea de otro tamaño distinto?

Muchas gracias de antemano.

Responder
JMiur  

El feed lo genera Blogger así que no veo que haya forma de cambiar eso.

Responder
Louie  

Buenísimo en truco!!! :P

Responder
christian neyra  

Hola JMiur he seguido paso por paso esta estupenda entrada y me ha quedado bien justo lo que estaba buscando hace tiempo, aunque me ha dado algnos problemas te explico:

Lo primero no se muestra las imagenes en miniaturas sólo si hay video si lo muestra en miniatura y no consigue mostrar si en la entrada hay sólo imagenes. ( aunque no me preocupa tanto ya que ha quedado bien para mí gusto)

Lo segundo y muy importantes ya que al utilizar esto me haquedado como yo quiero y me gusta, peor no consigo ocultar o eliminar la entrada que se muestra como estilo magazine al editar " entradas del blog > Opciones de la página principal, Número de entradas en la página principal: el minimo para mostrar es "1" y al tener este truco no me interesa entonces mi pregunta seria como puedo ocultar o quitar para que no estropee la estetica? me puedes ayudar te dejo la url de mi blog. http://www.juegosc24.com/ gracias.

Responder
christian neyra  

Como se puede dejar la parte que pone ( hace 2 dias o hace 3 dias) referente al día que se publico la entrada, en la lista del gatget original al ponerlo antes de agregarles los CSS se muestra el día que se publico "dicha entrada" y al poner los estilos se desaparece, yo quiero que se muestre alguna forma de hacerlo? por favor gracias.

http://www.juegosc24.com/

Responder
JMiur  

Si algunas imágenes no se muestran es porque Blogger no las ha registrado y no forman parte del feed. En ese caso, deberías modificar el script de alguna forma, basándote en lo que dice esta entrada.

Con respecto a lo otro, no entiendo la primera parte y no veo nada de esto en el blog que dejas como referencia.

Responder
christian neyra  

Hola JMiur, te dejo una imágen para que veas lo que no sale "esta marcado en rojo" http://i46.servimg.com/u/f46/15/86/85/80/urlddd10.jpg sale el titulo y el resumen pero me gustaria que salga la fecha o por lo menos hace cuantas horas o días se público eso post, en el feed original de lista de blog sale pero al aplicar lo que pones tu arriba ya no sale como puedo hacer para que muestre eso que quiero conseguir ? y si se puede añadir también los tags de cada post o es mucho pedir, gracias saludos.

Responder
JMiur  

En este caso no la incluí pero puedes hacerlo con facilidad, por ejemplo para seguir la misma idea de la entrada, habría que poner algo como esto:

<div class='UEfecha'><data:item.itemSnippet/></div>

Responder
christian neyra  

Hola miur no me va ese código me repite el resumen de cada entrada dos veces, lo he probado poniendolo entre.



class='UEresumen'>

.........................Aquí he puesto el código.................



veo que se repite este midmo código en resumen de entrada y el que me distes,data:item.itemSnippet/ no sé si tendrá algo que ver, pero no muestra lo que estoy buscando sólo repite el resumen de cada entrada dos veces.
Otro que me gustaria es poder alinear el resumen entre el titulo y la imáge, que quede algo así http://www.alfabetajuega.com/ donde pone noticias, muestra la imágen a la izquierda y el titulo y resumen bien en ordenado uno debajo del otro. gracias maestro espero tu respuesta.

Responder
JMiur  

Perdón. El error es mio, el dato de la fecha se encuentra en esto:

<data:item.timePeriodSinceLastUpdate/>

Responder
christian neyra  

Gracias jmiur ya lo conseguí XD, puedes resolverme mi otra duda por favor? quiero y me gustaria que puedan quedar así como el de está página las entradas http://www.alfabetajuega.com/ donde pone "noticias", donde sale las imagenes en miniatura con el titulo y el resumen todo esta bien encajado con la imágen me gustaria que quedará así en mi blog http://www.juegosc24.com/ gracias.

Responder
JMiur  

Eso es así en esa pa´gina porque la longitud de texto está adecuada al tamaño de la imagen; en tu caso, debes probar alternativas como reducir la fuente de los textos, la separacion de caracteres, los márgenes, el tamaño de la imagen, etc.

La estructura en ambos casos es la misma.

Responder
Anónimo  

Buenos días Jmiur he hecho unos cuantos cambiós en la plantilla, incluyendo los "condicionales" que he encontrado en tu blog. He puesto el gadget de úlimas entradas, todo bien, pero me ha quedado un interlineado muy ancho, si el titulo siguen en una siguiente linea, ¿que debo hacer? Gracias.

Responder
Anónimo  

JMiur, perdona me tenia que haber leído los comentarios, ya lo he solucionado, aunque no del todo cómo se indica, pero funciona, la única pega que no sé si tiene importancia es que la segunda linea empieza cómo en sangría, más hacia la derecha, ¿se puede evitar? Muchas gracias por tus explicaciones. Lo he puesto con condicional sólo para paginas individuales y en mi blog principal, Blogtecnia. En la versión en Catalán lo pondré en otro momento.

JMiur  

Hola, Carlos. Sí, vi los cambios ayer :D

Eso que comentas se verá de ese modo pero depende de la resolución de la pantalla. Se debe a que hay una regla de estilo en la plantilla que indica una indentación en las etiquetas LI de la sidebar:

.sidebar li {
.......
text-indent: -15px;
}

Si quitas eso, se soluciona pero también se eliminaría la indentación del gadget de comentarios. Puedes hacer dos cosas, eliminarla y agregar la regla para los comentarios:

#HTML1 li {
text-indent: -15px;
}

o al revés, dejarla y colocar la regla inversa para los gadgets de archivos:

.BlogList li {
text-indent: 0 !important;
}

En este último caso, verás que se desplazan hacia la derecha así que deberás compensar eso:

.BlogList li {
padding-left: 0 !important;
text-indent: 0 !important;
}

El paddig izquierdo (15px) que tiene la regla .sidebar li {} es justamente para eso, por un lado se le agrega indentación pero luego se la quita; si fuera yo, quitaría la propiedad y la agregaría sólo allí donde sea necesario porque siempre es mejor que todos los valores básicos sean cero o nulos.

Anónimo  

Me lo tendré que mirar con calma, de momento funciona, gracias por responder, un abrazo!

Responder
pvillegasy  

Hola Jmiur, ¿como podría colocar miniaturas y resumen a una lista de entrada determianda. Pues yo tengo unas entradas individuales que me funcionan como indice y quiero que se vean con miniatura y un resumen...? se podrá hacer?, pues todo lo que he consultado es automatico y es para colocarlos en el home de blogger...el listado de entrada que quiero ver con miniatura es como este: http://www.aguaysig.com/2010/04/spatial-analyst.html, yo creo que debe haber una forma aunque sea manual... muchs gracias

JMiur  

Otros feeds que pueden leerse sson los de las etiquetas; en ese caso, sól ocambai la URL
http://miblog.blogspot.com/feeds/posts/default
por
http://miblog.blogspot.com/feeds/feeds/posts/default/-/NO;BRE_ETIQUETA

Si esas entradas son de distinto tipo y ordenadas manualmente, no hay forma de hacerlo excepto escribiendo el resumen y colocando la imagen, una por una.

Responder
Emi  

Hola JMiur!
No me apaño para lograr que salgan las últimas entradas de una etiqueta específica, como decía más arriba Bonzu Pipinpadaloxicopolis III :S
¿Cómo serían las urls? Gracias!

JMiur  

Deberías indicar cuál es la url que no logras ver. La etiqueta debe ser escrita tal cual, respetando mayúsculas y minúsculas.

Emi  

¿Por ejemplo, sería
http://sinantifazonline.blogspot.com/feeds/feeds/posts/default/-/Noticias?start-index=2&max-results=1 y así?

Porque con esa url me dice que no detecta ningún feed.

Y poniendo http://sinantifazonline.blogspot.com/search/label/Noticias?start-index=2&max-results=1 me muestra el feed de todas las entradas...

JMiur  

Si se trata del feed de la etiqueta Noticias, la url sería:

http://sinantifazonline.blogspot.com/feeds/posts/summary/-/Noticias
o bien
http://sinantifazonline.blogspot.com/feeds/posts/default/-/Noticias

Emi  

Ahora si! :D:D

Al final era http://sinantifazonline.blogspot.com/feeds/posts/default/-/Noticias?start-index=1&max-results=1

No me salía porque ponía mal la url del feed...

Muchas gracias!!!

Responder
Yo Opino  

yo quisiera algo así pero con vídeos

Responder
Unknown  

Buenas, vi esta publicacion http://vagabundia.blogspot.com/2010/07/ultimas-entradas-con-miniaturas.html y me gustaria saber como hacer para que en miblog pueda colocar el feed de otra pagina y salgan completas, blogger tiene pero hasta 5, observa la pagina donde la implemente y dime una opinion, la web es www.descargalomejor-a.com.ar gracias!!!! te escribo por aqui porque la opcion contacto no funciona!!!

JMiur  

Si se trata de sitios alojados en Blogger, el sistema es el mismo; si se trata de otro tipo de sitios, se complica ya que deberás interpretar los feeds de cada uno e ellos y eso no es algo sencillo de hacer utilizando JavaScript que es el único lenguaje que puedes usar.

Responder
jules  

Hola! yo quería saber si es posible poner una lista de entradas, con miniatura y descripción, tanto en sidebar o en una página de blogger. Lo más parecido que enconré es "lista de blogs" pero yo quiero hacer una lista fija con las entradas que yo elijo ya que las entradas dirigen a perfiles de escritores que quiero mostrar. Hay alguna posibilidad de hacer esto? Algo parecido también vi en este blog, aunque es de wordpress, me encanta como queda: http://www.obamaworld.es/ el ejemplo está en la sidebar con título "mis libros" y allí él vende sus libros, yo lo usaría para poner foto del escritor, reseña y título que redirige a la entrada ya creada. Te agradezco desde ya, este Blog ha sido mi maestro los últimos 10 años!

JMiur  

Si son entradasque vas a elegir, no hay manera de automatizar nada salvo que las identifiques con una etiqueta.

Se puede hacer con facilidad si llo haces de modo manual, agregandolo en un elemento HTML.

Responder
del batitú  

Hola Jmiur. vi que seguís trabajando para nosotros, asi que voy a aprovechar- Esto que te quiero preguntar no tiene nada que ver con este post: estoy segura de haber visto un post tuyo en el que explicabas cómo incluir varios links en una imagen, pero no lo puedo encontrar. Trataré de explicarme: quisiera hacer un rectángulo que contenga formas que serán partes de fotos y que al clikear cada una de esas partes se abra una imagen distinta, por ejemplo usando este método: http://vagabundia.blogspot.com/2008/10/ampliar-imgenes-de-manera-sencilla.html
Es decir, no quiero agregar solo las fotos, sino partir de un dibujo dividido en secciones. Ganas de complicarse? qué le voy a hacer!! Gracias Jmiur por estar.

JMiur  

Una forma de hacer eso es mediante un mapa de imágenes; otra forma sería poniendo la imagen como fondo de un contenedor y colocando etiquetas html dentro, sin contenido pero dimensionadas.

del batitú  

Gracias jMiur, esto me llevará tiempo. Saludos

Responder
adm100388  

Qué tal, JMiur.

Tengo una gran pregunta y no sé cómo resolverlo... Por lo que pude probar es que la condición "if" de: "data:item.itemThumbnail" solo valida las imágenes si las subiste a algún sitio de Blogger, porque si las subís por ejemplo de imageshack, photobucket, dropbox o cualquier otro sitio, no la reconoce.

¿Por qué sucede esto? ¿No hay manera de obtener igual el enlace? No le encuentro una razón ni sé si se puede obtener el enlace. Busqué por Google, pero no encontré respuestas...

JMiur  

data:item.itemThumbnail es un dato que define el mismo Blogger y por lo tanto, nada puede hacerse para cambiarlo

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR