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.
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:
- Selecciona la entrada Diseño del panel principal de Blogger.
- Pulsa sobre el link Añadir un gadget y se abrirá una ventana con diferentes alternativas
- 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.
- Introduce el Título del widgets (por ejemplo Entradas recientes)
-
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> - 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:
- Descagar el fichero comprimido en formato zip: https://storage.googleapis.com/google-code-archive-source/v2/code.google.com/blogger-json-experiment/source-archive.zip
- Una vez descomprido, acceder al directorio resources/blogger-feed-rotator-plugin
- Por último, subimos los ficheros default-style.min.css y blogger-feed-rotator.min.js a un directorio público para referenciarlos desde el blog.
Es decir, reemplazamos http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/ por nuestra nueva ruta.
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
},
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).
