JMiur [E]

Una consulta del blog Poca Tinta me llevó enterarme de una forma de mostrar los últimos posts publicados que no conocía.

Primero que nada, debemos descargar el script y alojarlo en un servidor propio.

Utilizarlo es sencillo, basta crear un elemento HTML en la sidebar e insertar el siguiente código:
<script src="URL_archivo/marqueeUltimosPosts.js"></script>

<script language="javascript">
var numposts = 10;
var showpostdate = false;
var showpostsummary = true;
var numchars = 100;
var postspeed = 2;
var postheight = 250;
</script>

<script src="URL_blog/feeds/posts/default?
orderby=published&alt=json-in-script&callback=showrecentposts">
</script>

<div style="text-align:center;">
<a href="javascript:void(0);"
onclick="getElementById('marqueeposts').direction='down';">
<img src="URL_imagenHaciaAbajo"/>
</a>
<a href="javascript:void(0);"
onclick="getElementById('marqueeposts').direction='up';">
<img src="URL_imagenHaciaArriba"/>
</a>
</div>
Donde los datos que debemos establecer son:

URL_archivo/marqueeUltimosPosts.js
es la dirección donde alojemos el script que puede descargarse AQUI

URL_blog/feeds/posts/default
es la dirección de los feeds de nuestro blog; en mi caso sería:
http://vagabundia.blogspot.com/feeds/posts/default

URL_imagenHaciaAbajo u URL_imagenHaciaArriba
son las imágenes que sirven de enlace y que permiten que el desplazamiento se realice hacia abajo o hacia arriba.

Los otros valores nos permiten establecer algunos parámetros:

numpost = es la cantidad de post a mostrar (máximo 25)
showpostdate = muestra u oculta la fecha del post (true o false)
showpostsummary = muestra u oculta el texto de los post (true o false)
numchars = cantidad máxima de caracteres del texto del post (máximo 400)
postspeed = velocidad de desplazamiento (mínimo 1 y máximo 10)
postheight = altura en pixeles del elemento (máximo 500)

El script original posee algunas clases CSS específicas para poder personalizarlo gráficamente y le he agregado otras para poder manipularlo mejor. Para utilizarlas, agregamos el estilo justo antes de </head>:
<style type='text/css'>
#marqueeposts  { /* es el bloque completo */
en general esto no es necesario modificarlo
}
.marqueetitle { /* es el título de cada post */
margin: 5px 0 0 0px; /* lo separamos verticalmente */
cualquier otra propiedad (fondo, alineación, bordes)
}
.marqueetitle a { /* el título es un enlace */
cualquier propiedad deberá incluir la orden !important, por ejemplo:
color: Beige !important; 
}
.marqueetitle a:hover {
aquí irán las propiedades si queremos que el enlace tenga un efecto mouseover
} 
.marqueetext {  /* es el texto de cada post */
margin: 2px 0 10px 0; /* lo separamos verticalmente */
cualquier otra propiedad (fondo, alineación, bordes, fuentes)
}
.marqueemore a {  /* es el enlace (leer más) */
cualquier propiedad deberá incluir la orden !important
}
.marqueemore a:hover {
aquí irán las propiedades si queremos que el enlace tenga un efecto mouseover
}
.marqueedate {  /* es la fecha del post */
cualquier propiedad deberá incluir la orden !important
}
</style>
El resultado será algo así:

ULTIMOS POSTS


Recientemente me he encontrado con este mismo hack explicado en El Escaparate de Rosa. Allí la versión del script parece ser una traducción del original y es levemente distinta. Incluye otras opciones aunque también tiene una pequeña marca de "copyright" algo que, en lo personal, no me gusta.

21 comentarios:

Charly  

Realmente vistoso...enhorabuena

Responder
Gem@  

Totalmente diferente a lo que estamos acostumbrados a ver.

Responder
JMiur  

Como dice Charly, es vistoso :)

Responder
Claudio - Poca Tinta  

Tengo que felicitarte por la presentación que le has dado, realmente muy bueno.

Hay que ver que tienes buen gusto llevanto todo a la sobriedad, osea ya es un clasico al pasar por vagabundia.

Un fuerte abrazo!

Responder
Tranquilita  

Excelente! Me ha quedado muy bien. Gracias, Jmiur!

Responder
Don Atealgo  

Coincido con Claudio - Poca Tinta, este blog tiene el mejor diseño de los que he visto. Y por mejor me refiero a moderno pero equilibrado, no como algunos blogs que tienen tantos adornos y llamadores de atención que terminan resultando molestos...

:)

Responder
JMiur  

Gracias, son demasiados elogios :$

Y gracias a Claudio por la información, nos dió trabajo pero vencimos :D

Responder
Claudio - Poca Tinta  

Ja, ja, ja. Yo estaba perdiendo la cordura, gracias por la ayuda que brinda tu blog.

Buen fin de semana

Responder
Anónimo  

¿Existe alguna posibilidad de utilizar el mismo script para mostrar texto escrito por mí? Mi intención es insertar un elemento en mi futuro blog en el que mostrar las últimas noticias que considero interesantes. Escribiría yo el texto y añadiría el hipervínculo a la noticia en cuestión.
Me parece muy vistoso el hecho de que se mueva, además, ahorra espacio.
Saludos Jmiur, espero que me puedas ayudar.

Responder
JMiur  

Lo que quieres hacer no requeriría un script, es más simple que eso. Podrías usar lo que se llama una MARQUEE.

Puedes tener una idea de su funcionamiento en este post.

Responder
Anónimo  

Sinceramente veo que tu "script" es una mala copia del que aparece en http://elescaparatederosa.blogspot.com/2007/10/ultimos-posts-de-beautiful-beta.html y uno se puede dar cuenta por el contenido de tu post. En vez de agregar algo nuevo lo unico que has hecho es quitarle los creditos a las personas que lo hicieron

Responder
Gem@  

Yo pensaba en voz alta y al final he terminado escribiendo...
Me preguntaba por qué las personas que se toman la libertad de juzgar no se la toman también de informarse o simplemente leer todo el contenido de una entrada.
Con tu permiso J.Miur informar a anónimo y decirle que el autor de cada blog es libre de informar no sólo sobre algo nuevo sino sobre todo lo que cree de interés para sus lectores y para si mismo sea novedad o no.
No desmerezco con esto el trabajo de Rosa,todo lo contrario ya que admiro muchísimo su trabajo y dedicación. Pero da la casualidad que la entrada que menciona es un script de Beautiful modificado por Todo-links el cual ella hace referencia como tiene costumbre hacer y como también hace J.Miur al final de esta entrada cuando menciona y enlaza El escaparate de Rosa.
Hay que ser más equitativo...

Responder
JMiur  

Gracias Gema@

La verdad, no entendí nada y estoy empezando a tomar la costumbre de eliminar ciertos comentarios anónimos simplemente porque me parecen una cobardía absoluta. Este quedará así que el Anónimo tendrás su momento de gloria masturbatoria ¿Está feliz Mr. Nowhere Man?

Obviamente, Mr.Nadie necesita aprender a leer. En ninguna parte dice que lo hice yo, dice que lo vi en un sitio (que no existe más y por eso ya no está el enlace); dice que luego lo vi en lo de Rosa y si hubiera sido al revés, era lo mismo.

La verdad, no creo en la propiedad de las ideas pero parece un poco inútil explicar a quien no va a entender nunca.

Responder
SuperLicho  

ezztaa zuper magnifico este trucco

Responder
Adrián J. Messina  

Excelente me funciona de 10 y lo pude adaptar a mis gustos sin problemas. Que lastima los comentarios "desacreditadores", habra que usar la propiedad "ignore".

Una consulta, pense que me pasaba a mi solo , pero veo que a vos tambien.
Un detalle es que mientras carga el script , despliega la totalidad de los posts hacia abajo, luego vuelvo a comprimirlo y se aplica el subir y bajar. En mi caso lo tengo colocado en la sidebar, todo el texto de las ultimas entradas, al cargar, ocurre lo mismo se despliegan la totalidad de entradas hacia abajo, a lo mejor queda algo desprolijo, es posible utilizar alguna propiedad para que esto no ocurra?

Muchas gracias, como siempre por todo.

Responder
JMiur  

Ya ni me acordaba del señor que no sabe leer :D

Vamos al tema. Sí, eso pasará. Aquñi no puedo cambairlo pero, si está en la sidebar podría ahcerse algo al respecto. Voy a tratar de explicarlo.

Primero que nada, deberías ocultarlo agergando display:none; en esta parte:
#marqueeposts {
.......
display:none;
}

Y ahora, deberías agregar un script extra; podrías ponerlo en el mismo elemento HTML o en el HEAD, da igual. Debería ser algo así:

<script>
window.onload= function(){
document.getElementById('marqueeposts').style.display='block';
}
</script>

Lo que hace eso es mostrar ese elemento que hemos ocultado recién cuando la página haya sido cargada.

Responder
Adrián J. Messina  

Excelente . IM-PE-CA-BLE . Claro, simple y todo solucionado,

Como siempre no me alcanzan las gracias,

Un abrazo.-

Responder
JMiur  

Perfecto. Me alegro que sirviera :D

Responder
Jorge Verón Schenone  

Hola JMiur !

Me resultó práctico agregar este script al pie de las entradas individuales (eso sí, tuve que reemplazar algunos de los caracteres especiales de XML: <, >, ", ', para que funcione y evitar que el editor de Blogger indique algún error.-
Abrazo !
y muchas gracias por tu aporte !

Jorge

p.d. Para aquéllos que no lo sepan, en lugar de alojar el script en un servidor propio, pueden agregarlo al inicio de la plantilla utilizando:
<script type='text/javascript'>
//<![CDATA[
...
//]]>
</script>

Responder
SelvaNet  

Muchas gracias, lo acabamos de publicar en nuestro blog y quedo muy vistoso .. saludos

Responder
Peter  

Hola Jmiur, muy bueno lo probé y funciona!!... Estoy buscando algo que no se mueva y si puede incluir miniatura sería espectacular..

Gracias

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