Carrusel de entradas recientes con imágenes para Blogger ~ TecnoBlog

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/Javascript
   
   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

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: «<», // Texto para mostrar el botón Anterior de navegación
     next: «>» // 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).