Ú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.