Slider sencillo con entradas recientes | Oloblogger No hace mucho vimos como montar un slider muy simple para mostrar una serie de imágenes fijas (con o sin enlace) que iban pasando de manera...

13 de agosto de 2013

Slider sencillo con entradas recientes

No hace mucho vimos como montar un slider muy simple para mostrar una serie de imágenes fijas (con o sin enlace) que iban pasando de manera secuencial. La cosa es que esto no cubre las necesidades de algunos que quieren que esas imágenes sean extraídas de las entradas del propio blog y que al mismo tiempo sirvan de enlace para acceder directamente a las mostradas.

Eso es lo que se viene llamando slider de entradas recientes y precisamente lo que vamos a ver a continuación para tener una variante más completa de aquel visor de imágenes que vimos.

Evidentemente el código ya no será tan simple pero tampoco es que sea muy largo, así que en lugar de cargar un fichero externo, propongo que se meta en la plantilla y que luego ya carguemos el feed desde un gadget.

En esta página de pruebas podéis ver una demostración de cómo funciona con el código que veremos a continuación.

Demo slider entradas recientes



Lo primero de todo sería colocar antes del </head> de nuestra plantilla, lo mismo que la otra vez: la librería jQuery, los estilos de la caja que forma el slider (estos también se pueden poner en la parte CSS) y el código que generaba la animación.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js' type='text/javascript'/>
<!-- SLIDER ENTRADAS RECIENTES -->
<!-- Estilo slider -->
<style type='text/css'>
#slider { 
  position: relative;
  overflow: hidden;
  width: 550px; 
  height: 200px; 
  border:4px solid #333;
  margin: 0 auto;
  padding: 0;
}
#slider > div {
  position:absolute;
  top:0;
  left:0;
  width: 550px;
}
#slider img {
  width:100%;
  min-height:200px;
  margin:0;
  padding:0; 
  border:0;
}
#slider p {
  position: absolute;
  top: 160px;
  left: 0;
  display: block;
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 400px;
  height: 22px;
  margin:0;
  padding:0 5px;
  color: #eee;
  background: #990000;
  font-size: 16px;
  line-height:22px;
  text-align:center;
}
</style>
<!-- Slider -->
<script type='text/javascript'>
//<![CDATA[
  $(function(){
    $('#slider div:gt(0)').hide();
    setInterval(function(){
      $('#slider div:first-child').fadeOut(2000)
      .next('div').fadeIn(2000)
      .end().appendTo('#slider');},5000);}
  );
//]]></script>

Como decía, esto es exactamente lo mismo que vimos en Posiblemente el slider jquery más sencillo y la diferencia radica sólo en cómo vamos a construir la lista de imágenes/enlaces. En aquel la hacíamos manualmente y ya habíamos terminado, pero en esta ocasión crearemos una función que leerá un feed y de ahí extraerá título, URL e imagen de los últimos posts, creando automáticamente esa lista.

En esa parte de arriba, lo único que habría que tener en cuenta es no duplicar la carga de jQuery que es lo que hace la primera línea. Si ya lo tenemos en nuestro plantilla esa línea hay que omitirla.

Y esta es la función que recopila los datos y crea la lista. Hay que ponerla a continuación de lo anterior:

<!-- Obtener elementos entradas recientes-->
<script type='text/javascript'>
//<![CDATA[
var numposts_gal = 6;
var salida_gal = '';
function galeriaposts(json) {
  var numPosts = json.feed.openSearch$totalResults.$t;
  var indexPosts = new Array();
  for (var i = 0; i < numPosts; ++i) {indexPosts[i] = i;}
  if (numposts_gal > numPosts) {numposts_gal = numPosts;}
  for (i = 0; i < numposts_gal; ++i) {
    var entrada = json.feed.entry[indexPosts[i]];
    var titulo = entrada.title.$t;
    for (var k = 0; k < entrada.link.length; k++) {
      if ( entrada.link[k].rel == 'alternate') {enlace = entrada.link[k].href;break;}
    }
    if ("content" in entrada) {var contenido = entrada.content.$t;}
    x = contenido;
    a = x.indexOf("<img");
    b = x.indexOf("src=\"", a);
    c = x.indexOf("\"", b + 5);
    d = x.substr(b + 5, c - b - 5);
    if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {var imagen = d;}
    else {var imagen = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1dQOa_rad3kHZdO6txXzrYABkIS3xBWwJWujItZrU4wvPedHFzIXu8QidTlsRHI-LA1aGiPj2PFs_woODxggY_iWN6AboSUJUb8wYxiApyQW91KhcuXABhiNhcnippv7Nzyuj_VlgYDs/s0/sin-imagen.png';}
    salida_gal += '<div><a href="' + enlace + '"><img src="' + imagen + '" /></a>';
    salida_gal += '<p>' + titulo + '</p></div>';
  }
  document.getElementById('slider').innerHTML = salida_gal;
}
//]]>
</script>

Y ahora viene el último paso que es situar en el lugar dónde queremos que salga el slider, una caja vacía con la id #slider y la llamada a la función que generará la lista de imágenes/título/enlace.

Tal cual viene se puede incluir en un gadget tipo HTML/JavaScript para ponerlo bajo la cabecera o encima del cuerpo de las entradas.

<!-- SLIDER HOME RECIENTES -->
<div id='slider'></div>
<script style='text/javascript'>
  var numposts_gal = 6; // Número de entradas a mostrar
</script>
<script src='http://www.oloblogger.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=galeriaposts&amp;max-results=10'></script>

En ese trozo es dónde personalizaremos el número de entradas a mostrar y el feed desde dónde queremos cargar las imágenes. En este mismo orden son las dos cosas marcadas en verde. Se puede poner cualquier dirección de feed y no sólo el propio.

Si por casualidad alguien quiere ver más de 10 entradas, el valor tras max-results deberá ser aumentado.

Y por si no lo viste en la demo, aquí una reproducción más pequeña con el feed de otro blog:


¿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

79 comentarios :

  1. ¿Crees que funcionaría con el feed de una etiqueta en concreto? Tengo mil ideas para esto, me gusta mucho.

    ResponderEliminar
    Respuestas
    1. Debería funcionar con cualquier feed. Creo que no tendrás problemas.

      Eliminar
    2. De momento lo he probado con el feed general y me funciona sin problemas.

      Por cierto, para mi gusto, le falta que el título tenga también un enlace, que es donde inconscientemente tiendo a pinchar lo primero, así que he modificado esta línea, la que forma el título. Aquí te la dejo, por si la quieres ver:

      salida_gal += '<p>' + '<a href="' + enlace + '">' + titulo + '</a>'  + '</p></div>';

      Eliminar
    3. Perfecto. Es una buena idea José

      Eliminar
  2. Genial! :D muchas gracias por la ayuda, estaba esperando el tutorial jeje ;)

    Una pregunta, ¿se puede crear el efecto aleatorio de las entradas que se muestran?

    ResponderEliminar
    Respuestas
    1. Seguro que sí, pero este es un slider "sencillo" ;)

      Eliminar
    2. por cierto ya lo probé en mi blog de frases milfrases.org y está hermoso!! e_e jejeje

      solo que también me gustaría que esté la opción para poner las imágenes en modo aleatorio :D

      Eliminar
    3. Para eso otro vas a tener que esperar bastante ;)

      Eliminar
    4. Hola Oloman. Genial el slider para las entradas. Gracias.
      He estado toqueteando un poco el código y he conseguido dos cosas.
      1 Que en vez de mostrar las ultimas entradas se muestren las primeras entradas, que en su principio es lo que yo pretendía, que las primeras entradas no se quedaran en el olvido.

      2 Con respecto a los comentarios que han pedido el modo aleatorio, se me ocurrió al momento una forma de hacerlo y hasta que no lo he conseguido no he parado.

      Bueno, explico un poco el código que hay que modificar.

      1* Para mostrar las primeras entradas:
      Buscamos esta linea de código:
      for (var i = 0; i < numPosts; ++i) {indexPosts[i] = i;}
      y cambiamos todo lo que esta dentro de los corchetes { }

      cambiamos esto {indexPosts[i] = i;}
      por esto {indexPosts[i] = (numPosts - (i));}



      2*Para mostrar las entradas de una forma aleatoria:
      Debemos buscar la misma linea de código:
      for (var i = 0; i < numPosts; ++i) {indexPosts[i] = i;}
      y justo arriba de ella añadimos esta linea:
      var n = parseInt(numPosts);

      e igual que en el ejemplo anterior debemos modificar todo lo de dentro de los corchetes { }

      esto {indexPosts[i] = i;}
      por esto {indexPosts[i] = parseInt((Math.random() * n) + 1);}

      Inconvenientes: es aleatorio... pero aleatorio aleatorio...
      Me explico, cada vez que se elige una entrada para mostrar, el script lo hace de forma aleatoria pero sin tener en cuenta las entradas que ya se han mostrado antes, esto quiere decir que existe la posibilidad de que se repitan las entradas, tanto es así que si has puesto 100 como máximo de entradas para mostrar... existe la posibilidad que las 100 entradas que se muestren sean la misma, es una posibilidad mínima pero como existe, puede pasar.

      Para que no se repitan y sea aleatorio habría que añadir un código que a mi parecer ralentizaría el script.

      Solución: elegir un numero pequeño de entradas a mostrar (numposts_gal = 6;). así la posibilidad de que se repitan se minimiza aun mas.


      Muchas gracias Oloman por tu tiempo y saludos a todos. :)

      Eliminar
    5. Actualización: Me he equivocado al escribir el código para las primeras entradas.
      El codigo a añadir es:
      {indexPosts[i] = (numPosts - (i+1));}

      la diferencia esta en que es (i+1) en vez de (i) solo.

      Debería de funcionar solo con la "i" pero me he dado cuenta que no es así.

      Eliminar
    6. Muchas gracias CaS: Aquí puse también otra manera sencilla, aunque por un motivo que desconozco, ni tu manera ni la mía sirven para todo tipo de feeds :(

      Eliminar
  3. Lo probaré, a ver si tengo suerte y funciona : )

    ResponderEliminar
  4. Me ha gustado la idea. Gracias!

    Lo he colocado en mi blog de prueba y funciona, le modifique tamaño, color del borde...pero independientemente de lo que ponga en max-results salen 6 imagenes, al pinchar en ellas te lleva a la entrada perfectamente...el unico problema que tengo es Que no puedo poner mas imagenes a mostrar. donde podria estar mi fallo? puedo tener alguna restriccion en otro lado?? Ahora mismo no se me ocurre nada... En mi blog "bueno"lo puse y pasaba lo mismo que en el de prueba por eso finalmente lo quite....Ya que me interesaria que se vieran mas entradas en el slider(son dos blogs identicos, el de prueba le tengo para probar los gadchets y modificaciones antes de ir al "bueno" y no esta visible para evitar confusiones)

    ResponderEliminar
    Respuestas
    1. Dónde regulas la cantidad de entradas (imágenes) es en la cifra de var numposts_gal = 6;. Lo de max-results sólo hay que tocarlo si se quieren mostrar más de 10, pues esa es la cifra que yo puse en el ejemplo de tope para que no se ralentizara más de la cuenta.

      Eliminar
    2. entendido. Interprete mal la informacion. Ya me va perfecto. Gracias :D

      Eliminar
  5. Buenas, lo primero gracias por la ayuda, es el primer slide que me funciona por que la plantilla que uso tiene muchas restricciones y no me deja añadir gadgets donde quiero y demás. Pero tengo un problema, no me coge las imágenes a tamaño real, si no al tamaño en el que se ponen en la entrada (que suele ser mediano o como mucho extragrande) y pixelan. En parte es por que cambié el tamaño original para alargarlo y que me ocupe toda la parte de arriba, pero se que si cogiese las imágenes a tamaño real no sucedería (al menos con la gran mayoría). Mi pregunta es si puedo tocar algo del código para que lo haga, o sólo he de cambiar algunos de los otros números que salen, toqué alguno pero no vi ningún cambio. Gracias y espero que se pueda solucionar. Pongo la url del blog en el que hago las pruebas (el cual coge las entradas de la web)

    http://probandofallando.blogspot.com.es/?zx=5710d7d9ade53261

    ResponderEliminar
    Respuestas
    1. El problema creo que es que las imágenes originales tampoco son muy grandes. Pinché en un par de posts al azar y las que vi tenían unos 400px. No me refiero al tamaño que luego tú le pones al editar el post, sino el que tienen originalmente cuando las subes. Lógicamente, si el slider tiene un ancho de 920px, nunca te van a salir bien.

      Eliminar
    2. En algunas el problema si es ese, pero hay dos en concreto que una es casi igual que el slider (por lo cual no debería o apenas debería pixelar).
      Red --> http://3.bp.blogspot.com/-uNIux1dZyNc/UgvrRA0l_PI/AAAAAAAADCM/S49DFDRagTU/s1600/cartel+red+2.jpg

      Y esta otra que es más grande que el slider pero sin embargo pixela mucho mucho en el:
      Ahora me ves (se ve más grande al darle encima a la imagen) --> http://2.bp.blogspot.com/-GjPwvQwDFb4/UfPttSRD03I/AAAAAAAABvI/27zqrLl5nVI/s1600/ahora_me_ves_cartel.jpg

      Eso es lo que me ha llevado a pensar que en vez de coger la imagen tal cual, coge la previa, ya que pixelan todas, tanto las de bajo tamaño como las de muchos px. Gracias por responder :D .

      Eliminar
    3. Acabo de hacer una comprobación, la última imagen que he puesto, la de "Ahora me ves", la he puesto a tamaño original (que obviamente se sale de la entrada, luego la cambiaré), pues bien, ya no pixela en el slider, se ve perfecta, así que confirmado, no coge la imagen a tamaño real, coge la imagen al tamaño que tú la pongas en la entrada (pequeño, mediano, grande, extragrande u original).

      Eliminar
    4. Gracias. Me has ahorrado el trabajo de comprobarlo yo ;)

      Eliminar
    5. Para que no pixele o bien pondré los carteles extragrandes o haré una imagen adrede alargada para ponerla al principio y poder ponerla extragrande (y el cartel mediano, como hacemos siempre).
      Si alguna vez descubre una manera de que coja la imagen original y no al el tamaño que se le pone en la entrada, no dude en ponérmelo para cambiar el código ¡gracias! me alegra haber encontrado por fin un slider que pueda usar :D .

      Eliminar
  6. Hola! me interesa el slide, pero pregunto: ¿puedo hacerlo de forma tal que no tenga imagenes, sólo texto? y para reducir el tamaño a 300px de ancho, solamente cambio donde dice 550px? quisiera agregarlo en la sidebar.
    Desde ya muchas gracias!

    ResponderEliminar
    Respuestas
    1. Hola. Así es, para reducir el tamaño sólo tienes que cambiar los valores de WIDTH por el que quieras.

      Sobre lo otro, para poder usarlo como visor de texto seguro que hay sistemas más sencillos, pero para no tener que cambiar muchas cosas de este bastaría con añadir a la parte CSS un #slider img {display:none;}. Eso oculataría la imagen y dejaría sólo ver el texto (título de las entradas).

      Eliminar
  7. Intenté suscribirme a comentarios, pero no sale la planilla de subscripción

    ResponderEliminar
    Respuestas
    1. No. Ahora sale una simple casilla de verificación con el rótulo "Avisarme" ;)

      Eliminar
  8. Gracias por el aporte, pero cuando entro a una entrada, el slider sale tambien en la entrada. hay posibilidad de ocultarlo cuando se entra a las entradas?

    ResponderEliminar
    Respuestas
    1. Claro. Sólo tienes que meter el código HTML dentro de una condición.

      Eliminar
  9. Hola, muchas gracias por el aporte, me ha sido de mucha utilidad! Me ha quedado asi: http://siberiaenlacabeza.blogspot.com.es/
    Tengo alguna duda eso si, si pudieras echarme un cable.
    1. ¿Se puede cambiar el color rojo del fondo del nombre de la entrada sobre el slide? Por defecto viene en rojo, de donde consigo el código de color que quisiera poner (azul en mi caso)
    2. El tema del pixelado de las fotos, hay manera de evitarlo, no me quedó claro con los otros comentarios ^^
    Muchas gracias!!

    ResponderEliminar
  10. Hola. El color de los rótulos lo indicas en el BACKGROUND de #SLIDER P. En la entrada lo fijé en #990000 que es el rojo que ves. Cámbialo por el código hexadecimal del color que quieres.

    Y sobre lo otro, es una chapucilla, pero si siempre usas imágenes "grandes" (400px) o "extra-grandes" (640px), prueba esto:
    1. Antes del </head> inserta esto:
    <script type='text/javascript'>
    //<![CDATA[
    function redimthumb(image){
    var url = image.replace("/s640/","/s1600/");
    url = image.replace("/s400/","/s1600/");
    return url;
    }
    //]]>
    </script>

    2. Después de eso, antes de la primera línea "salida_gal += ... " del código de esta entrada, añade esta otra línea:
    imagen = redimthumb(imagen);

    ResponderEliminar
  11. ¡Hola Oloman!
    Hace poco que me puse manos a la obra con un blog así que el pobre todavía está "en bragas". El otro día coloqué un slider un poco diferente al que tú propones añadiendo un nuevo gadget HTML/Javascript y trabajando desde HTML.
    La verdad es que tengo un par de dudas que quizás puedan resultar obvias pero que a mí me están trayendo por la calle de la amargura.
    1- En su día elegí una plantilla sencilla por lo que casi siempre tengo que estar añadiendo cosas. El caso es que al crear este nuevo gadget y colocarlo por encima del blog (cuadro de entradas) y por debajo del cabecero, en configuración ocupa todo el espacio disponible sin darme opción a añadir otro gadget a la derecha y no quisiera tener que cambiar de plantilla.
    Había pensado en editar el HTML y meter una tabla o a través de frames pero lo único que consigo es cargarme el slides y vuelta a empezar.

    2-La segunda duda es que al editarlo desde el diseñador de plantillas, ahora me aparece en todas las páginas que definí a través de una barra (menú) con pestañas y yo sólo lo quería en la principal.
    Te adjunto un link con una imagen explicativa por si mis preguntas no han sido suficientemente claras: Imagen explicativa

    ¡Muchas gracias de antemano!

    ResponderEliminar
    Respuestas
    1. Hola Ainara. Podrías crear una sección con dos columnas encima del cuerpo de las entradas, pero creo que lo más fácil va a ser que vayas a Diseño y arrastres el gadget del slider hasta justo encima del cuerpo destinado para las entradas. Verás que entonces ocupa el ancho de estas y no el total del blog. Son dos zonas distintas.

      Luego la otra imagen la pones como primer gadget en la barra lateral y listo. Estas dos cosas son mucho más sencillas que crear secciones si no las dominas.

      Con respecto a que algo te aparezca sólo en la página principal, no te queda más remedio que usar condiciones. En este enlace tienes una guía.

      Eliminar
  12. Muchas gracias por tu pronta respuesta. La primera pregunta que te hice conseguí tras horas y horas solucionarla el domingo. Arrastrar el gadget si quería colocarlo encima del blog no era una opción porque según la plantilla escogida era o grande o grande, tan sólo podía colocarlo debajo o a un lateral. Solución, agarré el HTML y metí tanto el slider como el TD en una tabla y voilá, no creo que sea la forma de hacerlo más ortodoxa pero funcionó. Tan sólo me queda corregir un poco el tamaño del slider y proceder con la guía que me has facilitado para usar condiciones. ¡Muchísimas gracias!

    ResponderEliminar
  13. Listo. ¡Funciona perfecto! Muchísimas gracias por la guía y por tu ayuda en general.

    ResponderEliminar
  14. hola
    He introducido los dos bloques de programación antes de head para colocar este slider en un blog de prueba http://19022014hoy.blogspot.com.es/
    el resultado es que no salen las entradas.
    ¿Sabemos cual es el problema

    ResponderEliminar
    Respuestas
    1. ha variado el problema.
      la duda esta un poco más abajo.

      Eliminar
  15. Hola ... no he entendido nada. podrían pegar el codigo para solo tener que pegarlo?

    ResponderEliminar
  16. El slider me parece fenomenal. Lo he colocado de pruebas en http://www.quepodemosver.com/ al final de todo, se titula ensayo.
    Problemas, no salen las imágenes y tampoco letreros.
    Curiosamente si en HTML/JavaScript cambio el enlace de internet si funciona. Lo he puesto en ensayo 2
    ¿Podéis darme la solución? Se agradece

    ResponderEliminar
  17. Hola Oloman !

    Hasta hoy el slider de las entradas funcionaba perfectamente...pero ahora no aparecen las imágenes ni los títulos. (No he tocado nada desde el día que lo puse y que funcionaba perfectamente).

    ¿A qué se debe?

    Está justamente debajo de una imagen que dice:
    Noticias de Actualidad.
    (Al principio del blog)

    Esta es la dirección:
    http://yosoyamigodellobo.blogspot.com.es/

    Muchas gracias por tu tiempo.
    A ver si hay solución...
    Un cordial saludo !!

    ResponderEliminar
  18. Hola de nuevo Oloman !

    Efectivamente...ya funciona !
    Estuvo 2 días sin aparecer las imágenes.
    No toqué absolutamente nada y...

    De pronto ahí están !
    ¿Serán las meigas cibernéticas?

    De todas formas muchas gracias por tu respuesta y por tu labor.
    Un cordial saludo !

    PD: Y si quieres ser otro amigo más del Lobo...tienes el código a tu disposición en el blog, por si deseas incluirlo en OLOBLOGGER ;)

    ResponderEliminar
  19. Muy bueno!
    Lo que me gustaría saber, es si se puede mostrar solo en la página principal y no en los artículos del blog? Si no pudiera ser, tendría que cambiar de galería y, la verdad, esta me gusta bastante :/

    ResponderEliminar
    Respuestas
    1. Hola. Para eso sólo tienes que meter la parte HTML (los DIV con las imágenes) dentro de una condición. Sigue el anterior enlace.

      Eliminar
  20. Muy bueno!
    Pero si quiero moverlo a la izquierda como lo hago?

    ResponderEliminar
    Respuestas
    1. Si en el CSS vas al selector #slider y borras la línea margin: 0 auto; ya lo tendrás como quieres.

      Eliminar
  21. Hola, he implementado esta modificación en el slider, pero a la hora de pasar de imágen hace un efecto algo raro, te dejo el link del blog para que le eches un vistazo si tienes tiempo, un saludo!

    http://jarkorhiphap.blogspot.com.es/

    ResponderEliminar
  22. Habría que complicar bastante el código BertaLlunética. Por si tus conocimientos dan para ello, la cosa sería pasando a la función GALERIAPOSTS() la etiqueta en cuestión como parámetro. Luego en la función propiamente dicha habría que comprobar la etiqueta de cada post en el FOR y cuando sea igual a la enviada, no "imprimir".

    Lo dicho, prácticamente habría que hacer un código nuevo.

    ResponderEliminar
  23. nada tio, lo he vuelto a poner todo de 0 minuciosamente y va de lujo! una cosilla más, además he intentado meterle la línea para que sea aleatorio, pero eso si que no hay forma. No sé porque se me queda el recuadro pero no aparece nada. ¿que puedo hacer?

    ResponderEliminar
    Respuestas
    1. No lo sé Dani. Si lees los comentarios de ese post verás que pasa con algunos feeds, pero no he encontrado el motivo.

      Eliminar
  24. hola capo una consulta tengo un slider de una plantilla determinada "plytag" pero no enlaza a niguna entrada, es decir quiero poner 5 fotos con título y un pequeño texto y q cuando hagan clic en esa foto vayan a la entrada en si, mil gracias

    ResponderEliminar
  25. lo mismo me pasó con el menú de esa plantilla, cree una normal la oculte y enlacé los link de la común al menú de la predeterminada, me falta solucionar el slider gracias, muy amable

    ResponderEliminar
  26. Si no lo veo me cuesta saber exactamente cual es el problema y luego poder ofreceros una solución y en tu caso tu perfil no tiene asociado ningún blog...

    ResponderEliminar
  27. Hola, acabo de descubrir tu blog y es fantástico para una novata como yo en HTML, CSS y Javascript como yo. Quiero poner en mi blog de blogger un slider de últimas entradas en horizontal, que ocupe todo el ancho, pero en vez de una sola imagen, quiero que se vean tres, es decir, partir el ancho en 3 por decirlo de algún modo. Necesito ayuda, no he visto nada parecido en internet.
    ¿Puedes ayudarme? Gracias,

    ResponderEliminar
    Respuestas
    1. Ayudarte sí, pero si tienes poca idea de esto como dices, quizás te va a resultar complicado.

      Como cosa más sencilla porque yo tampoco he visto nunca un slider dividido en tres (ni en dos), se me ocurre que puedes poner tres sliders uno junto a otro, cada uno con las imágenes que correspondan, y al estar adosados simularían ser uno.

      Eliminar
  28. Hola etoy creando un tema responsivo para wordpress, este codigo me sirve para montarlo en la plantlla wordpress?

    ResponderEliminar
    Respuestas
    1. Hola Javier. Este código sirve para cualquier plataforma, pero cada parte habrá que ponerla dónde corresponda y ahí es dónde no hay una equivalencia exacta entre Blogger y WP.
      Lo que sí cambia con seguridad el la dirección del feed. Esta hay que ponerla en:7
      script src='http://www.oloblogger.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=galeriaposts&max-results=10'

      En Blogger es esa que lleva /feeds/posts/default, pero en WP lo desconozco. Tendrás que probar con una Blogger para ver que todo esta bien y una vez comprobado, entonces cambiarla por la dirección de blog WP que quieras.

      Eliminar
  29. Hola Oloman, ¿cómo puedo hacer que los títulos de las entradas sean más extensos?

    Saludos, espero atento respuesta.

    PD: Excelente blog!

    ResponderEliminar
    Respuestas
    1. Dale el doble de altura a "#slider p" y quita el "overflow-text", así te cabrá justo el doble.

      Eliminar
  30. ¿Hay alguna manera de hacer este slider responsive? Tipo usando un max-width para tener un tope y un width 100%.

    ResponderEliminar
    Respuestas
    1. Eso y algo más. El estilo completo para un diseño adaptable lo tienes en este artículo

      Eliminar
  31. Y ¿cómo puedo eliminar el título de la imagen? Puse display:none a #slider p pero sigue apareciendo...!

    ResponderEliminar
    Respuestas
    1. Lo mejor sería directamente eliminar su generación (la del título) del código JS, pero como cosa fácil puedes usar eso que dijiste... aunque tendrías que quitar (o cambiar) el display: block; que ya tiene #slider p

      Eliminar
  32. Hola! estupenda tu página... y me gusta mucho el slider de entradas recientes pero tengo un par de dudas y quisiera que me ayudes por favor.

    La primera, como hago para que la transición de las entradas recientes sea más larga? Y la más importante…

    ¿Hay alguna forma de que el texto del título se desplace de derecha a izquierda? es que tengo los títulos algo largo y quisiera que se lean completos.

    Espero tu respuesta… un saludo.

    ResponderEliminar
  33. Hola Yerko. Para que las imágenes pasen cada más o menos tiempo, tienes que cambiar el valor 5000 de esta parte (al final del JavaScript):
    $('#slider div:first-child').fadeOut(2000)
    .next('div').fadeIn(2000)
    .end().appendTo('#slider');},5000);}
    5000 son milisegundos, por lo que esa cifra hace que cambie la imagen cada 5 segundos.
    Por si quieres cambiar también esto otro, 2000 (2 segundos) es lo que tarda en hacer la transición de una imagen a otra (el tiempo que tarda en desaparecer una y aparecer la siguiente).

    ResponderEliminar
    Respuestas
    1. Gracias por tu respuesta tan precisa Olaman. Esta perfecto ya puedo cambiar el tiempo de las imágenes. Pero aun tengo el problema del texto no se porque pero no se habilitan los puntos suspensivos y como mis títulos son largos me gustaría que el texto se desplace de izquierda a derecha como un generador de caracteres en la tv. no se si me dejo entender. Es que no se que nombre tiene esa función.

      Estaré atento a tu respuesta

      Un saludo.

      Eliminar
    2. Los puntos suspensivos te deberían funcionar si usaste el CSS que propuse. Por otra parte, para que salga como un ticker, la cosa ya es más complicada.

      Eliminar
  34. No se podría incluir la propiedad del estilo < var exclusion = ['etiqueta1','etiqueta2']; > que usaste en uno de los últimos tutoriales?

    ResponderEliminar
  35. Sí claro, pero es lo mismo que le dije a BertaLlunética, que habría que complicar el código.

    ResponderEliminar
  36. Hola Oloman.
    Hace tiempo que a mi blog le agregue uno de tus slider, ahora que encuentro este otro slider tuyo, creo que sería mejor este xD. Mira
    http://codepen.io/Jose_Zetkin/pen/KMWVqw
    al slider le he puesto para solo una Etiqueta, pero quería saber si hay una "mejor" forma de hacerlo o una más sencilla.

    Espero tu respuesta… un saludo.

    ResponderEliminar
    Respuestas
    1. La forma más sencilla que se me ocurre es usar el feed de una etiqueta concreta. Ese tipo de feed tiene esta forma:
      http://www.pablo-hasel.blogspot.com/feeds/posts/default/--/NOMBRE-ETIQUETA

      Eliminar
  37. Probe esa solución, no recuerdo si una o dos veces, al darme error pense que google había cambiado algo Lol, así que busque otro método, ahora que veo bien la dirección es evidente que cometí un error al escribirlo ja ja ja. Bueno gracias por la respuesta. Saludos...

    ResponderEliminar
  38. Hola Oloman, hay alguna forma de que el eslider lea 2 o 3 etiquetas en concreto, la cuestión es que no quiero las entradas recientes, pero tampoco una sola etiqueta especifica, en un slider que vi en otra pagina encontré este script= |script|
    document.write("<script src=\"/feeds/posts/default/-/etiqueta?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=labelthumbs\"><\/script>");
    |/script|, lo que hace este script es leer la etiqueta que escojamos o en su defecto si no le colocamos el nombre de la etiqueta lee las ultimas entradas, entonces otra pregunta en concreto que te hago es si este script se puede modificar para que lea 2 etiquetas?

    ResponderEliminar
    Respuestas
    1. Hay forma, modficando el JavaScript, pero no es sencillo de explicar... ni para mí de hacerla en breve.

      Eliminar
  39. AVISO PARA QUIEN NO LO SEPA y así evitarse el susto y el dolor de cabeza que yo he experimentado durante unos minutos xD: para que el slider funcione la configuración del Feed debe estar en modo "Completo" y no "Breve", ¡si no el slider no se ve!

    ResponderEliminar
    Respuestas
    1. Jajaja... Así es. Gracias Berta.

      En general, para cualquier utilidad en la que usemos nuestro feed, este deberá estar marcado en "Completo".

      Eliminar
  40. Se podría poner el rss de un blog de tumblr para que te muestre los ultimos posts publicados en él?

    ResponderEliminar
    Respuestas
    1. Pues es cuestión de que pruebes, pero pienso que el RSS de Tumblr no tiene la misma estructura que el de Blogger.

      Eliminar