Tutoriales 🎓

Fantástico Slider super Sencillo para BLOGGER

Como agregar un Slider sencillo para Blogger


Aquí les traigo unos de mis tutoriales donde les mostraré como pueden agregar o poner un slider sencillo para blogger o en cualquier entrada de tu pagina web o Blog.

Para poder colocar este Slider de manera mas simple, haremos uso de una librería llamada jQuery. Así que tienes que saber si es que tu blog tiene la librería incluida.

Al colocar este slider con animación automática podrás destacar todas tus entradas con un efecto carrusel el cual le dará un toque más profesional a tu BLOG, y sin hacer mucho esfuerzo… Solo tendrás que seguir los pasos al pie de la letra y agreagar lo códigos HTML que te proporcionamos.

Como hacer que funcione este slider básico para Blogger

Si tu blog no tiene la librería de jQuery, no te preocupes, para agregarla simplemente te diriges a la sección Plantilla > Editar HTML y agregas el siguiente código antes de la etiqueta </head>

<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js’type=’text/javascript’/>

Luego de estar seguros de que ya tenemos la librería de jQuery en nuestro blog, agregan bajo la misma línea el siguiente código a continuación:

<script type=»text/javascript»>//<![CDATA[
$(function(){
    $(‘#slider div:gt(0)’).hide();
    setInterval(function(){

$(‘#slider div:first-child’).fadeOut(0)
         .next(‘div’).fadeIn(1000)         .end().appendTo(‘#slider’);}, 4000);});//]]></script>


Ahora deberán agregar los estilos que tendrá vuestro Slider. Para ello se dirigen nuevamente a Plantilla > Editar HTML y agregan los siguientes estilos:

#slider { 
  position: relative;  overflow: hidden;  width: 100%;  height: 350px;  margin: 0 auto;  padding: 0;}

#slider > div {
  position: absolute;  top: 0;  left: 0;}

#slider img {
  width: 100%;  min-height: 350px;  margin: 0;  padding: 0;  border: 0;}

En los estilos que acaban de agregar es donde ustedes podrán modificar el alto del Slider, solo tendremos que modificar las propiedades   height    y    min-height  . Es importante que en ambas propiedades coloquemos el mismo valor.

Como configurar el SLIDER para destacar las entradas o páginas de tu blog

Ahora si agregaremos la estructura de nuestro Slider. Para ello entramos a Diseño y aquí daremos en Añadir un gadget y pegamos el siguiente código:

<div id=»slider»>
    <div><a href=»#»><img src=»URL-IMAGEN1″/></a></div>
    <div><a href=»#»><img src=»URL-IMAGEN2″/></a></div>
    <div><a href=»#»><img src=»URL-IMAGEN3″/></a></div>
</div>

En el último paso deberán cambiar el texto   URL-IMAGEN#   por el de las imagenes que queremos mostrar en el Slider y   #   por el enlace de la entrada o página de tu web o blog que quieras destacar.

Publicaciones relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba