Tener un diseño de calidad de nuestro sitio web o blog es fundamental para nuestro sitio, el sitio es la pieza principal de visibilidad del usuario, seras juzgado por lo que hagas y lo que coloques en tu sitio web o blog.
Estudios señalan que la primera impresión es critica:
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 traer mas visitante o lectores a nuestro blog o pagina web, utilizaremos las distintas herramientas que nos ofrece el gestor de contenido Blogger. Entre esas herramientas que nos ayudan a tener un diseño para blog de blogger son los Widgets y Gadgets, que permiten insertar información para el usuario final.
Blogger coloca a nuestra disponibilidad un Gadget de fácil implementar en nuestro blog y que tiene mucho interés entre lo usuarios de Blogger: Un Carrusel o Slider de imagenes para blogger.
En este Gadget colocaremos en Nuestro Blog, un carrusel de las Entradas recientes con una imagen y un pequeño fragmento del cuerpo de la entrada.
El Demo esta en esta web en la parte derecha, Para Insertar seguir estos pasos:
En el Panel Principal de Blogger, entras en Diseño das clic en Añadir un Gadget luego se te abrirá una ventana diferente y seleccionas HTML/JavaScript.
Colocas un titulo por ejemplo Entradas Recientes.
En la Caja Texto de Contenido el siguiente código:
<link rel="stylesheet" type="text/css" href="https://dl.dropboxusercontent.com/s/5h71uu2zg82d8fo/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="https://dl.dropboxusercontent.com/s/r821i8thqfd3i4i/blogger-feed-rotator.min.js"></script><script type="text/javascript">makeSlider({ url: "http://bloggerozweb.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>
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
},
Finalmente da en Guardar.
Podéis ver el Ejemplo funcionando en este Blog.
1 Comentarios sobre "Carrusel de Entradas Recientes con Imágenes para Blogger"
Ayudame con el codigo por favor esta es mi web
https://zoneanime8.blogspot.com/