JMiur [E]

El gadget de posts rotativos es una idea adaptada por Templates Novo Blogger y que muestra una serie de entradas con un efecto interesante.

Lo primero que necesitamos para utilizarlo es disponer de una clave del API AJAX de Google para búsquedas. Al leer esto, parecería que se trata de algo mu y complicado pero, en realidad, basta ir a esa página, colocar la URL del sitio donde vanos a usarla y generar la clave que será una larga lista de números y letras como esta:

GFQIYYYmEsy0hRTvLkOBHGTRFoTOxQdHqM2VVjGZXZiTctOOgVFDSbcuBBp_W_qoHvPa_omCD5vxrkeKJxQ_V

He leído y acepto los términos y condiciones
Dirección URL de mi sitio web:


Con ese trámite burocrático terminado, ya podemos aplicar el truco.

El código lo agregaremos donde nos guste verlo, en la sidebar, debajo del header o incluso en un post en cuyo caso deberemos escribir todo en una sola línea:
<script src="http://www.google.com/jsapi/?key=AQUI_PONEMOS_LA_CLAVE_AJAX" type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>
<script type="text/javascript">
function showGadget() {
var feeds = [{title:'NOMBREBLOG', url:'http://URLBLOG.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'},];
new GFdynamicFeedControl(feeds, 'feedGadget', {numResults : 1000, stacked : true, title: "TEXTO TITULO DEL GADGET"});
}
google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<div id="feedGadget">Cargando ...</div>
donde debemos agregar nuestros datos, la clave AJAX, el nombre del blog o la dirección URL y él título que queremos usar.

Guardamos y listo.

Bueno, listo no ... faltaría el CSS que, como siempre, es lo que le dá características gráficas personales y que podemos agregar antes de </b:skin> o entre etiquetas STYLE:
#feedGadget { /* es el bloque donde se mostrará */
margin: 0 auto; /* lo centramos */
width : 350px; /* le damos un ancho */
}
.gfg-root { /* el gadget */
background-color: #234;
border: 1px solid #456;
font-family: Arial,sans-serif;
font-size: 12px;
height: auto;
overflow: hidden;
padding: 4px;
position: relative;
text-align: center;
}
.gfg-title { /* el título superior */
background-color: #456;
color: #CDE;
font-size: 16px;
font-weight: bold;
line-height: 1.4em;
overflow: hidden;
white-space: nowrap;
}
.gfg-subtitle { /* el título inferior */
background-color: #456;
font-size: 14px;
line-height: 1.4em;
overflow: hidden;
white-space: nowrap;
}
.gfg-entry { /* el contenido */
height: 9.9em;
overflow: hidden;
position: relative;
text-align: left;
width: 100%;
}
.gfg-root .gfg-entry .gf-result { /* el contenido */
background-color: #123;
height: 100%;
padding: 0 10px;
position: relative;
width: auto;
}
.gfg-root .gfg-entry .gf-result .gf-title { /* el título de las entradas */
color: #ABC;
display: block;
font-size: 13px;
font-weight: bold;
line-height: 1.2em;
margin-top: 5px;
overflow: hidden;
white-space: nowrap;
}
.gfg-root .gfg-entry .gf-result .gf-snippet { /* el texto de las entradas */
color: #AAA;
font-size: 12px;
line-height: 1.3em;
margin-top: 5px;
}
.clearFloat {
clear : both;
}
.gfg-list { /* lista de entradas opcional */
display:none !important;
}

Loading...

51 comentarios:

EL EQUIPO DEL BLOG.  

HOLA:
EN UNOS DIAS SE CUMPLE UN AÑO DE LA CREACION DE MI BLOG.
ESTOY MODIFICANDO LA PLANTILLA ZINMAG REMEDY, QUE LA BAJE DE btemplates.com. ESTE BLOG SIEMPRE USO UN BANNER. EN LA PLANTILLA MINIMA BLACK ES MUY SENCILLO PONERLO. PERO CON ESTE NUEVO MODELO DE TEMPLATE SE ME COMPLICA UN POCO. DE SER POSIBLE PODRIAS EXPLICARME COMO HAGO PARA PONER UN BANNER DENTRO DE DICHA PLANTILLA.
MUCHAS GRACIAS POR TU ATENCION.
SALUDOS.

Responder
Graciela  

esto sí es fácil :)...muito bem por Ariane!!! um dia bonito e beijinhos!!!

Responder
José GDF  

Ésto me gusta bastante y no parece muy complicado. Queda más sofisticado que un lector de feeds con las últimas entradas, por ejemplo.

Un día de estos me pongo y ya os cuento cómo me ha ido, auqnue tardaré en hacerlo.

Responder
JMiur  

EL EQUIPO DEL BLOG: Es muy dif´ciil contestar eso sin saber que tipo de banner vas a colocar o cual quieres que sea el resultado estetico. En abstracto, puede usarse esto:
#top {
background:#393F42 url(http://img65.imageshack.us/img65/3636/topfh9.png) repeat-x scroll center top
.......
}
Ese es el header actual y esa es la imagen de fondo que existe en este momento.

Graciela, José: Realmente es muy sencillo de agregar y se ve bien :D

Responder
Anahí  

Ah, me encantó este chiche, ya la apliqué. Gracias también a Ariane. :)

Responder
Jaime Trujillo Escobedo  

JMiur, ¡es perfecto este gadget! funciona a la perfección y no ralentiza el tiempo de carga :D lo tengo en mi blog de pruebas, quizás lo aplique al balcón ;)

¡Saludo0s! :)

Responder
JMiur  

Anahí, Jaime: Sí, es realmente un hallazgo porque funciona bien y bastante rápido.

Responder
EL EQUIPO DEL BLOG.  

HOLA DE NUEVO:
PUDE PONER EL BANNER CON EL CODIGO QUE ME DIJISTE.
AUN TENGO UN PROBLEMA. ME QUEDA SOBRE EL BANNER "EL TITULO Y LA DESCRIPCION", QUIERO OCULTARLO PARA QUE LA IMAGEN SE VEA COMO LA QUE TENES EL LA CABECERA POR EJEMPLO, Y QUE AL CLIKEARLA REDIRECCIONE AL HOME COMO LA TUYA.
MUCHAS GRACIAS POR LA AYUDA, MUY BUEN BLOG.
SALUDOS

Responder
Bonzu Pipinpadaloxicopolis III  

Lo apliqué a un blog de pruebas y funcionó pero en mi blog normal no, por qué?

Responder
JMiur  

EL EQUIPO DEL BLOG.: Tendría que ver el resultado online. Ocultar esos datos es posible. Hacer que sea clickeable es más complejo poruqe habría que ver cómo es el código de la plantilla. Esa, en aprticular, está pensada para que el header sea un texto.

Bonzu: Podría ser que la clave API sea incorrecta ya que son individuales.

Responder
Graciela  

ohhh yes funcionó sin pedir ayuda :D...buen viernes!!!

Responder
JMiur  

Perfecto, Graciela !!!!!!!!!!

Responder
Bonzu Pipinpadaloxicopolis III  

La clave es correcta, pero no funciona. Tal vez interfiere otro script.

Responder
EL EQUIPO DEL BLOG.  

HOLA JMIUR:
LA PLANTILLA AUN LA ESTOY MODIFICANDO EN MI BLOG DE PRUEBAS. ME FALTAN LOS ULTIMOS DETALLES.
ESTE ES EL DE PRUEBAS: http://laratadelaboratorio.blogspot.com
CUANDO LO HAYAS VISTO, DECIME COMO OCULTAR LOS DATOS QUE TE MENCIONE EN EL COMENTARIO ANTERIOR.
Y SI SABES, COMO HACER CLICKEABLE EL BANNER DECIME COMO HACERLO TAMBIEN.
SALUDOS.

Responder
Nelson Diaz  

Saludos mi estimado amigo, primera vez que paso por acá y me encuentro con una solución que he estado buscando con insisistencia, pues el método que tengo para mostrar entradas anteriores es un tanto lento en su carga y poco práctico en su uso. Pero te cuento, al intentar ponerlo en practica amigo me aparece un listado de los títulos de todas las entradas del blog, debajo del bloque que efectivamente adquiere el efecto rotativo, y no me acepta la configuración que das en el CCS, no soy muy diestro en esto, pero con algunas orientaciones creo que lo pueda solucionar. Amigo, un abrazo y muchas felicitaciones y agradecimiento por tu trabajo en este blog.

Responder
JMiur  

Para colocar una imagen en el header y que esta sea un enlace, o se usa el elemeto Header de Blogger y se sube la imagen desde alli, o directamente hay que eliminar todo el contenido y escribir un código nuevo somo se muestra acá.

Responder
JMiur  

Nelson: Para que no se vea esa parte de abajo, debes colocar esto en el el CSS:

.gfg-list {display:none !important;}

Si está colocado como ejemplo en alguna aprte, me fijo. Es que ahora no lo veo en tu blog.

Responder
Mariluz  

Hola amigo, tengo un blog que me gustaría que vieses para -si puedes- indicarme la mejor solución para evitar lo que ocurre. Te adelanto que, por ejemplo, mirando la plantilla con los comentarios incrustradosse se ve bien en firefox y mal en IE7 y posteriores; también se ve perfecto en portátiles con pantalla de 7 a 10" y fatal en tañanos "normales". Buscando en los tutoriales he intentado adaptar la plantilla para diferentes resoluciones y no hay manera... ¿me podrías echar una mano? la url es: http://puntodelocura.blogspot.com/
Gracias de antemano.

Responder
JMiur  

Mariluz:

No sé en cual de los blogs ves el problema pero, por ejemplo en http://puntodelocura.blogspot.com/ lo que parece haber es una etiqueta mal cerrada, no porque falte sino porque está mal ubicada, probablelemente un </div>

Eso, hace que el código generado (que es lo que puedo ver online) sea extrañísimo y toda esa parte se muestre descolocada. Aparentemente, Firefonx e incluso IE8 resuelven ese error y lo muestan bien pero otros no.

No puedo guiarte hacia donde buscar el error porque es algo que sólo se ve en la plantilla. Habría que revisarla cuidadosamente para verificar que cada bloque se cierre correctamente antes de abrir otro.

Responder
Mariluz  

Muchas gracias, mi amigo... efectivamente es en http://puntodelocura.blogspot.com/
y en las pájinas de post con más de 1 comentario donde se me descuadra todo... voy enseguida a comprobar línea a línea a ver si encuentro cuál es código sin colocar.
Te comentaré el resultado
un abrazo agradecido :-))

Responder
JMiur  

Mariluz:
Por lo que describes, te diría que confirmas lo que imaginaba. Justamente que es síntoma sea ese, que suceda en las entradas con más de un comentario. Allí, en esa parte es donde debe estar el error. Concéntrate en esa parte, allí hay un LOOP y seguramente, hay un </div> que debería estar DENTRO pero está AFUERA y eso hace que se muestren así.
Es difícil de explicar :D

Responder
SoloKvcd  

Excelente we.. si me gusto y quise probar pero con los comentarios y si funciona a la perfección
solo remplace: http://URLBLOG.blogspot.com/atom.xml
por: http://URLBLOG.blogspot.com/feeds/comments/default

algo nada de otro mundo

Responder
JMiur  

Perfecto, muy buena idea, SoloKvcd, no se me había ocurrido :D

Responder
cutexmas  

que bueno esta este y muy sencillo, tengo una pregunta, cuando lo pongo en un gadget me funciona perfecto pero cuando lo quiero poner en una entrada como lo has hecho tu al final no aparece :(
como puedo hacer para que el gagdet aparezca en la entrada???
muchas gracias

Responder
JMiur  

En el caso de una entrada, es muy importante que el script esté escrito en una sola línea porque sino, no funcionará.

Responder
cutexmas  

hola JMiur gracias por responder tan rapido, lo hice como dices y nada, utilice una pagina que elimina los saltos de linea de los codigos y tampoco sigue sin funcionar dentro de la entrada, lo intente con distintos scripts pero sin exito alguno :(
gracias de todas formas

Responder
JMiur  

Tendría que verlo en un ejemplo online para decirte qué está fallando o dónde hay un error.

Responder
Ab Exordio Vitae  

hola J!

puse esto en mi blog, pero queria preguntar si se puede hacer q las entradas no vayan en orden desde la ultima, si no que sea aleatorias, si me entendes?

saludos y gracias

Responder
JMiur  

Ab Exordio Vitae: No veo que haya nada para configurar eso. Lo lamento.

Responder
FalconFix  

Master mira este script que se ve muy interesante, lo he probado pero si mostrará mas posts sería mucho mejor. ¿se podrá configurar como para que se vea mas de un post?

Responder
JMiur  

Por lo que dicen en los comentarios, no es posible mostrar más de un post. Tal vez, sea posble colcoar más pero así, a simple vista, diría que no sería bueno hacerlo porque lo que parece hacer es cargar cada una de esas páginas y luego, mostrar una parte, si son muchas, sería como cargar varias páginas simultáneamente y eso sería muy pesado para el navegador. Igual lo miraré con más detalle :)

Responder
Edupa  

Muchas Gracias, Realmente me funciono Demasiado muy bien :).

Un Saludo aca de AxMF

http://www.axmf.com.ar/

Responder
Edupa  

Recien taba mirando que las entradas que te muestra son desde el dia presente en retroceso. No se puede hacer aleatorio ? o es solo asi ?

Responder
JMiur  

Tal vez modificando el script pero no te podría decir cómo.

Responder
Edupa  

Ok, te lo agradesco igual. Es algo que dandole vueltas siempre sirve :)

Responder
O Lavrense  

Un instrumento Rotative que los centros de mi blog navegadores de menos. En Firefox donde aún no signatura en formato de la blog desconfigurado. Ha intentado todo pero no estoy que llevó problema. Doy las gracias al toda la asistencia. Agradezco mucho y felicitarlo por su excelente trabajo que ha sido un acto Blog en Vagabundia.

http://www.lavrense.blogspot.com/

Responder
Victor Sacaba  

Hola JMiur pues ya he logrado poner las entradas rotativas. He querido poner tambien el de los comentarios, pero no deja poner los dos al mismo tiempo funciona uno o el otro. le he puesto clave diferentes, pero no logro hace funcionar los dos. quisier sabe si se puede hace eso y como. Gracias por tu ayuda.
http://compartiendovirtuales.blogspot.com/
Un gran abrazo.
Victor.

Responder
JMiur  

No sabría responderte, Victor. He estado buscando información pero no he visto nada al respecto. Uno dería que sí, que deberían funcionar varias sin problema pero habra que rendirse a las evidencias.

De todos modos, seguiré buscando alguna respuesta.

Responder
Victor Sacaba  

Te lo agradeceré mucho JMiur. Un saludo Victor.

Responder
LobosDiario  

Los posts no se podrían mostrar con las imágenes? Estaría bueno eso así no sale el texto solo.

Responder
JMiur  

Sólo se lee el texto del feed.

Responder
LobosDiario  

Y no pueden existir otros scripts similares que sí puedan tener esa función?

Responder
JMiur  

Lo desconozco.

Responder
Ana Laura  

Hola JMiur, como siempre muy interesante -aunque la entrada sea antigua, recién lo implemento.
Te cuento que no tuve mayores problemas para instalarlo, y personalizarlo como explicas arriba. Lo probé y anduvo bárbaro en el Mozilla, pero cuando lo fui a probar en el IExplorer, me aparece toda la lista de entradas que he publicado. Así que lo saqué y lo dejé solo en mi blog de pruebas por si tienes tiempo y deseos de ver qué puede estar pasando. Te lo agradecería mucho, el gadget está muy bueno.

Mi blog de pruebas es EriSada in draft

Saludos y gracias.

Responder
JMiur  

Ana Laura:

En IE8 lo veo bien puede ser que eso ocurra en IE7; se me ocurre intentar darle dimensión; por ejemplo, agregar a :

.feedGadget {
........
height:140px;
overflow:hidden;
}

o sino, acá:

.gfg-root {
........
height:140px; /* ahora dice auto */
}

Responder
Ana Laura  

Es raro, yo también tengo IE8 y sin embargo me aparecen todos los posts publicados, en la máquina de mi hija que tiene IE7 también pasa lo mismo, y pedí a un amigo que lo probara en la suya e idem. Y el problema es solo con el IE, porque en Mozilla y Chrome anda bien.

Lo intenté con tu sugerencia pero no solucionó el problema, supongo que tendré que resignarme a no usar el gadget. De cualquier manera, te agradezco mucho tu ayuda. Un saludo grande!

Responder
JMiur  

Eso es raro porque miro esta entrada y no pasa lo mismo aunque estás usando correctamente todas las propiedades.

Puede ser que lo que ocurra es que el navegador está funcionando en modo compatibilidad. Es algo bastante confuso pero acá hay una entrada al respecto.

Una posibilidad es que agregues en la palntilla, en el head, justo desdpués de la etiqueta HEAD, esto:

<meta http-equiv='X-UA-Compatible' content='IE=8' />

Responder
Ana Laura  

Bueno, leí tu entrada sobre la compatibilidad, y como dices, es muy confuso. Lo que sí te puedo decir es que si bien mi versión del navegador es la 8, cuando hice lo que sugieres el cuadro de alerta me dijo '7' ¿? (inserte cara de asombro aquí)

Lamentablemente tampoco funciona incluyendo la linea para forzar la compatibilidad :S La dejaré de cualquier manera, tienes razón, me fastidia que el navegador decida como mostrar las páginas y no yo.

Me fijé en las herramientas del IE y vi que tiene una configuración de vista de compatibilidad donde me sugería que agregara blogger.com y lo hice, pero no sé que más puedo hacer.

Muchas gracias otra vez por tanta molestia, sos un divino, como dicen los gurises.

Un abrazo.

Responder
JMiur  

Sí, Ana. Como avisé, es complicado. En realidad, no se entiende nada :-)

Concuerdo con eso de olvidarse del tema y resignarse a que no funcione por lo menos hasta que alguien explique bien porque todo es muy raro :-D

Responder
DMJ  

Master este post rotativo puede ir con una imagen a lado y puede ser más de un post. Lo he intentando pero sin éxito :(

Responder
JMiur  

Lo desconozco, DMJ.

Responder

¿Quiere dejar un comentario?

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

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

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