Últimamente he hecho algunos experimentos con JSON y, como una cosa lleva a la otra, pues he acabado haciendo un slider. Y como quería practicar mi Javascript “clásico” (sin librerías), para añadir transiciones, he usado CSS3. De todas maneras he hecho otro con animaciones caseras via Javascript (las típicas de jQuery, etc.) La verdad es que no se me ocurría otro nombre, y no quería poner como título “Un slider automático animado sin librerías para blogger”. Así que “bloggerSlider”. El resultado viene a ser este:

DemoVienen muchos ejemplos que te pueden servir.Ver el modo de usoYo también iría ahí directamente

El script consta de dos partes: La función JSON para “llenar” el slider automáticamente, y un objeto (el propio slider).

El JSON

Mostrar/ocultar código


//función de ayuda para animar con el slider
 Object.keys = Object.keys || function(obj){
  var res = []
  for (var pr in obj){
   res.push(pr)
  }
  return res
 }
function borraretiquetas(string){
 if (string.indexOf("<")!==-1){
  var res = [];
  string = string.split("<")
  
  for (var i=0;i<string.length;i++){
   if(string[i].indexOf(">")!==-1){
    res.push(string[i].split(">")[1])
   }else{
    res.push(string[i])
   }
  }
  string = res.join("")
  }
 return string
}

function formatofecha(fecha){
 var dia,mes,año;
  fecha = fecha.split("-")
  dia = fecha[2].substring(0,2)
  mes = fecha[1]
  año = fecha[0]
 return dia+"-"+mes+"-"+año
 }
 
function imgtitulo(json){
 //aquí cogemos las opciones
 var opt = opcionesEntradas,
 //El contenedor. Cambiar "slider-entradas" por vuestra ID
 //Aseguraos de que hay una lista no ordenada dentro (<ul></ul>)
  contenedor = opt.contenedor ? typeof opt.contenedor  === 'string' ? 
          document.getElementById(opt.contenedor): 
          opt.contenedor
         :document.getElementById('slider-entradas'),
  
  lista = contenedor.getElementsByTagName('ul')[0],
  //Nos aseguramos de que la salida va a ser una <ul>.
  //Es posible que se quiera deshabilitar si se cambia la plantilla.
  comprobarLista = opt.comprobarLista !== false ? true : false,
  entradas = json.feed.entry,
  //Carácteres del resumen
  charsResumen = opt.charsResumen || 200,
  //Tamaño por defecto de la imagen
  tamanoImagen = opt.tamanoImagen ? typeof opt.tamanoImagen === 'number' ? [ opt.tamanoImagen, opt.tamanoImagen ] : opt.tamanoImagen
      :[ 120, 120 ],
  //Si queremos que se muestre la imagen
  //como etiqueta o sólo la url
  //true o false
  tagImagen = opt.tagImagen !== false ? true : false,
  
  //Obtener la imagen del post completa, no la imagen cuadrada que nos da blogger
  //Como su nombre indica, experimental, pero parece que funciona bien
  sourceExperimental = opt.sourceExperimental || false,
  //Imagen por defecto: false o una URL
  imagenPorDefecto = opt.imagenPorDefecto || undefined,
  //La plantilla. Si tenéis un script así:
  //<script type="UnTipoQueNoExiste" id="plantilla-slider">
  //...Aquí vuestro HTML...
  //<\/script>
  //Usará ese HTML como plantilla, sustituyendo:
  //"{{img}}" => La imagen (tag o URL)
  //"{{link}}" => La URL de la entrada
  //"{{tit}}" => El título de la entrada
  //"{{fecha}}" => La fecha de publicación
  //"{{res}}" => El resumen de la entrada
  plantilla = typeof opt.plantilla === 'string' ? opt.plantilla : opt.plantilla ? opt.plantilla.innerHTML : document.getElementById("plantilla-slider") ? 
       document.getElementById("plantilla-slider").innerHTML
      :'<li class="entrada"> {{img}}<h2><a href="{{link}}" title="{{tit}}">{{tit}}<\/a><\/h2><span class="fecha">{{fecha}}<\/span><p>{{res}}<\/p><\/li>',
  //Vacío, aquí añadiremos todo de una vez al contenedor
  documento = '',
  urlImg,
  i =  0,j,k,
  //Variables que definiremos más tarde
  entrada, linksentrada, link, titulo,
  //Arrays donde irán los títulos, etc
  titulos = [],
  fechas = [],
  resumenes = [],
  links = [],
  imagenes = [];

 if( comprobarLista && !lista ){
  lista = contenedor.appendChild( document.createElement( 'ul') )
 }
 
 contenedor = lista;
 
 for(;i < entradas.length;i++){
  j=0
  entrada = entradas[i]
  titulo = entrada.title.$t

  titulos.push( titulo )
  fechas.push( formatofecha(entrada.published.$t) )
  resumenes.push( borraretiquetas(entrada.content.$t)
       .substring(0,charsResumen)+'...' )

  linksentrada = entrada.link

  //Hallamos el link de la entrada (rel = alternate)
  for(;j<linksentrada.length;j++){
   linkactual = linksentrada[j]
   if(linkactual.rel === "alternate"){
    link = linkactual.href; break;
   }
  }

  links.push(link)
  
  //Si hay imagen
  if( entrada.media$thumbnail){
   urlImg = entrada.media$thumbnail.url
   if( sourceExperimental ){
    k = 0
    urlImg = "<"+entrada.content.$t.match(/<img\s.*(\/>)/)[0].split("<")[1]
    urlImg = urlImg.split("=")
    for(;urlImg[k];k++){
     //si los 3 últimos caracteres son "src"
     //cogemos el siguiente elemento(la url)
     if(urlImg[k].substring(urlImg[k].length-3)==="src"){
      //quitamos las comillas con el split
      urlImg = urlImg[k+1].split("\"")[1];break
     }
    }
   }
   //Si lo queremos con tags
   if( tagImagen ){
    imagenes.push('<a href="'+link+'"><img src="'+ urlImg.replace(/\/s72/,"\/s"+ tamanoImagen[1])+'" alt="'+titulo+'" style="width:'+tamanoImagen[1]+'px; height:'+tamanoImagen[0]+'px"/><\/a>')
   //Sólo la URL
   } else {
    imagenes.push(
     urlImg
     .replace(/s72-/,"s"+ tamanoImagen[1] +"-")
    )
   }
  //Si tenemos imagen por defecto
  } else if ( imagenPorDefecto ){
   //Si queremos la etiqueta
   if( tagImagen ){
    imagenes.push('<a href="'+link+'"><img src="'+ imagenPorDefecto.replace(/\/s72/,"\/s"+ tamanoImagen[1])+'" alt="'+titulo+'" style="width:'+tamanoImagen[1]+'px; height:'+tamanoImagen[0]+'px"/><\/a>')
   //Sólo la URL
   } else {
    imagenes.push(
     imagenPorDefecto
     .replace(/\/s72-/,"\/s"+ tamanoImagen[1] +"-")
    )
   }
  //Si no hay imagen siempre enviamos algo, para que no se desordene
  } else {
   imagenes.push(" ")
  }
 }
 
 i=0;
 //Remplazamos todo de la plantilla por las variables.
 //El número de títulos es igual al número del resto de cosas
 for( ;i < titulos.length; i++ ){
  documento += plantilla.replace(/{{img}}/g,imagenes[i])
   .replace(/{{tit}}/g,titulos[i])
   .replace(/{{link}}/g,links[i])
   .replace(/{{fecha}}/g,fechas[i])
   .replace(/{{res}}/g,resumenes[i])
 }
 //Metemos en la <ul></ul> todo el contenido
 contenedor.innerHTML += documento

return true
}

El Slider

Mostrar/ocultar códigoNota: Aquí muestro la versión animada. Hay otra con CSS3 ( un pelín ) más compacta. Plugin para jQuery en camino.


function slider(opt){
 var nav;

 //El contenedor es lo único obligatorio
 this.contenedor = typeof opt === "string" ? 
     document.getElementById( opt )
     : typeof opt.contenedor === "string" ?
      document.getElementById( opt.contenedor )
      : opt.contenedor
 
 //Para avance automático
 this.tiempoTrans = opt.avanceAuto || false
 
 //Easing de la animación
 this.easing = opt.easing || ''
 
 //si no hemos especificado opciones, el navegador 
 //lo configuramos arriba.
 this.nav = this.nav || typeof opt.nav === "string" ?
       document.getElementById( opt.nav )
       :opt.nav
 
 this.tiempoAnim = parseFloat(opt.tiempoAnim) || 700
 //Si no hay botones, los creamos
 if( !this.nav ){
  nav = document.createElement('div');
  nav.id = !document.getElementById("slider-nav") ? "slider-nav" : "slider-nav-1"; 
  //Forma fácil de usar "insertAfter" ( que no existe )
  this.contenedor.nextSibling ? 
   this.contenedor.parentNode.insertBefore( nav, this.contenedor.nextSibling ):
   this.contenedor.parentNode.appendChild( nav );
  this.nav = nav; 
  this.autoNav = true;
 }
 
 //crear el navegador
 this.autoNav = this.autoNav || opt.autoNav || false
 //si queremos alguna slide como comienzo 
 //el menos 1 es para facilitar las cosas
 this.slideActual = opt.slideInicial - 1 || 0
 
 //Si queremos que la altura cambie al animar
 this.cambioAltura = opt.cambioAltura || false
 
 //Textos para el botón anterior y siguiente
 this.textoSiguiente = opt.textoSiguiente || "Siguiente"
 this.textoAnterior = opt.textoAnterior || "Anterior"
}

slider.prototype = {
 //función básica para obtener propiedades
 estilo: function(el, prop){
  var res,
   num,
   before = el.style.display;
  
  //Ponemos display:inline-block para evitar fallos de medida que
  //suceden en ciertos navegadores
  if(prop !== "display"){el.style.display = "inline-block"}

  if(window.getComputedStyle){
   res = window.getComputedStyle(el,null).getPropertyValue(prop)
  }else{
   res = el.currentStyle[prop]
  }

  //En estos condicionales intentamos poner la propiedad como número
  num = parseFloat(res)
  res = isNaN(num)  ? res : num
  
  //El valor "auto" no nos vale para altura y anchura
  res = (isNaN(num)&&prop.match(/^(height|width)/))? 
     this.calcWidthHeight(el, prop) 
     : res;
  //Si las propiedades son left/right/bottom/top o el ancho de los bordes y nos devuelve
  //"auto" tomamos como valor el 0
  res = ( isNaN(num) && prop.match(/^(border-(left|top|bottom|right)-width|left|top|bottom|right)$/) ) ?
     0 
     : res;
  el.style.display = before || ''
    
  return res;
 },
    //si necesitamos calcular anchura automática
    //(muy probablemente innecesario)
 calcWidthHeight: function( el, prop ){
  var esto = this,
   //La idea de las claves la saqué de jQuery
   claves = ["top","bottom","left","right"],
   i = prop === "height" ? 0 : 2,
   inicio = prop === "height" ? el.offsetHeight : el.offsetWidth
  
  inicio -= esto.estilo(el, "border-"+claves[i]+"-width" )
  inicio -= esto.estilo(el, "border-"+claves[i+1]+"-width" )
  inicio -= esto.estilo(el, "padding-"+claves[i] )
  inicio -= esto.estilo(el, "padding-"+claves[i] )
  return inicio
 },
 //función para igualar los eventos de IE y del 
 //resto de navegadores
 evento: function(el, evento, fn){
  (el.addEventListener) ? 
    el.addEventListener(evento, fn, false ) 
    : el.attachEvent('on'+evento, function(){fn.call(el)})
 },
 //función para borrar clases de las entradas y los slides
 borrarClase: function( elementos, claseParaBorrar ){
  var j = 0,
   k,
   esto = this,
   res,
   clases;
       
  for(;j < elementos.length ; j++){
   res = [],
   k = 0;
   clases = elementos[j].className.split(" ")
   for (; k < clases.length; k++){
    if(clases[k] !== claseParaBorrar){
     res.push(clases[k])
    }
   }
   elementos[j].className = res.join(" ")
  }
 },
 nombreJS: function(nombre){
  var i = 0,
   firstChar;
  if(nombre.indexOf("-")!== -1){
   nombre = nombre.split("-")
   for(; i < nombre.length;i++){
    firstChar = nombre[i].charAt(0).toUpperCase()
    nombre[i] = (i !== 0) ? 
     firstChar + nombre[i].substring(1)
     :nombre[i]
   }
  nombre = nombre.join("")
  }
  return nombre
 },
 nombreCSS:function(nombre){
  nombre = nombre.toString()
  
  var mayusculas = nombre.match(/[A-Z]/g),
  i = 0;
  if(mayusculas){
  for(;i < mayusculas.length; i++){
   nombre = nombre.replace(mayusculas[i],"-"+mayusculas[i].toLowerCase())
  }
  }
  return nombre
 },
 hexRgb: function(valor){
  var val = valor.substring(1),
   salto,
   hex,
   rgb,
   colorrgb;
  if(val.length==3){salto=1}else{salto=2}
  hex=[val.substring(0,salto),
    val.substring(salto,2*salto),
    val.substring(2*salto,3*salto)];
  if(val.length==3){
   hex[0] = hex[0] + hex[0]
   hex[1] = hex[1] + hex[1]
   hex[2] = hex[2] + hex[2]
  }
  rgb = [parseInt(hex[0],16),
    parseInt(hex[1],16),
    parseInt(hex[2],16)]
  colorrgb = "rgb("+rgb[0]+","+rgb[1]+","+rgb[2]+")";
  return colorrgb;
 },
 rgbSplit: function(color){
  color = color.toString()
  
  var marca = color.substring(0,4) === "rgba" ? "rgba" : "rgb",
  arr = [marca,],
  color = color.split(",")
  i = 0
  for(;i < color.length ; i++){
   if(i === 0){
    arr.push( parseInt(color[i].substring( marca.length + 1 ) ) )
   } else if (i === color.length -1){
    arr.push( parseFloat( color[i].substring( 0, color[i].length -1) ) )
   } else {
    arr.push( parseInt( color[i] ) )
   }
  }
  
  if(arr[0] === "rgb" ){ arr[3] = parseInt(arr[3]); arr.push(1)}
  return arr
  
 },
 easings: {
  linear: function(frameAct, cambio, init, frames){
   return init + cambio/frames * frameAct
  },
  easeOutQuad: function(frameAct, cambio, init, frames){
     return init - cambio *(frameAct/=frames)*(frameAct-2);
  },
  easeInQuad: function (frameAct, cambio, init, frames) {
    return init + cambio*(frameAct/=frames)*frameAct;
  }
 },
 animar: function (el, props, tiempo , easing, callback){
  var esto = this,
   display = esto.estilo(el,"display");
  esto.animado = true
  if(easing && typeof easing === "function"){callback = easing; easing = undefined}
  
  for (var p in props){
   if(props[p] === "toggle"){
    props[p] = (display === "none") ? "show" : "hide"
   }else if(props[p].toString().match(/bounce/)){
    props[p] = parseFloat( ( esto.estilo(el,p) == props[p].split(",")[1]) ? props[p].split(",")[2] : props[p].split(",")[1])
   }
   (p === Object.keys(props)[0])? this.hacerAnim(el, p, props[p], tiempo, easing, callback) : this.hacerAnim(el, p, props[p], tiempo, easing)
  }
  return this
 },
 hacerAnim: function(el,prop, fin, tiempo, easing, callback){
    prop = this.nombreJS(prop)
    
    var esto = this,
    fps = 65,
    frames = fps * tiempo/1000,
    frameAct = i = 1,
    unit = (prop === ("opacity" || "zIndex" || "zoom" || "color" || "backgroundColor")) ? '' : 'px',
    animado,
    init,
    dif,
    antes = el.style[prop] || '',
    overflowBefore = el.style.overflow || '',
    finSplit;//solo para color
        
    if(prop === ("height" || "width")){el.style.overflow = "hidden"}
    if(prop === "background"){prop = "backgroundColor"}
       
    easing = esto.easings[easing]||esto.easings.easeInQuad

    if(fin !== "show"){
     init = el.style[prop] ? parseFloat(el.style[prop]) : esto.estilo(el,prop)
    }
    if(prop.match(/color/i)){
     fin = fin.substring(0,1) === "#" ? esto.hexRgb(fin) : fin
     
     finSplit = esto.rgbSplit(fin)
     
     init = init === null || init === "" || init.match(/trans/) || init === "white" ? "rgb(255,255,255)" : init 
     init = esto.rgbSplit(init)

    } else {
     if(!isNaN(fin)){
      dif = fin - init
     }else if(fin === "hide"){
      dif = -init
     }else if(fin === "show"){
      init = 0;
      el.style.visibility = "hidden"
      dif = esto.estilo(el,prop)
      el.style.display = ""
      el.style.visibility = "";
     }
     
     el.style[prop] = init + unit
    }

    if(prop === "opacity"){el.style.filter = "alpha(opacity="+100*init+")"}
     function an(){
      var valAct = easing(frameAct, dif, init, frames)
      if(prop === "opacity"){
       el.style[prop] = valAct + unit;
       el.style.filter = "alpha(opacity="+100*valAct+")"
      
      }else{
      
       el.style[prop] = valAct + unit
      
      }
      frameAct++
     }
     function color(){
      var r = parseInt(easing(frameAct, finSplit[1]-init[1], init[1], frames) ),
       g = parseInt(easing(frameAct, finSplit[2]-init[2], init[2], frames) ),
       b = parseInt(easing(frameAct, finSplit[3]-init[3], init[3], frames) ),
       a = easing(frameAct, finSplit[4]-init[4], init[4], frames),
       IEfilter = Math.floor(a*255).toString(16)+Math.floor(r.toString(16))+Math.floor(g.toString(16)) + Math.floor(b*255).toString(16)
       if(finSplit[0] === "rgba"){
        el.style[prop] = "rgba("+r+","+g+","+b+","+a+")"
        el.style.zoom = "1"
        el.style.filter = "progid:DXImageTransform.Microsoft.gradient(startColorstr=#"+IEfilter+", endColorstr=#"+IEfilter+");"
       }
       else {
        el.style[prop] = "rgb("+r+","+g+","+b+")"
       }
      frameAct++
     }
     function end(){
      clearTimeout(animado)

      if (!isNaN(fin)) {el.style[prop] = fin + unit}

      else if(fin === "hide") {el.style[prop] = antes; el.style.display = "none"}
      
      else if(fin === "show"){el.style[prop] = antes}

      if(prop.match(/color/i)){
        el.style[prop] = "rgb("+ finSplit[1]+","+ finSplit[2]+","+ finSplit[3]+")"
       if(finSplit[0] === "rgba"){
        el.style[prop] = "rgba("+ finSplit[1]+","+ finSplit[2]+","+ finSplit[3]+","+ finSplit[4]+")"
       }
      }
      
      el.style.overflow = overflowBefore
      esto.animado = false
      if(callback && typeof callback === "function")
       callback.call(el,arguments)
      
      return el
    }
    for(;i <= frames;i++){
     animado = (prop.match(/color/i) || prop === "background" )? 
          setTimeout(color,tiempo/frames*i)
          :setTimeout(an,tiempo/frames*i)
    }
    setTimeout(end,tiempo)
  },
 //función de inicio
 init: function () {
  var esto = this,
   botonAct,
   slideactual = this.slideActual,
   boton;
  esto.lista = esto.contenedor.getElementsByTagName('ul')[0]
  esto.contenido = esto.lista.getElementsByTagName('li')
  esto.anchocontenido = esto.estilo(esto.contenido[0] , "width")
      
  esto.contenedor.style.overflow = "hidden"
  esto.contenido[slideactual].className+= " actual"
  
  if( esto.cambioAltura ){
   esto.contenedor.style.height = esto.estilo( esto.contenido[slideactual], "height" ) + 'px'
  }
  
  //Si ha sido configurada una slide distinta, mostrarla
  esto.lista.style.marginLeft = -esto.anchocontenido * (slideactual)+'px'
  
  //Si hemos elegido avance automático, configurar.
  //Si no, no lo definimos
  esto.timer = esto.tiempoTrans ? setTimeout(function(){
   esto.avanza.call(esto)
   }, esto.tiempoTrans): undefined    
  
  //Si la opción "autoNav" está definida, creamos el menú
  if( esto.autoNav  && esto.autoNav === true){
   esto.construyeAutoNav()
  }
  
  //agregamos los eventos a los botones
  esto.iniciarEventos()
  

 },
 //Inicio de los eventos
 iniciarEventos: function(){
  //En otros casos la copia de "esto" por "this" no era
  //necesaria, en este sí, ya que necesitaremos pasarlo
  //cuando hagamos click
  var esto = this,
  nav = esto.nav.getElementsByTagName('a'),
  i = 0,
  slideactual = esto.slideActual,
  boton,
  dataSlide
  
  //Añadimos la clase "activo" al primer botón
  for(; i < nav.length; i++){
   boton = nav[i];
   dataSlide = boton.getAttribute("data-slide") 
   if( dataSlide && dataSlide == ( slideactual+1 ) ){
    boton.className += " activo"
   }
  //Añadimos el evento al hacer click
    esto.evento(boton,'click',function(){
     
    if( esto.animado === true ) {return}
    //si hay cambio automático, paramos el cambio
    
    slideactual = esto.slideActual
    //si es el botón "siguiente", calculamos la slide actual
    if(this.getAttribute("data-dir") && this.getAttribute("data-dir") === "next"){
     esto.avanza();    
    //si es el botón "anterior", lo mismo
    }else if(this.getAttribute("data-dir") && this.getAttribute("data-dir") === "prev" ){
     //Si es la primera, ponemos la última
     
     if ( slideactual === 0 ){
      slideactual = esto.contenido.length-1
     //Si no, retrocedemos
     }else{
      slideactual -= 1
     }
    
    //Botones individuales
    }else if( this.getAttribute( "data-slide" ) ){
     slideactual = this.getAttribute("data-slide")-1
    }
    esto.irSlide(slideactual)
   });
  }
 },
 ir:function(i){
  return this.irSlide(i-1)
 },
 irSlide:function(i){
  var esto = this,
   timer = esto.timer,
   slideactual,
   nav = esto.nav.getElementsByTagName('a');

  if( esto.animado === true ) {return}
  
  slideactual = esto.slideActual = i
  
  timer && clearTimeout(esto.timer)

  //Borramos clases
  esto.borrarClase(esto.nav.getElementsByTagName("*"), "activo")
  esto.borrarClase(esto.contenido, "actual")
  
  //Añadimos
  for(var j=0;j < nav.length; j++){
   if((nav[j].getAttribute("data-slide")) && (nav[j].getAttribute("data-slide") == slideactual+1)){
    nav[j].className += " activo"
   }
  }
  esto.contenido[slideactual].className += " actual"
  
  //Animamos
  esto.animar( esto.lista, {marginLeft : -esto.anchocontenido * (slideactual)} , esto.tiempoAnim, esto.easing )
    
  //Si hemos determinado que se cambie la altura, lo hacemos
  if( esto.cambioAltura ){
      esto.animar( esto.contenedor, {height: esto.estilo( esto.contenido[slideactual], "height" )}, esto.tiempoAnim, esto.easing ) 
  }
  //Si tenemos avance auto, fijamos un "timeout"
  if( timer )
   esto.timer = setTimeout(function(){
    //Llamamos a la función desde el objeto (si no referiría a la ventana)
    esto.avanza.call(esto)
   }, esto.tiempoTrans)
 },
 //Función para avanzar
 avanza: function(){
  //Recuerda que "this" es el slider
  var esto = this,
   slide = esto.slideActual;

  if( slide === esto.contenido.length-1 ){
   slide = 0
  }else {
   slide += 1
  }

  esto.irSlide( slide )
 },
 //Función para construir un menú automático
 //Todos los links tendrán la clase "nav"
 //El link "prev" además tendrá la clase "prev"
 //El "next" también tendrá la clase "next"
 //Los individuales tendrán la clase "slide"
 construyeAutoNav: function(){
  var autoPrev,
   autoNext,
   clear = document.createElement('div'),
   esto = this,
   i = 0;
  
  //Div por si usamos float en los links
  //(lo más frecuente)
  clear.style.clear = "both"
  
  //Vaciamos el navegador
  esto.nav.innerHTML = ""

  //Botón "prev"
  autoPrev = document.createElement('a')
  autoPrev.className = "nav prev";
  autoPrev.setAttribute('data-dir','prev')
  autoPrev.innerHTML = esto.textoAnterior;

  esto.nav.appendChild(autoPrev)

  //Next      
  autoNext = document.createElement('a')
  autoNext.className = "nav next";
  autoNext.setAttribute('data-dir','next')
  autoNext.innerHTML = esto.textoSiguiente;
  
      
  //Por cada slide que hay, hacemos un botón
  for(;i < esto.contenido.length;i++){
   botonAct = document.createElement('a');
   botonAct.className = "nav slide";
   botonAct.setAttribute('data-slide',i+1);
   botonAct.innerHTML = i+1
   esto.nav.appendChild(botonAct)
  }
  
  //El botón "next" lo insertamos al final
  esto.nav.appendChild(autoNext)
  
  //Ponemos el clear
  esto.nav.appendChild(clear)
 }
}

Configuración

Podemos pasar tanto al slider como a la función una serie de opciones. Se usaría así:

Configuración del JSON

Todo está explicado en los comentarios:

var opcionesEntradas = {
    //El contenedor. Puede ser una ID, o un elemento
    contenedor:'idDelSlider',
    //Para asegurarnos de que el contenedor tiene una <ul>
    //Si esta función no va a ser usada para el slider (tiene muchos otros usos),
    //podría ser útil:true o false
    comprobarLista: true,
    //El tamaño de la imagen (si la hay): por defecto 120
    tamanoImagen:1600,
    //Si queremos que la imagen se muestre como etiqueta (true)
    //o sólo la URL(false)
    //Por defecto true
    tagImagen:false,
    //Imagen por defecto: False o una URL
    imagenPorDefecto:false,
    //La plantilla. Si tenéis un script así:
    //<script type="UnTipoQueNoExiste" id="plantilla-slider">
    //...Aquí vuestro HTML...
    //<\/script>
    //Usará ese HTML como plantilla, sustituyendo:
    //"{{img}}" => La imagen (tag o URL)
    //"{{link}}" => La URL de la entrada
    //"{{tit}}" => El título de la entrada
    //"{{fecha}}" => La fecha de publicación
    //"{{res}}" => El resumen de la entrada
    plantilla: document.getElementById('plantilla').innerHTML,
    //carácteres del resumen
    charsResumen: 50
}

Ejemplo de plantilla

Aquí tenéis un ejemplo de plantilla. Para usarla, tendríais que poner en plantilla: document.getElementById('IdDelScript').innerHTML.

<script type="plantilla-blog" id="plantilla">
     <li class="entrada" style="background:url({{img}}) no-repeat top left">
     <h2><a href="{{link}}" title="{{tit}}">{{tit}}</a></h2>
     <span class="fecha">{{fecha}}</span>
     <p>{{res}}</p>
     </li>
</script>

Configuración del slider


//FORMA 1 => Sólo el contenedor
var miSlider = new slider('IdDelContenedor')
miSlider.init()

//FORMA 2 => Objeto con opciones
//Todas las opciones son opcionales menos el contenedor
var miSlider2 = new slider({
    //Es la única obligatoria: ID o elemento(document.getElement....)
    contenedor: 'slider-entradas',
    //Si no se pone o no existe, se crea un div con id "slider-nav": ID o elemento
    nav:'IdDelNavegador',
    //Crear el navegador automáticamente: true o false
    autoNav: true,
    //Tiempo para que se avance automáticamente: milisegundos o false
    avanceAuto: 5000,
    //Slide por la que se empieza: de 1 a el número de slides
    slideInicial: 2,
    //Si queremos que la altura varíe: true o false
    cambioAltura: true,
    //El texto que aparecerá en el botón "anterior"
    //autoNav tiene que ser true
    textoAnterior: "Anterior",
    //Lo mismo pero para el botón de "siguiente"
    textoSiguiente: "Next"
})

miSlider2.init()

Nota: Tened en cuenta que las opciones de animación sólo estarán disponibles si habéis escogido esa versión

El CSS

El CSS lo podéis poner a vuestro gusto. Para animarlo ( sin la versión animada ), hace falta darle a la lista de vuestro slider una transición. Aquí os dejo un ejemplo. Podéis cambiar “slider-entradas” por la ID de vuestro slider:

/*Estilos del menú*/
#slider-nav{
    margin:10px auto;
    width:600px;
}
#slider-nav a{
    background:#f8f8f8;
    color:#aaa;
    display:block;
    float:left;
    padding:4px 7px;
    cursor:pointer;
    text-align:center;
    border:1px solid #ddd;
    border-right-width:0;
}
#slider-nav a:last-child{
    border-right-width:1px;
}
#slider-nav a.slide{
/*Estilos para los 
 * botones individuales */
}
#slider-nav a.activo{
    background:#fff;
    color:#aaa;
    -webkit-box-shadow:0 0 2px #333 inset;
       -moz-box-shadow:0 0 2px #333 inset;
            box-shadow:0 0 2px #333 inset;
}
#slider-nav a.prev{
    -webkit-border-radius:5px 0 0 5px;
       -moz-border-radius:5px 0 0 5px;
            border-radius:5px 0 0 5px;
}
#slider-nav a.next{
    -webkit-border-radius:0 5px 5px 0;
       -moz-border-radius:0 5px 5px 0;
            border-radius:0 5px 5px 0;
    border-right-width:1px;
}
/*Estilos del slider*/
#slider-entradas{
    width:600px;
    margin:0 auto;
    overflow:scroll;
    -webkit-box-shadow:0 0 7px #aaa;
       -moz-box-shadow:0 0 7px #aaa;
            box-shadow:0 0 7px #aaa;
    background:#eee;
    -webkit-border-radius:3px;
       -moz-border-radius:3px;
            border-radius:3px;
    border:1em solid #eee;
    -webkit-transition:2s;
       -moz-transition:2s;
         -o-transition:2s;
            transition:2s;
}
#slider-entradas ul{
    width:1000000px;
    list-style:none;
    margin:0;
    padding:0;
    -webkit-transition:2s;
       -moz-transition:2s;
         -o-transition:2s;
            transition:2s;
}
.entrada{
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    font-size:.8em;
    width:600px;
    float:left;
}
.entrada h2 a{
    color:#4f4f4f;
    font-weight:bold;
    font-size:1.15em;
}
.entrada.actual{
/* Algún estilo especial que queréis
 * que tenga la entrada actual?*/
}
.entrada img{
    float:left;
    padding:5px;
    background:white;
    -webkit-box-shadow:0 0 5px rgba(0,0,0,.5);
       -moz-box-shadow:0 0 5px rgba(0,0,0,.5);
            box-shadow:0 0 5px rgba(0,0,0,.5);
    margin:0 10px 10px 5px;
}
.entrada span.fecha{
    font-size:.9em;
    color:#555;
    border-bottom:1px dashed #666;
}

Nota: En las líneas resaltadas, cambiad 600 por el ancho de vuestro slider. Eliminad las transiciones si habéis escogido la versión animada.

Forma de uso

Descargar la versión del script que prefiráis, y cambiad la configuración de la primera función a vuestro gusto. Si necesitáis inspiración, podéis (es recomendable) ver las demos. Ahora sólo copiad esto debajo de vuestro slider y sustituid por vuestra URL y por vuestro número de entradas, y poned vuestra configuración:

<script src="url/de/tu/script/comprimido.js"></script>
<script>
var opcionesEntradas = {
    contenedor:'idDelSlider'
    //Configuración de las entradas
}
</script>
<script src="http://URLDETUBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&amp;max-results=NUMERODEENTRADAS&amp;order-by=published&amp;callback=imgtitulo"></script>
<script>
var miSlider = new slider({
    contenedor:'idDelSlider'
    //Configuración del slider
}).init()
</script>

Versiones:

Yo recomiendo la animada vía jS, pero si os interesa ahorrar espacio, os recomiendo la segunda.

Animada via JavaScript (10kb)

DescargaRecordad quitar las transiciones a vuestro CSS

Animada via CSS3 (7kb)

DescargaRecordad poner las transiciones a vuestro CSS


Por último recomiendo ver las demos, tienen el código indicado, y os pueden ser de utilidad.

30 pensamientos en “BloggerSlider

  1. Imagen de la hormiga de la base el dijo:

    Muy interesante lo del slider, pero no sabemos NADA de programación, y aunque sabemos que está explicado en la forma más sencilla posible, y nosotros sólo tendríamos que copiar y pegar códigos, ya que todo el trabajo de programación lo hiciste por nosotros, Ojalá nos puedas decir qué tenemos que leer para entender los tecnicismos que utilizas.
    Gracias por todo, acabas de resolvernos un problema que teníamos en nuestro blog http://lahormigadelabase.blogspot.mx/ aunque tenemos todavía otro problema, ya no tenemos toda la información encimada gracias a tu ayuda. Pondremos este como uno de los favoritos de nosotros. Saludos y gracias de nuevo.

    • Imagen de Emilio Cobos Álvarez el dijo:

      Sí, ahí tienes razón :S

      Sobre lo de tu problema estás contestado.

      Sobre lo del código:

      En las demos, está puesto el código que hay que usar.

      El script del slider (el que os podéis bajar de aquí), va encima de </head>

      El CSS va encima de </b:skin>.

      El HTML y el JAVASCRIPT va en un gadget HTML/Javascript, siempre el HTML primero, y el JAVASCRIPT después.

      Espero que os halla sido útil. Tenéis razón, me he pasado con los tecnicismos, pero es que como todo el código lo he hecho yo, pues tenía que explicarlo aquí para el que lo entienda :)

  2. Imagen de Carlos el dijo:

    amigo intente usar este slider en mi blg pero fracase :(, cabe destacar que no se nada de programacion, solo hice lo que pusiste en el comentario de arriba :/, cuando doy click en descargar solo se abre una pagina con unos codigos, debo usar jquery o algo asi ?. agradeceria tu ayuda. mi blog es http://www.dismotron.co.cc/

    • Imagen de Emilio Cobos Álvarez el dijo:

      Cuando pulsas el botón de descargar te sale el código que tienes que añadir. Puedes añadirlo al blog de dos maneras:
      1- Bajarte el script, alojarlo (recomiendo algo como http://www.dropbox.com ) , y poner en la plantilla <script type='text/javascript' src='URLDELARCHIVO'/>
      2- Copiar el contenido y pegarlo entre etiquetas script, así:
      <script type='text/javascript'>
      //<![CDATA[
      AQUÍ EL CÓDIGO
      //]]>
      </script>

    • Imagen de Carlos el dijo:

      Amigo, hice todo lo que dijiste y parecia ir todo bien .. pero surgio otro problema :/, cuando puse el gadget ( lo puse sobre las entradas ), no sale nada solo el espacio del gadget vacio, hice todo bien, creo.

      Subi el script a dropbox, coloque el contenido de la demo en su lugar pero no se que pasa..
      mi blog es este: http://www.dismotron.co.cc/ .

      de hecho nunca eh podido poner slider como este en mi blog, no se por que , lo eh intentado con muchos ..

    • Imagen de Emilio Cobos Álvarez el dijo:

      Para solucionar el problema que tienes pon encima de </b:skin>:
      #demo2 .entrada{padding:0}

      Otra cosa: creo que en el HTML has incrustado algo así como <div id='slider-nav'>

      Borra todo su contenido, ya que no tiene efecto y haces que los estilos no se hereden al menú que vale.

    • Imagen de Carlos el dijo:

      ok .. arregle un problema pero surgio otro . :/
      no se por que pero en html del demo 2 que fue el que escogi, al principio dice
      div id="demo1", asi que cambie ese 1 por un 2, y aparecio el slider,
      pero entonces aparecio con una pequeña desconfiguracion en el tamaño y eso, agrege lo que dijiste antes de b:skin, y tiene un pequeño problema con los titulos, que es dificil explicar
      seria mejor que los vieras por ti mismo :/ … disculpa si parezco fastidioso, por eso kiero aprender para no preguntar tanto xD …

      NOTA: No se si sea un error pero el HTML del Demo 2 dice demo 1 lo cambie y se arreglo uno de los problemas . xD

    • Imagen de Emilio Cobos Álvarez el dijo:

      Cierto, es un error mío :S tenía que poner demo2.

      Lo del tamaño son estilos que no tienen que ver con el menú, pero que están en tu plantilla, así hay que ver cuales son para "contrarrestarlos."

      Lo de los títulos es porque tienes 4 entradas y estás mostrando 8, así que debe de haber un problema con los posts repetidos.

      busca el script que tengas con '&amp;callback=imgtitulo' y pon 'max-results=4'.

  3. Imagen de JavierJavier el dijo:

    Hola Emilio. Primero de todo felicitarte por tu trabajo. Me ha gustado mucho el Demo1 para lo que estoy armando, pero me surge un fallo al visualizarlo en IE8. Da un error en el script en linea 8 caracter 7927.

    ¿podrías echarle un ojo? Aunque me gusta mucho más Chrome todavía son muchos los que utilizan IE y debo tenerlos en cuenta.

    Mil gracias

    • Imagen de Emilio Cobos Álvarez el dijo:

      Acabo de verlo con IE8 y parece funcionar bien. ¿Podrías poner una captura de en qué carácter te sale el error? Para estos casos normalmente lo que hago es poner la versión sin comprimir para ver en qué línea está, pero si no salta el error es imposible.

      De todas maneras, el archivo sin comprimir está aquí. No sé si es pedirte demasiado, pero podrías guardar el documento y probar con ese para ver la línea exacta de código.

      De todas maneras le echaré un ojo a ver si veo algo ;)

    • Imagen de JavierJavier el dijo:

      Hola Emilio. He bajado el archivo sin comprimir pero no me funciona. He cambiado el id en opcionesentradas por el mio pero nada. Supongo que en este sin comprimir hay que cambiar algo más o en el código insertado en la propia página. Lo que no entiendo es porque tu lo ves bien en IE8 sin errores y yo no. No es problema de mi página ya que también me produce ese error viendo la demo1 en tu propia página.

      Voy a seguir investigando, pero tu ayuda es bienvenida. Gracias

    • Imagen de JavierJavier el dijo:

      Hola de nuevo Emilio. Acabo de comprobar en firefox (ok) en safari(ok) en IE9 (ok) y finalmente en IE8 pero en otra maquina y es sigue dando el mismo problema. No llega ni a formarse la caja correctamente. Le falta el borde y el relleno gris, por si esto te aporta más datos.

      Ya es menos importante si se ve en los demás pero me pica la curiosidad de porque en IE8 hay este error.

    • Imagen de JavierJavier el dijo:

      Caracer 7927 y siguientes donde de produce el error de argumento no valido:

      a.contenedor.style.height=a.estilo(a.contenido[d],"height")+"px"}a.lista.style.marginLeft=-a.anchocontenido*d+"px";a.timer=a.tiempoTrans?setTimeout(function(){a.avanza.call(a)},a.tiempoTrans):b;if

      Veo tambien que IE6, IE7 e IE8 tenían bastantes problemas con CSS. Puede que influya. A ver si tienes suerte tu. Sigo

    • Imagen de Emilio Cobos Álvarez el dijo:

      Prueba ahora, debería de funcionar ;)

      En efecto, había un error. Era al calcular la altura. El resto de navegadores, que usan "getComputedStyle", devuelven, como su nombre indica, el valor computado. IE < 9, (usa "currentStyle") devuelve el especificado, que como era ninguno, devolvía "auto".

      Al devolver auto, y querer pasarlo a número, nos salía NaN (Not a Number). Al intentar especificar eso como la altura, nos daba un error de argumento no válido.

      Por suerte, hay otra forma de calcular alturas (offsetHeight menos márgenes y paddings), así que se pudo arreglar.

      Si sigue habiendo algún error, comenta aquí, porfa ;)

  4. Imagen de Bricio el dijo:

    hola amigo, tengo un problema que ojala me puedas auxiliar, si necesito que en el slider (demo 2) (que fue el que me agrado), se muestren unicamente las entradas con una etiqueta, yo tengo un blog de transmisiones, en el cual creo entradas para los canales, y tambien entradas para noticias, es este http://soccerclubmx.blogspot.mx/, me gustaria que en el slider, solamente se muestren las entradas con etiqueta especificada, es decir si creo una entrada con etiqueta "noticia" aparecera en el slider, de lo contrario que no aparesca, espero me puedas ayudar que ando medio revuelto en esto, de antemano muchas gracias por los sliders estan en verdad muy geniales, saludos!

  5. Imagen de Roger Almeida MartinezRoger Almeida Martinez el dijo:

    Hola, mira probé tu slider numero 2 en un blog de pruebas usando el feed de mi blog principal, pero en el caso de las imágenes, pues uso de un tamaño diminuto , y quisiera encontrar una forma de como configurar el tamaño que muestran estas, mi blog de pruebas es.

    http://utilesoft-stw.blogspot.com/

    Para que me des tu opinión de como solucionar este problema mío.

    Saludos :)

    • Imagen de Emilio Cobos Álvarez el dijo:

      Buenas, lo siento, pero ya no doy soporte a este script…

      Seguramente tenga algo que ver con el método que uso para calcular los anchos del slider… No obstante no te puedo asegurar nada, ya que ahora mismo no uso Windows y no puedo testearlo.

Responder a feliziano23 Cancelar respuesta

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

Puedes usar las siguientes etiquetas y atributos HTML:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre data-language=""> <ul> <ol> <li>
Para poner código usa <pre data-language="[lenguaje]"><code>[código]</code></pre>, y no olvides escapar el HTMl.