Slider dinámico para Blogger
Desde hace bastante tiempo he estado buscando la forma de añadir a Blogger un slider dinámico, es decir, que no sea necesario incluir las entradas de manera manual y que el slider mostrara al azar el contenido del blog en las diapositivas.
El slider está basado en Easy Slider 1.7, uno bastante personalizable basado en jQuery.
El resultado es el siguiente:
Puedes comprobar que el contenido es automático actualizando la página, el contenido carga dinámicamente desde las feeds del blog.
Paso 1: Añadiendo los estilos:
En "Diseño | Edición HTML" deberás buscar la siguiente línea:
Ahora deberás buscar la siguiente línea:
Ahora que tenemos los estilos y los scripts necesarios para hacer funcionar el slider, deberás pegar el siguiente código donde quieras que aparezca el slider:
Reemplaza el valor resaltado en verde por la URL de tu blog (Si usas un dominio personalizado incluye el www).
Posteriormente guarda los cambios y listo.
Es posible definir que el script sólo muestre las entradas de una etiqueta en específica reemplazando el código anterior por el siguiente:
También puedes definir algunos valores para personalizar un poco mejor el slider:
El slider está basado en Easy Slider 1.7, uno bastante personalizable basado en jQuery.
El resultado es el siguiente:
Puedes comprobar que el contenido es automático actualizando la página, el contenido carga dinámicamente desde las feeds del blog.
El tutorial:
En "Diseño | Edición HTML" deberás buscar la siguiente línea:
]]></b:skin>Arriba de ésta pega el siguiente código:
/*Slider dinámico para blogger -Inicio*/#slide-container { /*CONTENEDOR GENERAL*/
height:340px; /*Alto del slider*/
position:relative;
width:480px; /*Ancho del slider*/
background:#2d2d2d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDPmGbXktR0G35bYU_X9wcwiFrE-9Kj6eauUeqYaepNx6nA3MMYMrwBdDD4_d6sfWBWlA0G_jGIXDWoONeSAAsxCVkUrxXfFvSho3D4xjhpepR2IDh7_ZDeSc1dVPH3zJ4y-aqfcwigTo/s1600/mosaic5_1920x1080.png) no-repeat;
overflow:hidden; /*Imagen de fondo*/
}
/*ENLACES*/
#slider a {color:#fff;}
/*IMAGEN*/
#slider img {width:100%;height:100%;bottom:0;}
#slider { /*EL SLIDER*/
height:330px; /*Alto del slider*/
left:25px;
overflow-x:hidden;
overflow-y:hidden;
position:relative;
width:480px; /*Ancho del slider*/
}
.slide-desc { /*DESCRIPCIÓN*/
background-color: rgba(1, 1, 1, 0.8); /*Color y semitransparencias de la descripción*/
color:#FFFFFF; /*Color del texto de la descripción*/
padding:10px;
position:absolute;
font-size:11px; /*Tamaño del texto*/
text-align:left;
line-height:1.5em;
bottom:10;
max-height:100px;
width:470px; /*Ancho de la descripción*/
z-index:99999;
}
/*TITULOS*/.slide-desc h2{display:block;font-size:13px;}
/*IGNORAR*/#slider ul, #slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a, #nextBtn a, #slider1next {display:none;}
#slider li {overflow:hidden;}
/*Slider dinámico para blogger -Fin*/
Paso 2: Instalando jQuery, Easy Slider y el script necesario:
Ahora deberás buscar la siguiente línea:
</head>Arriba de ésta pega el siguiente código:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script>Guarda los cambios y listo.
<script src='http://dl.dropbox.com/u/28164309/Ayuda%20Bloggers/Recursos%20del%20Blog/easySlider1.7.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
speed: 320,
pause: 2000,
continuous: true
});
});
//]]>
</script>
Importante:
- Si ya tienes jQuery instalado en tu plantilla omite el código resaltado.
Paso 3: Instalando el slider:
Ahora que tenemos los estilos y los scripts necesarios para hacer funcionar el slider, deberás pegar el siguiente código donde quieras que aparezca el slider:
<div id="slider">
<script style="text/javascript" src="http://dl.dropbox.com/u/28164309/Ayuda%20Bloggers/Recursos%20del%20Blog/easy-slider-feeds.js"></script>
<script style="text/javascript">
var numposts_gal = 20;
var numchars_gal = 100;
var random_posts = true;
</script>
<script src="http://tu-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>
Reemplaza el valor resaltado en verde por la URL de tu blog (Si usas un dominio personalizado incluye el www).
Posteriormente guarda los cambios y listo.
Configuraciones extras:
Es posible definir que el script sólo muestre las entradas de una etiqueta en específica reemplazando el código anterior por el siguiente:
<div id="slider">En donde aparece "ETIQUETA" deberás establecer el nombre de ésta.
<script style="text/javascript" src="http://dl.dropbox.com/u/28164309/Ayuda%20Bloggers/Recursos%20del%20Blog/easy-slider-feeds.js"></script>
<script style="text/javascript">
var numposts_gal = 20;
var numchars_gal = 100;
var random_posts = true;
</script>
<script src="http://tu-blog.blogspot.com/feeds/posts/default/-/ETIQUETA?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>
También puedes definir algunos valores para personalizar un poco mejor el slider:
En el script:
- speed: 320 // Corresponde al tiempo de la transición.
- pause: 2000, // Corresponde al tiempo que demora en cambiar de entrada (Milisegundos).
En CSS:
- Los valores están resaltados en verde.
En el cuerpo del slider:
- var numposts_gal = 20; // Define la cantidad de entradas que mostrará el slider
- var numchars_gal = 100; //Carácteres en la descripción de la entrada
- var random_posts = true; //Cambiar por false para que el contenido no sea al azar y sea por fechas
Bugs del slider:
- Al terminar la lista de entradas la última se repite y el slider queda blanco, cuando vuelve a la primera la animación difiere de la original (Saltos). Para evitar ese problema puedes tomar un gran número de entradas y definir un tiempo de espera superior entre cambios de entradas.
- Al slider le deshabilité los controles de navegación ya que tenían problemas (Se repetían y no funcionaban bien)
