Seguimos aligerando la sidebar | Oloblogger El otro día explicábamos un truquillo para que nuestra barra lateral no pareciera infinitamente larga y más tarde descubrí gracias a Vagabu...

19 de octubre de 2008

Seguimos aligerando la sidebar

El otro día explicábamos un truquillo para que nuestra barra lateral no pareciera infinitamente larga y más tarde descubrí gracias a Vagabundia, un SCRIPT que permitía desplazar contenidos con un efecto scroll.

Al ver esto último, se me ocurrió que también podríamos reducir el tamaño de algunos artilugios de esta otra manera. Dicen que en la variedad está el (buen) gusto.

Creo que este formato puede ser especialmente adecuado para mostrar el contenido de posts recientes. Un buen sitio sería a modo de ticker bursátil sin aplicar fondo (background), justo encima de Entradas del Blog. Pero claro, dependerá de cada diseño.

ENTRADAS RECIENTES


Este de aquí arriba sería el resultado final para mostrar las entradas y para lograrlo, primero tenemos que instalar los SCRIPT aScroller y el de showrecentposts si es que no los tenemos todavía.

Ya se explicó cómo instalar un SCRIPT y la conveniencia de alojarlo en nuestro propio servidor. Así que lo que hay que hacer es descargarlo, alojarlo e instalarlo en nuestra plantilla. En estos enlaces podeis descargar el del efecto scroll y el de los posts recientes. Una vez puestos a buen recaudo, antes del </head> se instalarán los scripts necesarios según los que nos falten a cada uno en nuestra plantilla

<script src='URL_aScroller-1.0,js' type='text/javascript'/>
...
<script src='URL_showrecentposts2.js' type='text/javascript'/>

Ahora, en el lugar dónde queremos colocar el artilugio, la estructura del código debe tener esta forma:

<div id="idUnica" style="height:22px; width:400px;font-size:18px;">
<div>AQUI IRA EL CONTENIDO QUE QUEREMOS MOSTRAR CON SCROLL</div></div><script type="text/javascript">divScroller("idUnica", "v", 20, 2500);</script>

Si por ejemplo queremos colocar varias imágenes o varios párrafos diferenciados, cada uno de ellos deberá estar encerrado entre dos <DIV>...</DIV>

Actualización: Muy importante escribir todo el código seguido. Hay que redactarlo todo en una misma línea, porque de lo contrario puede dar lugar a un mal funcionamiento. Nada grave pero si molesto.

La etiqueta STYLE sirve para la configuración del ancho y alto del bloque DIV que contendrá el artilugio, así como el aspecto del texto. Configuradlo según vuestro estilo, teniendo en cuenta que la altura del DIV estará en función del tipo de letra utilizado, que si no se define, será el genérico de la plantilla. El 20 y el 2500 son respectivamente, la velocidad de desplazamiento y tiempo de pausa entre líneas (en microsegundos). También los podeis cambiar por los que os gusten. Más información sobre el funcionamiento y configuración de este SCRIPT en Vagabundia.

El contenido para mostrar los últimos posts sería:

<script style="text/javascript">
var numposts = 20;
var showpostdate = true;
var showpostsummary = false;
var numchars = 0;
var standardstyling = false;
</script><script src="http://Nombre_Tu_Blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>
  • numpost: un número que define la cantidad de posts a mostrar
  • showpostdate: true/false para que se muestre o no la fecha del post
  • showpostsummary: true/false para que se vea o no un pequeño resumen del post
  • numchars: un número para indicar la cantidad de caracteres a mostrar
  • standarstyling: true/false para un diseño propio o el standar (recomendado)
Y ya que parece que funciona con esto, ¿por qué no utilizarlo con otros elementos que nos ocupen mucho sitio?

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

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

follow us in feedly

14 comentarios :

  1. Holaaa Oloman! este truquito lo puse en el índice para mostrar las instrucciones y salió bien.
    Ahora lo quise poner para los banners, en mi blog principal (agrandando las medidas), y cuando pasan todas las imágenes ahí queda, no vuelve a comenzar.
    Alguna idea porqué será?

    ResponderEliminar
  2. Luz, echa un vistazo al párrafo encima de "La etiqueta STYLE sirve para la configuración...". Me lo comí al redactar y seguramente sea ese el problema. Un saludo.

    ResponderEliminar
  3. Muy interesante; creo que se puede modificar el código para mostrar los últimos comentarios :9

    Saludos.

    YK de Diversas & Variadas

    ResponderEliminar
  4. Oloman,mirá pego lo que hice así lo podés ver:
    center
    div id="banners" style="height: 150px; width: 220px;text-align:center;margin:0 auto; "
    div XXXXXX /div
    div XXXXXX /div
    ........varios más, y cierro con:
    /div
    script type="text/javascript" divScroller("banners", "v", 20, 3000);/ script
    /center
    le puse espacios y le saque los <> para que salga el código, se entiende? :P
    bue vos dirás dónde tengo el error, porque yo no lo ubico.
    Saluditos

    ResponderEliminar
  5. jaja y no te dije lo que pasa!, es que salen una sola vez y no repiten.

    ResponderEliminar
  6. YK, sin ningún problema porque también lo probé. Por las pruebas hechas, supongo que funcionará bien con casi todo, pero sólo es cuestión de intentarlo. Sólo quise poner un ejemplo.

    Luz, me hiciste ver la idem. El código hay que ponerlo todo seguido (en la misma línea). Ya he modificado el aquí publicado y he añadido un aviso.

    Saludos

    ResponderEliminar
  7. Otra cosas Luz. El alto del espacio para mostrar los elementos que harán scroll, tiene que ser como 4px más que el alto del elemento. No sé si es en todos los casos o tiene que ver con mi configuracion CSS, pero creo que es lo primero.

    ResponderEliminar
  8. jajaja Gracias Oloman, pero... no funcaaaaaaaaaa.
    le puse 200px de height y 220 de width, o sea que para banners es más de lo que necesitan,
    les puse (en una sola línea)a todos los < div > y < /div >, nada!
    les saque los div y los puse todos en uno solo y nada!
    pasan una vez y ahi queda.
    será porque son enlaces y no solo imágenes??
    Saludos

    ResponderEliminar
  9. No Luz, debe ser otra cosa. Lo que pasa es que no puedo verlo porque no lo tienes instalado.

    He tenido un ratito montado en este blog un carrousel de imágenes y no he tenido problemas. Al hacerlo fue cuando descubrí lo de redactar el código en una única línea.

    Lo siento.

    ResponderEliminar
  10. Oloman, esas imágenes tenían enlaces? porque el mismo código ya lo tengo en el índice como te dije, y sin problemas, claro que es solo texto.
    voy a seguir variando y si tengo algún resultado te lo comunico. Gracias por todo el tiempo que te tomaste para este problems!!
    Un abrazo

    ResponderEliminar
  11. bufff!!!
    no lo consigo! que scrip copio de todos los que aparecen en el link de efecto scroll???

    SaludoS

    ResponderEliminar
  12. Son ficheros Javascript. Tienes que guardarlos en tu disco duro y luego alojarlos en donde tú suelas hacerlo.

    Una vez guardados, copias la dirección y la sustituyes por donde dice URL_aScroller-1.0,js y URL_showrecentposts2.js. Luego continuaas con lo que se explica.

    ResponderEliminar
  13. HOLO OLOMAN

    ESTE COMENTARIO NO VA ACA PERO NO SE DONDE PONERLO...

    ES SOLO UNA PREGUNTA...
    COMO HACES PARA PONER AL ARCHIVO DEL BLOG CON ESE DESPLEGABLE???


    SALUDOS

    ResponderEliminar
  14. En el primer post publicado sobre cómo aligerar la sidebar, lo tienes explicado Liniers.

    ResponderEliminar