4 de diciembre de 2014

Carrusel de entradas recientes con imágenes para Blogger

Disponer de un diseño de calidad de tu web o blog es fundamental para el desarrollo de tu marca. El sitio web se convierte en la carta de presentación de tu proyecto. Del mismo modo que se juzgan personas por su apariencia, se juzgará y decidirá si tu negocio es interesante por el diseño de tu página web, al margen de que tus productos lo sean.

Existen estudios contrastados que señalan que la primera impresión es crítica:

  • El 75% de los usuarios evalúan la credibilidad de un sitio basándose en el diseño web.
  • El 68% de los compradores desconfían de un sitio que no parece profesionalmente diseñado.
Os invito a que leáis este interesante informe de una empresa de publicidad de San Francisco: Digital Strategies for Small Business [ pdf ]

Para atraer más visitantes y lectores a nuestro blog, pagina o sitio web, también utilizamos las herramientas que nos ofrecen los distintos gestores de contenido.
Ese plus de visibilidad nos los proporcionan los widgets o gadgets que permiten incrustar y presentar información relevante para el usuario final.

Blogger pone a nuestra disposición un gadget de muy fácil implementación y de máximo interés: Un carrusel o slider de imágenes con los artículos o entradas recientes.

Éstos son los pasos a seguir:

  1. Selecciona la entrada Diseño del panel principal de Blogger.
  2. Pulsa sobre el link Añadir un gadget y se abrirá una ventana con diferentes alternativas
  3. Desplazamos el scroll de la nueva ventana hacia abajo hasta llegar a la opción:

    HTML/JavascriptAñadir
    Añade una característica de un tercero u otro código a tu blog.





  4. Introduce el Título del widgets (por ejemplo Entradas recientes)
  5. En la caja Contenido pega el siguiente código:

    <link rel="stylesheet" type="text/css" href="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css"/>
    <div id="slider-rotator" class="slider-rotator loading"></div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script>
    <script type="text/javascript">
    makeSlider({
       url: "https://www.tecnoblog.guru", // Add your blog URL
       numPost: 5,
       showDetail: true,
       summaryLength: 200,
       titleLength: 50,
       showThumb: true,
       squareThumb: false,
       autoHeight: false,
       crossFade: true,
       showNav: true
    });
    </script>
    
  6. Por último hacemos click sobre el botón Guardar

Nota importante


El autor de este widget, Taufik Nurrohman compartió libremente el código necesario para su funcionamiento pero los directorios de acceso público dónde se alojaban estas librerías ya no están disponibles.

Todos aquellos que quieran introducir el carrusel o hayan incorporado el carrusel a su blog y deseen seguir utilizándolo, tienen que realizar unos pequeños ajustes para que vuelva a funcionar de forma correcta. Los pasos a seguir son:



Vamos a analizar los parámetros de la función Slider:

  • url: añade la url de tu blog.
  • numPost: número de artículos a mostrar en el carrusel.
  • showDetail: 'false' si queremos ocultar el título y descripción del post.
  • summaryLength: número de caracteres a mostrar del resumen del artículo.
  • titleLength: 'auto' por defecto. Con este parámetro especificamos el número de caracteres del título.
  • showThumb: 'false' para ocultar los thumbnails del artículo
  • squareThumb: 'true' para mostrar la imagen en miniatura (thumbnail) a escala, con su ancho original y la relación de altura
  • autoHeight: 'true' para ajustar la altura del elemento que se muestra.
  • crossFade: para hacer el efecto de transición de imágenes de forma simultánea.
  • showNav: 'false' para ocultar la barra de navegación (contador numérico y flechas anterior y siguiente).
  • newTabLink: 'true' para abrir el link en una nueva ventana.
  • labelName: para especificar el nombre de la etiqueta del post o 'null' (por defecto) para mostrar todos los mensajes.
  • thumbWidth: tamaño en píxeles del thumbnail del post.
  • noThumb: especificamos una imagen por defecto para aquellos post que no tienen miniatura.
  • hoverPause: 'false' para que la presentación de imágenes siga corriendo aunque pasemos el ratón por encima.
  • interval: intervalo entre slides (en milisegundos).
  • speed: velocidad de presentación entre slides (en milisegundos).
  • navText: {
       prev: "&lt;", // Texto para mostrar el botón Anterior de navegación
       next: "&gt;" // Texto para mostrar el botón Siguiente de navegación
    },
Toda la información de la librería javascript en Blogger Feed Rotator Plugin

Podéis ver el ejemplo funcionando en la columna central del blog, bajo la sección Entradas Populares (visible en la versión de escritorio).



78 comments:

  1. Me ha encantado esta entrada, ya la he aplicado a mi blog.
    Muchas gracias.

    ResponderEliminar
  2. Gracias a ti Yinda :)
    Me alegro mucho de que te haya servido.
    Un saludo!!

    ResponderEliminar
  3. Fácil y rápido!
    Muchas gracias por comentar Ana, saludos :))

    ResponderEliminar
  4. Gracias a ti Lysmar, me alegro de que te sirva.
    Un saludo!!

    ResponderEliminar
  5. LO he implementado sin embaro no me muestra la imagen queda el cuadro en gris que pudiera estar provocando eso?

    ResponderEliminar
  6. Necesito más información para poder ayudarte Proyecto X.
    Facilítame la url de tu blog y le echo un vistazo. Gracias.

    ResponderEliminar
  7. Hola, lo implemente pero cambia su buen aspecto al agregarle más de 8 entradas, podrá hacerse algo al respecto. Gracias

    http://tecnolisto.blogspot.com/

    ResponderEliminar
  8. Un widget estupendo, pero no sé por qué a menudo no se acaba de cargar en mi página. He probado con diferentes parámetros, en cuanto a la longitud del texto, o número de posts a visualizar, introduciendo lo de "speed", pero finalmente lo he dejado como nos has ido recomendando tú, más o menos, y ralentiza mucho la carga del blog. ¿A qué se puede deber? Gracias y un saludo.

    ResponderEliminar
  9. Buenos días Rebeca,
    he estado revisando tu blog y lo que ocurre es que se produce un pequeño retraso en la carga del script externo (jquery) y eso provoca que no encuentra la llamada a la función makeSlider (en fin, asuntos de programación). Por eso a veces funciona y otras no, dependiendo de la velocidad de carga en tu página.
    La solución es fácil, introduce el siguiente código javascript resaltado en negrita:

    <script type="text/javascript">
    $( document ).ready(function() {
    makeSlider({
    ......
    });
    });
    </script>

    Muchas gracias por visitar el blog :))
    Un saludo. Chema.

    ResponderEliminar
  10. Hola puse el slider y esta genial pero en la barra de menu yo ya tenia otro slider y cuando pongo el tuyo en una columna de blog deja de funcionar la otra , como podre solucionarlo?
    Gracias.

    ResponderEliminar
  11. Buenos días Rossy, he estado revisando tu blog y lo que ocurre es que se produce un conflicto por la carga de versiones distintas de la librería jQuery.
    En ese caso, hay que hacer ajustes para que funcione.
    El código que tienes que copiar en el widget te lo he enviado a tu dirección de correo electrónico.

    Un saludo!!

    ResponderEliminar
  12. Hola, me gusta el slider en carrusel que has compartido porque ha sido muy sencillo de implementar en mi blog en un widget, ya que prefería no tener que tocar la plantilla de HTML. Solo quería preguntarte si hay alguna posibilidad de poder poner solo las flechas sin la numeración, que no me gusta mucho ya que queda muy oscura en mi blog. Y por otro lado si es posible ajustar el slider al ancho del blog para poder ponerlo debajo de la cabecera y por lo tanto que se puedan poner en horizontal varias de las entradas. Ya sé que es mucho tema para un solo widget, pero te lo pregunto de todas formas por si se pudiera desarrollar ;) Te dejo la URL para que me puedas indicar algo y te doy las gracias de antemano: http://elrinconvintagedekarmela.blogspot.com.es/
    Un saludo¡¡¡

    ResponderEliminar
  13. Hola Karmela, me alegro de que te haya sido útil el slider de Entradas recientes y enhorabuena por tu blog!

    Ya veo que has solucionado lo de las flechas, poniendo el parámetro 'showNav' a false.
    En cuanto a la cuestión de ajustar el slider al ancho del blog, entiendo que se puede hacer sin mayor dificultad.
    Tendrías que ajustar su tamaño al ancho de la página, del mismo modo que el tamaño de las imágenes.

    Modifica el siguiente código del widget, con el tamaño (atributos width, height) que desees:
    <style type="text/css">.slider-rotator-nav{font-size:9px} #slider-rotator{width:150px!important;height:250px;} .image-wrapper img{width:150px!important;height:150px!important;}</style>

    Saludos!!

    ResponderEliminar
  14. muchisimas gracias funcionando de maravilla

    ResponderEliminar
  15. Tengo puesto el slider de Entradas, quisiera hacerlo mas pequeño, pero no logro ver donde tengo que cambiar las medidas por mas que miro no encuentro donde esta el texto que veo en la contestación a Karmela. Un saludo.

    ResponderEliminar
  16. Hola de nuevo Jose María, gracias por contestar. Perdona pero no sé a que código del widget te refieres. En el que nos has dejado arriba no hay esa parte de código¡¡ Con lo que me resulta difícil modificarlo. No sé si te refieres a que inserte el código completo que me has dejado ahí. Sería posible que me dejaras todo el widget completo con esto insertado para que lo pueda copiar y pegar en mi blog??? Es que cada vez que lo modifico, se estropea y me toca volver a ponerlo y modificar cada atributo uno a uno¡¡ ;) Gracias¡¡

    ResponderEliminar
  17. Buenos días Radio Rebelde Republicana y Karmela!

    Tenéis toda la razón, he sufrido un lapsus :( Sorry.
    Al final del código de vuestro carrusel tenéis que copiar este bloque de código de presentación o css:


    <style type="text/css">.slider-rotator-nav{font-size:9px} #slider-rotator{width:150px!important;height:250px;} .image-wrapper img{width:150px!important;height:150px!important;}</style>


    Y por supuesto, "jugar" con los tamaños (width, height) según vuestras necesidades.
    Saludos!!

    ResponderEliminar
  18. Gracias Jose María, ahora si que funciona, pero desgraciadamente no me sirve para mi propósito. Me explico. Lo que yo quería era que salieran varias entradas del blog seguidas en carrusel una detrás de otra en horizontal debajo de la cabecera del blog, ajustándose a todo el ancho que son 1200 px por un alto de 250 px como máximo, para que no le quite protagonismo a las entradas. De esta manera solo sale una pequeña, y como no se puede acoplar el tamaño de la imagen a todo el ancho de la cabecera sin que se deforme, queda muy soso y raro. Espero haberme explicado bien. No sé si se puede acoplar la imagen a todo ese ancho y alto que te digo y que salga normal, si hay algún atributo que lo consiga, porque también quedaría chulo con una sola imagen, de la misma forma que lo hace tal y como está ahora, pero debajo de la cabecera. Pero tú eres el experto y a ti me encomiendo¡¡ jajajaja
    Muchas gracias y perdona que sea tan pesada, pero es que deseo mucho tener un slider así y me gusta mucho el funcionamiento de este y su sencillez para implementarlo¡¡¡ ;) Saludos

    ResponderEliminar
  19. Hola Karmela,
    si redimensionamos la imagen original aumentando su tamaño, vamos a perder calidad.

    Hay una web que permite aumentar la resolución de una imagen sin perder calidad.
    A lo mejor te sirve para algunas de tus imágenes.

    Eso sí, tiene algunas limitaciones:
    - no se pueden subir archivos de mas de 3MB y la máxima resolución para ampliaciones es 1280x1280.

    La url: http://waifu2x.udp.jp/

    Un saludo!

    ResponderEliminar
    Respuestas
    1. Muchas gracias José Maria. Al final he decidido dejarlo tal y como está. Me resultaba complicado redimensionar cada imagen principal de cada post cada vez que publique! Jajaja. Gracias por todo y espero que pases una Feliz Navidad! Un abrazo ;)

      Eliminar
  20. Gracias Jose Mari por tu contestación, ahora si me queda bien, llenando todo el espacio y las fotos bien ajustadas al interior, de esta manera no me distorsiona con la estética del resto de la pagina. El color del interior se puede cambiar también si no quieres que sea blanco?. Gracias de nuevo y un saludo.

    ResponderEliminar
  21. Si, ya he visto que lo has ajustado perfectamente. Enhorabuena Radio Rebelde!!

    Para cambiar el color del fondo tienes que añadir el siguiente estilo dentro de la etiqueta <style type="text/css">

    .slider-rotator .slider-item {background-color:#714088!important}

    El color #714088 lo puedes cambiar por el que mejor se adapte a tu diseño.

    Puedes obtener los códigos de colores html en hexadecimal en:
    Códigos de colores HTML

    ResponderEliminar
  22. Gracias por hacernos las cosas tan fáciles. Un saludo.

    ResponderEliminar
  23. GRACIAS CHAVAL ME SERVICIO ESTE ES MI BLOG http://foxwrestling.blogspot.pe/

    ResponderEliminar
  24. Gracias a ti Roly, por pasarte por el blog :))

    ResponderEliminar
  25. Hola. Gracias, de mucha ayuda. Una consulta. Cómo podría hacer para que en lugar de las entradas más recientes muestre las entradas con una determinada etiqueta.
    Saludos

    ResponderEliminar
  26. Hola una pregunta como hago para modificar el ancho y el alto del widget? agradecería la respuesta, saludos

    ResponderEliminar
  27. Buenos días y gracias por participar en el blog :))

    Contesto a las dos últimas dudas:

    1- El widget está diseñado para mostrar las últimas entradas del blog, definidas por el parámetro numPost. No está pensado para mostrar artículos por etiquetas o categorías.

    2- Si queremos modificar el aspecto del widget (borde, ancho, alto, etc) tenemos que añadir un estilo al final del widget, del tipo:

    <style type="text/css">#slider-rotator{width:350px!important;height:340px!important}</style>

    Un saludo y gracias de nuevo!!

    ResponderEliminar
  28. ¡Qué belleza de carrusel, de veras me alegró la noche!....mis entradas populares se ven fabulosas. Muchas gracias.
    Ingrid Zetterberg

    ResponderEliminar
  29. me gusto mucho ese carrser pero quisiera hacerte una pregunta a ver si es posible que en ves de solo verse un solo cuadro y las imagenes pasando se vieran mas de uno si es posible me podrias decir que puedo hacer de antemano muchas gracias

    ResponderEliminar
  30. Hola Ruby, muchas gracias por visitar el blog :))
    Siento decirte que el widget está diseñado para mostrar un sólo marco de presentación de imágenes.

    Saludos!!

    ResponderEliminar
  31. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  32. Hola Jose Maria, me ha gustado tu carrusel es muy practico pero quiero colocarlo con las entradas populares de varios blogs que tengo en mi blog principal. Estoy utilizando el codigo que has puesto directamente en la plantilla html para que tome algunos parametros de mi plantilla original, pero el problema es que cuando intento colocar los otros no me los admite, me gustaria colocar varios carrusel de mis blogs. te dejo mi pagina http://www.educarteesarte.com.ve/ alli puedes ver que esta un solo carrusel abajo donde dice nuestras secciones, porque el carrusel de arriba lo tengo con otro script. Te agradecería mucho si me pudieras ayudar. Saludos...

    ResponderEliminar
  33. Buenos días educarteesarte,
    muchas gracias por visitar el blog :))

    Sienteo decirte que el carrusel está diseñado para mostrar entradas con imágenes en formato slider de un blog.

    Un saludo!!

    ResponderEliminar
  34. Hola Jose María, soy Karmela que hace tiempo tengo instalado tu gadget en mi blog. Desde hace unos días comenzó a fallar, no sé si es porque los de blogger están cambiando configuraciones o porque, pero hoy directamente ya no se ve. Antes se quedaba como pensando y en momentos no cargaba, pero esta tarde dejó de funcionar por completo. Me gustaría saber si le está pasando a todo el mundo o es solo a mí, la verdad... Tú sabes si es un fallo puntual de blogger o es porque el código se ha estropeado. No sé que pensar, pero queda un hueco muy feo donde estaba ya que se ve nada mas entrar en el blog. Te dejo el enlace para que veas que no se ve: http://elrinconvintagedekarmela.blogspot.com.es/
    Si mañana sigue sin funcionar me veré obligada a quitarlo porque la estética para mi es muy importante, aunque no quiera ya que me voy de viaje unos días y no voy a poder modificar por temas de conexión... :( Espero tu respuesta¡¡ Gracias.

    ResponderEliminar
  35. Hola Karmela,
    acabo de comprobar que el widget tipo carrusel que proporcionaba Blogger ha dejado de funcionar.

    No sé si se trata de un bug temporal o dejará de funcionar definitivamente. Voy a tratar de averiguarlo pero al ser un gadget experimental es posible que lo hayan desaprobado.

    Saludos!!

    ResponderEliminar
  36. Ohhh que pena¡¡¡ Pues entonces, como me marcho mañana por un tiempo largo, lo voy a quitar, que queda feo, pero vamos que me da rabia porque me encantaba¡¡¡ Pues vas a tener que buscar alguno similar para poder implementarlo de nuevo, porque nos venia genial a los que lo teníamos¡¡. A mi vuelta miraré a ver si has encontrado uno parecido que lo supla.. Muchas gracias y te sigo... Saludos¡¡

    ResponderEliminar
  37. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  38. ¿me puedes indicar qué es lo que no funciona, todoaquibyalex?

    ResponderEliminar
  39. Buenas Jose Maria, al final quite el carrusel por que no consigo hacer los cambios, como indicas en la pagina, no se si se puede hacer de una forma sencilla como estaba antes, ya me dirás un saludo.

    ResponderEliminar
  40. Hola Radio Rebelde!
    como indico en el artículo, se trata de subir los ficheros a un directorio público y después referenciarlos desde el blog.

    Si te sirve, éste sería el bloque de código modificado que hace que funcione correctamente el carrusel (debes cambiar la url por la de tu blog)


    <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/jmacuna/slider-rotator/master/default-style.min.css"/>
    <div id="slider-rotator" class="slider-rotator loading"></div>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/jmacuna/slider-rotator/master/blogger-feed-rotator.min.js"></script>
    <script type="text/javascript">
    makeSlider({
    url: "http://jmacuna73.blogspot.com", // Add your blog URL
    numPost: 5,
    showDetail: true,
    summaryLength: 200,
    titleLength: 50,
    showThumb: true,
    squareThumb: false,
    autoHeight: false,
    crossFade: true,
    showNav: true
    });
    </script>




    ResponderEliminar
  41. Gracias José Maria, ahora si me funciona, se ve que no lo estaba haciendo bien.

    ResponderEliminar
  42. Muy buenas,

    En primer lugar gracias por el código (así como a su creador por el desarrollo de este slider)

    Lo he instalado perfectamente en nuestra web pero nos gustaría saber si se puede cambiar el color de los enlaces y texto así como el tipo de fuente y tamaño de la misma.

    Muchas gracias.

    ResponderEliminar
  43. Hola Peter Quint,
    gracias por visitar el blog y me alegro de que os haya servido el slider :)

    Para cambiar el aspecto del mismo, sólo hay que añadir al final del código las siguientes líneas (en negrita) y jugar con las numerosas características de presentación que proporcionan los estilos css:


    <style type="text/css">
    .slider-rotator h4 {
    font-size: 120%;
    color: #3B4B7E;
    }
    .slider-rotator p {
    color: #616161;
    }
    </style>


    dónde
    slider-rotator h4 hace referencia al link o enlace al post y
    slider-rotator p encapsula la descripción del artículo.

    Saludos!!

    ResponderEliminar
  44. Buenas de nuevo y gracias por la respuesta tan rápida.

    Todo perfecto salvo que se nos olvidó comentar si se podía cambiar los colores de los "cuadraditos" bajo la imagen (los que permiten mover el slider) y el color del link al seleccionar tanto el texto como el botón para ajustarlos más a la web.

    Muchas gracias y enhorabuena por el blog.

    ResponderEliminar
  45. Hola Peter,
    se puede cambiar la presentación de cualquier elemento del slider.

    Para lo que planteas (cuadraditos, color link):


    .slider-rotator-nav a{background-color:#333;}
    .slider-rotator-nav a.current{background-color:#3B4B7E}
    .slider-rotator h4 a:hover{color:#ff8c36}


    Siempre puedes utilizar el inspector de Google Chrome para poder seleccionar el elemento a modificar y realizar pruebas antes de subirlas al blog. Te paso una url de ejemplo pero existen infinidad de tutoriales:
    http://blog.hostdime.com.co/como-utilizar-las-herramientas-para-desarrolladores-de-chrome/

    Saludos!!

    ResponderEliminar
  46. De nuevo muchas gracias. Este es el primer slider de este tipo que funciona de verdad. La mayoría o tienen muy poca personalización o directamente las rutas han sido eliminadas del directorio de su creador, así que de nuevo enhorabuena y gracias.

    Por último, y sintiendo ser un poco pesado, en ocasiones el slider no funciona (de manera temporal) en cualquier dispositivo. ¿Puede ser debido a dónde está alojados los archivos? (en nuestro caso Google Drive)

    Un saludo.

    ResponderEliminar
  47. No te preocupes Peter ;)

    He estado observando la consola de errores de vuestro blog y no devuelve ningún error lo que hace pensar que el script debería funcionar en cualquier dispositivo. Tal vez, por problemas en la conexión o red, en ocasiones, no se produzca la carga de esos ficheros alojados en Google Drive pero no sabría responderte con exactitud.

    Otra cosa, os recomiendo que leáis el siguiente artículo: Alojar páginas web con Google Drive no será posible a partir del 31 de agosto de 2016

    Por cierto, el slider os ha quedado muy chulo. Enhorabuena a vosotros!!

    ResponderEliminar
  48. Buenas de nuevo y gracias por tu ayuda.

    En Google Drive tan sólo tenemos los dos archivos que hacen funcionar el slider. ¿Sería necesario subirlos a otro tipo de web (veo que recomiendas GitHub) o sólo afectaría a los que tienen alojada la página entera?

    Saludos.

    ResponderEliminar
  49. Hola Borja,
    en su web lo exponen de forma muy clara:

    - después del 31 de agosto, cualquier fichero o página web cuya url contenga https://www.googledrive.com/host/... dejará de funcionar.

    Un saludo!!

    ResponderEliminar
  50. Hola, me encanto el carrusel, muy buena tu pagina. te consulto algo, como hago para eliminar ese texto que aparece al posicionarme sobre el enlace? ("Texto Alternativo" creo que es) ya que muestra el titulo de la entrada.
    Y como hago para que el enlace no se ponga sobre la imagen cuando pongo

    showDetail: false,

    Gracias, saludos.

    ResponderEliminar
  51. Hola Franco, gracias por visitar el blog :)

    Para tu propósito, bastaría con añadir al final del código de script, antes de su cierre (</script>) la siguiente instrucción:

    $('.slider-item a').title = '';


    Por cierto, no se trata de un texto alternativo (se usa para describir las imágenes en caso de que no se puedan cargar en la página) sino de un título definido con la etiqueta html title.

    Un saludo!!

    ResponderEliminar
  52. hola, gracias por la respuesta, pero sigue apareciendo el letrero ese.
    (https://4.bp.blogspot.com/-UvmH3ECvjnQ/V6ijxXa9KJI/AAAAAAAAF3Q/6_f_DSZUAmAW7mMbKNg5RRLY66_nZiDXQCLcB/s1600/Imagen1.png)

    y de paso te consulto

    Y como hago para que el enlace no se ponga sobre la imagen cuando pongo

    showDetail: false,

    Gracias, saludos.

    ResponderEliminar
  53. Hola, como hago para que el enlace habra en otra ventana, puse


    newTabLink: true,

    pero abre el enlace en otra pestaña y necesito que sea en otra ventana y que la ventana tenga medida especifica. Gracias

    ResponderEliminar
  54. La solución a vuestras preguntas:

    - modificamos la función makeSlider para añadir el parámetro onInit de la siguiente forma (en negrita):


    makeSlider({
    url: "http://jmacuna73.blogspot.com", // Add your blog URL
    numPost: 5,
    showDetail: true,
    summaryLength: 200,
    titleLength: 50,
    showThumb: true,
    squareThumb: false,
    autoHeight: false,
    crossFade: true,
    showNav: true,
    onInit: function(){
    $('#'+this.containerId).find('a').attr('title',''); //Atributo title de los links
    $('#'+this.containerId).find('a').click(function(){ //Abro los links en ventanas de 700x600 (ancho/alto)
    window.open(this.href, 'w', 'width=700,height=600');
    return false;
    });
    }
    });


    Saludos!!

    ResponderEliminar
  55. Buenas de nuevo,

    Al parecer ya no se pueden subir imágenes a Picasa y hay que hacerlo a través de Google Photos para que las imágenes del carrusel sean visibles. El problema es que hoy hemos añadido una nueva entrada con la imagen subida a Google Photos y dicha imagen no se ve.

    Tampoco se ve en las vistas dinámicas: http://www.miedoteca.com/view/magazine Como verás la imagen de la primera reseña no es visible desde la página principal.

    Investigando un poco al parecer en Photos la URL que te da no tiene extensión .jpg por ejemplo. Añadiendo la coletilla "?.jpg" al final de esta URL tampoco se consigue ver la imagen en el carrusel.

    ¿Alguna sugerencia?

    Gracias de nuevo.

    ResponderEliminar
  56. Perdona el doble comentario.

    Al parecer Google Photos transforma el archivo original de la imagen en una con formato .WEBP (es la primera vez que lo oigo) pero no hay forma de que la suba en JPG. y el carrusel no la reconozca. ¿Podría ser ese el problema?

    ResponderEliminar
  57. Hola Borja,
    la verdad es que cuando necesito una imagen de portada o thumbnail en un nuevo post, lo que hago siempre es utilizar una imagen que me he descargado en local y desde las opciones de edición de Blogger subirla desde ese directorio local.

    Lo que puedes hacer para solucionar ese inconveniente es bajarte esa imagen en formato WEBP y abrirla con un editor gráfico (si usas Windows, el programa Paint te servirá). A continuación, guardas la imagen con extensión png.
    Por último, sube esa imagen a Blogger y la referencias en tu artículo.

    Un saludo!!

    ResponderEliminar
  58. Gracias por la respuesta, Jose.

    Al final la solución más fácil es la que comentas. Yo siempre subía a Picasa las imágenes y allí me hacía con la URL para meterla en el editor de Blogger. Ahora que Picasa no está disponible (lo está pero no te deja subir nada) hay que hacerlo por Google Photos. Me he fijado que la imagen aparecía ahora con una señal de prohibido como si sólo la pudiera ver yo. He estado trasteando y no hay opción posible para cambiar la privacidad desde Google Photos (desde Picasa si la había, la vamos a echar de menos) así que me he decantado por tu opción, mucho más rápida.

    Muchas gracias.

    ResponderEliminar
  59. Hola de nuevo, José María.

    Me ocurre una cosa rarísima en el slider. Siempre que subo una nueva entrada en la web, la primera imagen del slider sale cortada pero a partir de la segunda sale todo perfecto (texto e imagen) Lo curioso es que si estamos en la imagen 10, la siguiente vuelve a la 1 (la que da el problema) pero ahora se muestra bien. Es un poco difícil de explicar.

    Pasa siempre que visitas la página.

    Te dejo un ejemplo gráfico. Primera entrada con imagen cortada: http://oi67.tinypic.com/2lk5ic6.jpg

    La siguiente ya sale bien: http://oi63.tinypic.com/mww115.jpg

    Y lo curioso es que si retrocedes o esperas a que terminen las 10 entradas, la primera sale bien: http://oi67.tinypic.com/20kt20p.jpg

    ResponderEliminar
  60. Hola Borja,
    lo primero es pedirte disculpas por la demora en la contestación pero he estado fuera y no he podido responderte.

    He observado el slider y efectivamente se produce ese efecto que comentas y es debido al parámetro autoHeight que lo tienes puesto a true y no funciona de forma correcta. Si lo pones a false verás como el comportamiento en la visualización de las imágenes es el adecuado.

    Un saludo!!

    ResponderEliminar
  61. Muy buenas,

    Tranquilo, yo también he estado fuera unos días y no he podido leer la respuesta.

    Al final era eso que comentas, era una tontería y me ha dado un montón de quebraderos de cabeza y como dejó de funcionar de repente, pensé que era algo más grave.

    ¡Muchas gracias!

    ResponderEliminar
  62. Saludos, Felicitaciones muy Bueno este Gadget, lo he implementado pero no me Muestra las Imagenes. http://bloggerozweb.blogspot.com

    ResponderEliminar
  63. Hola,
    no te funciona porque no tienes suficientes entradas publicadas, creo que sólo tienes un artículo.

    Un saludo!

    ResponderEliminar
  64. hay alguna forma de que en el carrusel slagan mis entradas más populares? qué tendría que modificar?

    ResponderEliminar
  65. Hola Bizarruz,
    el carrusel está diseñado para mostrar todas las entradas del blog.

    Gracias por visitar el blog.
    Un saludo!!

    ResponderEliminar
  66. Hola Amigo lo implemente pero no me aparecen las entradas

    ResponderEliminar
  67. Hola Villa,
    si sustituyes esta url:
    blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js

    por esta otra:
    cdn.jsdelivr.net/gh/jmacuna/slider-rotator@master/blogger-feed-rotator.min.js

    debería funcionar el widgets.
    Ya me dices.
    Un saludo

    ResponderEliminar
  68. Hola, a mi no me funciona alguien me ayuda por favor

    ResponderEliminar
  69. Hola Jose, primero decirte que muchísimas gracias por compartir, tienes un gran contenido^-^
    Pero lastimosamente el widget no me funciona, que pena u_u

    ResponderEliminar
  70. Hola, ¿me podéis indicar la url dónde habéis implementado el widgets y no os funciona?, así le puedo echar un vistazo y tratamos de solucionarlo.
    Gracias!

    ResponderEliminar
  71. Tengo puesto el slider de Entradas, quisiera hacerlo mas pequeño, pero no logro ver donde tengo que cambiar las medidas por mas que miro no encuentro donde esta el texto que veo en la contestación a Karmela. Un saludo.

    ResponderEliminar
  72. Me podrías indicar el nombre de la plantillas que usas en este sitio. Esta bien minimalista. Me gustaría usarla también. Saludos.

    ResponderEliminar