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:
- 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: "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> - 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 (contado 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
},