Slide últimas postagens [007]

Yo! Yo! Yo bunnie's! Como estão hoje? Espero que bem. Hoje venho trazer um modelo de slide, com efeito roleta. Esse slide apresenta as últimas postagens do blog. Seu modelo aparece somente no inicio do blog. Os créditos pelo tutorial vão para o blog Templates e Acessórios. Fiz o teste em alguns layouts no qual o slide seria compatível, ele funcionou em todos disponibilizados pelo Blogger e outros responsivo não muito editados.

Brevia do efeito

1. Vá até o HTML do seu blog, clique dentro da área do código e ative a pesquisa selecionando Ctrl+F, agora pesquise por  ]]></b:skin>, assim que achar abaixo dele cole o código abaixo:

Códigos

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
<script type='text/javascript'>
//<![CDATA[
jQuery.easing['jswing']=jQuery.easing['swing'];jQuery.extend(jQuery.easing,{def:'easeOutQuad',swing:function(x,t,b,c,d){return jQuery.easing[jQuery.easing.def](x,t,b,c,d);},easeInQuad:function(x,t,b,c,d){return c*(t/=d)*t+ b;},easeOutQuad:function(x,t,b,c,d){return-c*(t/=d)*(t-2)+ b;},easeInOutQuad:function(x,t,b,c,d){if((t/=d/2)<1)return c/2*t*t+ b;return-c/2*((--t)*(t-2)- 1)+ b;},easeInCubic:function(x,t,b,c,d){return c*(t/=d)*t*t+ b;},easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+ 1)+ b;},easeInOutCubic:function(x,t,b,c,d){if((t/=d/2)<1)return c/2*t*t*t+ b;return c/2*((t-=2)*t*t+ 2)+ b;},easeInQuart:function(x,t,b,c,d){return c*(t/=d)*t*t*t+ b;},easeOutQuart:function(x,t,b,c,d){return-c*((t=t/d-1)*t*t*t- 1)+ b;},easeInOutQuart:function(x,t,b,c,d){if((t/=d/2)<1)return c/2*t*t*t*t+ b;return-c/2*((t-=2)*t*t*t- 2)+ b;},easeInQuint:function(x,t,b,c,d){return c*(t/=d)*t*t*t*t+ b;},easeOutQuint:function(x,t,b,c,d){return c*((t=t/d-1)*t*t*t*t+ 1)+ b;},easeInOutQuint:function(x,t,b,c,d){if((t/=d/2)<1)return c/2*t*t*t*t*t+ b;return c/2*((t-=2)*t*t*t*t+ 2)+ b;},easeInSine:function(x,t,b,c,d){return-c*Math.cos(t/d*(Math.PI/2))+ c+ b;},easeOutSine:function(x,t,b,c,d){return c*Math.sin(t/d*(Math.PI/2))+ b;},easeInOutSine:function(x,t,b,c,d){return-c/2*(Math.cos(Math.PI*t/d)- 1)+ b;},easeInExpo:function(x,t,b,c,d){return(t==0)?b:c*Math.pow(2,10*(t/d- 1))+ b;},easeOutExpo:function(x,t,b,c,d){return(t==d)?b+c:c*(-Math.pow(2,-10*t/d)+ 1)+ b;},easeInOutExpo:function(x,t,b,c,d){if(t==0)return b;if(t==d)return b+c;if((t/=d/2)<1)return c/2*Math.pow(2,10*(t- 1))+ b;return c/2*(-Math.pow(2,-10*--t)+ 2)+ b;},easeInCirc:function(x,t,b,c,d){return-c*(Math.sqrt(1-(t/=d)*t)- 1)+ b;},easeOutCirc:function(x,t,b,c,d){return c*Math.sqrt(1-(t=t/d-1)*t)+ b;},easeInOutCirc:function(x,t,b,c,d){if((t/=d/2)<1)return-c/2*(Math.sqrt(1- t*t)- 1)+ b;return c/2*(Math.sqrt(1-(t-=2)*t)+ 1)+ b;},easeInElastic:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d)==1)return b+c;if(!p)p=d*.3;if(a<Math.abs(c)){a=c;var s=p/4;}
else var s=p/(2*Math.PI)*Math.asin(c/a);return-(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+ b;},easeOutElastic:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d)==1)return b+c;if(!p)p=d*.3;if(a<Math.abs(c)){a=c;var s=p/4;}
else var s=p/(2*Math.PI)*Math.asin(c/a);return a*Math.pow(2,-10*t)*Math.sin((t*d-s)*(2*Math.PI)/p)+ c+ b;},easeInOutElastic:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d/2)==2)return b+c;if(!p)p=d*(.3*1.5);if(a<Math.abs(c)){a=c;var s=p/4;}
else var s=p/(2*Math.PI)*Math.asin(c/a);if(t<1)return-.5*(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+ b;return a*Math.pow(2,-10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p)*.5+ c+ b;},easeInBack:function(x,t,b,c,d,s){if(s==undefined)s=1.70158;return c*(t/=d)*t*((s+1)*t- s)+ b;},easeOutBack:function(x,t,b,c,d,s){if(s==undefined)s=1.70158;return c*((t=t/d-1)*t*((s+1)*t+ s)+ 1)+ b;},easeInOutBack:function(x,t,b,c,d,s){if(s==undefined)s=1.70158;if((t/=d/2)<1)return c/2*(t*t*(((s*=(1.525))+1)*t- s))+ b;return c/2*((t-=2)*t*(((s*=(1.525))+1)*t+ s)+ 2)+ b;},easeInBounce:function(x,t,b,c,d){return c- jQuery.easing.easeOutBounce(x,d-t,0,c,d)+ b;},easeOutBounce:function(x,t,b,c,d){if((t/=d)<(1/2.75)){return c*(7.5625*t*t)+ b;}else if(t<(2/2.75)){return c*(7.5625*(t-=(1.5/2.75))*t+.75)+ b;}else if(t<(2.5/2.75)){return c*(7.5625*(t-=(2.25/2.75))*t+.9375)+ b;}else{return c*(7.5625*(t-=(2.625/2.75))*t+.984375)+ b;}},easeInOutBounce:function(x,t,b,c,d){if(t<d/2)return jQuery.easing.easeInBounce(x,t*2,0,c,d)*.5+ b;return jQuery.easing.easeOutBounce(x,t*2-d,0,c,d)*.5+ c*.5+ b;}});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
(function($) {
var types = ['DOMMouseScroll', 'mousewheel'];
$.event.special.mousewheel = {
 setup: function() {
  if ( this.addEventListener )
   for ( var i=types.length; i; )
    this.addEventListener( types[--i], handler, false );
  else
   this.onmousewheel = handler;
 },
 teardown: function() {
  if ( this.removeEventListener )
   for ( var i=types.length; i; )
    this.removeEventListener( types[--i], handler, false );
  else
   this.onmousewheel = null;
 }
};
$.fn.extend({
 mousewheel: function(fn) {
  return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
 },
 unmousewheel: function(fn) {
  return this.unbind("mousewheel", fn);
 }
});

function handler(event) {
 var args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true;
 event = $.event.fix(event || window.event);
 event.type = "mousewheel";
 if ( event.wheelDelta ) delta = event.wheelDelta/120;
 if ( event.detail     ) delta = -event.detail/3;
 // Add events and delta to the front of the arguments
 args.unshift(event, delta);
 return $.event.handle.apply(this, args);
}
})(jQuery);
/**
 * @version  $Id:  $Revision
 * @package  jquery
 * @subpackage lofslidernews
 * @copyright Copyright (C) JAN 2010 LandOfCoder.com <@emai:landofcoder@gmail.com>. All rights reserved.
 * @website     http://landofcoder.com
 * @license  This plugin is dual-licensed under the GNU General Public License and the MIT License
 */
// JavaScript Document
(function($) {
  $.fn.lofJSidernews = function( settings ) {
   return this.each(function() {
   // get instance of the lofSiderNew.
   new  $.lofSidernews( this, settings );
  });
   }
  $.lofSidernews = function( obj, settings ){
  this.settings = {
   direction      : '',
   mainItemSelector    : 'li',
   navInnerSelector : 'ul',
   navSelector    : 'li' ,
   navigatorEvent  : 'click',
   wapperSelector:  '.slider-main-wapper',
   interval      : 4000,
   auto       : true, // whether to automatic play the slideshow
   maxItemDisplay   : 4,
   startItem   : 0,
   navPosition   : 'vertical',
   navigatorHeight  : 75,
   navigatorWidth  : 100,
   duration   : 600,
   navItemsSelector    : '.slider-navigator li',
   navOuterSelector    : '.slider-navigator-outer' ,
   isPreloaded   : true,
   easing    : 'easeOutBounce'
  }
  $.extend( this.settings, settings ||{} );
  this.nextNo         = null;
  this.previousNo     = null;
  this.maxWidth  = this.settings.mainWidth || 600;
  this.wrapper = $( obj ).find( this.settings.wapperSelector );
  this.slides = this.wrapper.find( this.settings.mainItemSelector );
  if( !this.wrapper.length || !this.slides.length ) return ;
  // set width of wapper
  if( this.settings.maxItemDisplay > this.slides.length ){
   this.settings.maxItemDisplay = this.slides.length;
  }
  this.currentNo      = isNaN(this.settings.startItem)||this.settings.startItem > this.slides.length?0:this.settings.startItem;
  this.navigatorOuter = $( obj ).find( this.settings.navOuterSelector );
  this.navigatorItems = $( obj ).find( this.settings.navItemsSelector ) ;
  this.navigatorInner = this.navigatorOuter.find( this.settings.navInnerSelector );
  if( this.settings.navPosition == 'horizontal' ){
   this.navigatorInner.width( this.slides.length * this.settings.navigatorWidth );
   this.navigatorOuter.width( this.settings.maxItemDisplay * this.settings.navigatorWidth );
   this.navigatorOuter.height( this.settings.navigatorHeight );
  } else {
   this.navigatorInner.height( this.slides.length * this.settings.navigatorHeight );
   this.navigatorOuter.height( this.settings.maxItemDisplay * this.settings.navigatorHeight );
   this.navigatorOuter.width( this.settings.navigatorWidth );
  }
  this.navigratorStep = this.__getPositionMode( this.settings.navPosition );
  this.directionMode = this.__getDirectionMode();

  if( this.settings.direction == 'opacity') {
   this.wrapper.addClass( 'slider-opacity' );
   $(this.slides).css('opacity',0).eq(this.currentNo).css('opacity',1);
  } else {
   this.wrapper.css({'left':'-'+this.currentNo*this.maxSize+'px', 'width':( this.maxWidth ) * this.slides.length } );
  }

  if( this.settings.isPreloaded ) {
   this.preLoadImage( this.onComplete );
  } else {
   this.onComplete();
  }
  }
     $.lofSidernews.fn =  $.lofSidernews.prototype;
     $.lofSidernews.fn.extend =  $.lofSidernews.extend = $.extend;
  $.lofSidernews.fn.extend({
   
  startUp:function( obj, wrapper ) {
   seft = this;
   this.navigatorItems.each( function(index, item ){
    $(item).click( function(){
     seft.jumping( index, true );
     seft.setNavActive( index, item );
    } );
    $(item).css( {'height': seft.settings.navigatorHeight, 'width':  seft.settings.navigatorWidth} );
   })
   this.registerWheelHandler( this.navigatorOuter, this );
   this.setNavActive(this.currentNo );
   if( this.settings.buttons && typeof (this.settings.buttons) == "object" ){
    this.registerButtonsControl( 'click', this.settings.buttons, this );
   }
   if( this.settings.auto )
   this.play( this.settings.interval,'next', true );
   return this;
  },
  onComplete:function(){
   setTimeout( function(){ $('.preload').fadeOut( 900 ); }, 400 ); this.startUp( );
  },
  preLoadImage:function(  callback ){
   var self = this;
   var images = this.wrapper.find( 'img' );
   var count = 0;
   images.each( function(index,image){
    if( !image.complete ){
     image.onload =function(){
      count++;
      if( count >= images.length ){
       self.onComplete();
      }
     }
     image.onerror =function(){
      count++;
      if( count >= images.length ){
       self.onComplete();
      }
     }
    }else {
     count++;
     if( count >= images.length ){
      self.onComplete();
     }
    }
   } );
  },
  navivationAnimate:function( currentIndex ) {
   if (currentIndex <= this.settings.startItem
    || currentIndex - this.settings.startItem >= this.settings.maxItemDisplay-1) {
     this.settings.startItem = currentIndex - this.settings.maxItemDisplay+2;
     if (this.settings.startItem < 0) this.settings.startItem = 0;
     if (this.settings.startItem >this.slides.length-this.settings.maxItemDisplay) {
      this.settings.startItem = this.slides.length-this.settings.maxItemDisplay;
     }
   }
   this.navigatorInner.stop().animate( eval('({'+this.navigratorStep[0]+':-'+this.settings.startItem*this.navigratorStep[1]+'})'),
            {duration:500, easing:'easeInOutQuad'} );
  },
  setNavActive:function( index, item ){
   if( (this.navigatorItems) ){
    this.navigatorItems.removeClass( 'active' );
    $(this.navigatorItems.get(index)).addClass( 'active' );
    this.navivationAnimate( this.currentNo );
   }
  },
  __getPositionMode:function( position ){
   if( position  == 'horizontal' ){
    return ['left', this.settings.navigatorWidth];
   }
   return ['top', this.settings.navigatorHeight];
  },
  __getDirectionMode:function(){
   switch( this.settings.direction ){
    case 'opacity': this.maxSize=0; return ['opacity','opacity'];
    default: this.maxSize=this.maxWidth; return ['left','width'];
   }
  },
  registerWheelHandler:function( element, obj ){
    element.bind('mousewheel', function(event, delta ) {
    var dir = delta > 0 ? 'Up' : 'Down',
     vel = Math.abs(delta);
    if( delta > 0 ){
     obj.previous( true );
    } else {
     obj.next( true );
    }
    return false;
   });
  },
  registerButtonsControl:function( eventHandler, objects, self ){
   for( var action in objects ){
    switch (action.toString() ){
     case 'next':
      objects[action].click( function() { self.next( true) } );
      break;
     case 'previous':
      objects[action].click( function() { self.previous( true) } );
      break;
    }
   }
   return this;
  },
  onProcessing:function( manual, start, end ){
   this.previousNo = this.currentNo + (this.currentNo>0 ? -1 : this.slides.length-1);
   this.nextNo  = this.currentNo + (this.currentNo < this.slides.length-1 ? 1 : 1- this.slides.length);
   return this;
  },
  finishFx:function( manual ){
   if( manual ) this.stop();
   if( manual && this.settings.auto ){
    this.play( this.settings.interval,'next', true );
   }
   this.setNavActive( this.currentNo );
  },
  getObjectDirection:function( start, end ){
   return eval("({'"+this.directionMode[0]+"':-"+(this.currentNo*start)+"})");
  },
  fxStart:function( index, obj, currentObj ){
    if( this.settings.direction == 'opacity' ) {
     $(this.slides).stop().animate({opacity:0}, {duration: this.settings.duration, easing:this.settings.easing} );
     $(this.slides).eq(index).stop().animate( {opacity:1}, {duration: this.settings.duration, easing:this.settings.easing} );
    }else {
     this.wrapper.stop().animate( obj, {duration: this.settings.duration, easing:this.settings.easing} );
    }
   return this;
  },
  jumping:function( no, manual ){
   this.stop();
   if( this.currentNo == no ) return;
    var obj = eval("({'"+this.directionMode[0]+"':-"+(this.maxSize*no)+"})");
   this.onProcessing( null, manual, 0, this.maxSize )
    .fxStart( no, obj, this )
    .finishFx( manual );
    this.currentNo  = no;
  },
  next:function( manual , item){
   this.currentNo += (this.currentNo < this.slides.length-1) ? 1 : (1 - this.slides.length);
   this.onProcessing( item, manual, 0, this.maxSize )
    .fxStart( this.currentNo, this.getObjectDirection(this.maxSize ), this )
    .finishFx( manual );
  },
  previous:function( manual, item ){
   this.currentNo += this.currentNo > 0 ? -1 : this.slides.length - 1;
   this.onProcessing( item, manual )
    .fxStart( this.currentNo, this.getObjectDirection(this.maxSize ), this )
    .finishFx( manual );
  },
  play:function( delay, direction, wait ){
   this.stop();
   if(!wait){ this[direction](false); }
   var self  = this;
   this.isRun = setTimeout(function() { self[direction](true); }, delay);
  },
  stop:function(){
   if (this.isRun == null) return;
   clearTimeout(this.isRun);
            this.isRun = null;
  }
 })
})(jQuery)
 //]]>
</script>
<script type='text/javascript'>
//<![CDATA[
imgr=new Array();
imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiDLCvuNiWjnIDisM8w2bhDvL0zg5m14QpEp6qN5usLYReFoSkeGQ5qAHscOwGNHKv7N3tmxTDFOm4InkHjpwiAWbG9f8R7eS6bKla6WyUiJyBYwi7vt6qg1C1SefgveF2LUZ62Gq98lA/s1600/no+image.jpg";
showRandomImg=true;
aBold=true;
summaryPost=150;
summaryPost1=20;
summaryTitle=15;
numposts=6;
numposts1=6;
numposts2=3;
numposts3=6;
numposts4=5;
numposts5=12;
function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}
function showrecentposts2(json){
j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;
img=new Array();
if(numposts1<=json.feed.entry.length){maxpost=numposts4}else{maxpost=json.feed.entry.length}for(var i=0;
i<maxpost;i++){var entry=json.feed.entry[i];
var posttitle=entry.title.$t;
var pcm;
var posturl;
if(i==json.feed.entry.length)break;
for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;
break}
}
for(var k=0;
k<entry.link.length;
k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];
break}}
if("content"in entry){var postcontent=entry.content.$t}
else
if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";
postdate=entry.published.$t;
if(j>imgr.length-1)j=0;img[i]="";
s=postcontent;
a=s.indexOf("<img");
b=s.indexOf("src=\"",a);
c=s.indexOf("\"",b+5);
d=s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){if(i==0){img[i]='<img width="295" height="180" class="alignone" src="'+d+'"/>'}else{img[i]='<img class="alignright" height="70" src="'+d+'" width="70"/>'}}var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day=postdate.split("-")[2].substring(0,2);
var m=postdate.split("-")[1];
var y=postdate.split("-")[0];
for(var u2=0;u2<month.length;
u2++){if(parseInt(m)==month[u2]){m=month2[u2];
break}}var daystr=day+' '+m+' '+y;
if(i==0){var trtd='<div class="mastoras_wide left"><div class="thumb"><a href="'+posturl+'">'+img[i]+'</a></div><div class="featuredPost lastPost"><h2 class="postTitle"><a href="'+posturl+'">'+posttitle+'</a></h2> <p>'+removeHtmlTag(postcontent,summaryPost)+'...</p><div class="clear"></div><span class="featuredPostMeta"><a href="'+posturl+'"></a></span></div></div><div class="mastoras_narrow right">';
         document.write(trtd)}if((i>0)&&(i<maxpost)){var trtd='<div class="mastoras_narrow"><div class="thumb"><a href="'+posturl+'">'+img[i]+'</a></div><div class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></div>'+removeHtmlTag(postcontent,summaryPost1)+'...<div class="clear"></div></div>';
document.write(trtd)}j++}document.write('</div>')}
function showrecentposts(json) {
 j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
 img  = new Array();
   for (var i = 0; i < numposts; i++) {
     var entry = json.feed.entry[i];
     var posttitle = entry.title.$t;
  var pcm;
     var posturl;
     if (i == json.feed.entry.length) break;
     for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'alternate') {
          posturl = entry.link[k].href;
          break;
        }
     }
  for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
          pcm = entry.link[k].title.split(" ")[0];
          break;
        }
     }
     if ("content" in entry) {
        var postcontent = entry.content.$t;}
     else
     if ("summary" in entry) {
        var postcontent = entry.summary.$t;}
     else var postcontent = "";
 
     postdate = entry.published.$t;
 if(j>imgr.length-1) j=0;
 img[i] = imgr[j];
 s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
 if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
 //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';

 var month = [1,2,3,4,5,6,7,8,9,10,11,12];
 var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
 var day = postdate.split("-")[2].substring(0,2);
 var m = postdate.split("-")[1];
 var y = postdate.split("-")[0];
 for(var u2=0;u2<month.length;u2++){
  if(parseInt(m)==month[u2]) {
   m = month2[u2] ; break;
  }
 }
 var daystr = day+ ' ' + m + ' ' + y ;
 var trtd = '<li style="position:relative;"><div class="imgauto"><a href="'+posturl+'"><img  src="'+img[i]+'"/></a></div><h3><a href="'+posturl+'">'+posttitle+'</a><p>'+removeHtmlTag(postcontent,summaryPost)+'... </p></h3></li>';
  document.write(trtd);  

     j++;
 }
}

function showrecentposts1(json) {
 j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
 img  = new Array();

   for (var i = 0; i < numposts; i++) {
     var entry = json.feed.entry[i];
     var posttitle = entry.title.$t;
  var pcm;
     var posturl;
     if (i == json.feed.entry.length) break;
     for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'alternate') {
          posturl = entry.link[k].href;
          break;
        }
     }
  for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
          pcm = entry.link[k].title.split(" ")[0];
          break;
        }
     }
     if ("content" in entry) {
        var postcontent = entry.content.$t;}
     else
     if ("summary" in entry) {
        var postcontent = entry.summary.$t;}
     else var postcontent = "";
 
     postdate = entry.published.$t;
 if(j>imgr.length-1) j=0;
 img[i] = imgr[j];
 s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
 if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
 //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';

 var month = [1,2,3,4,5,6,7,8,9,10,11,12];
 var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
 var day = postdate.split("-")[2].substring(0,2);
 var m = postdate.split("-")[1];
 var y = postdate.split("-")[0];
 for(var u2=0;u2<month.length;u2++){
  if(parseInt(m)==month[u2]) {
   m = month2[u2] ; break;
  }
 }
 var daystr = day+ ' ' + m + ' ' + y ;
 var trtd = '<li><div><img class="alignnone" src="'+img[i]+'"/></div></li>';
  document.write(trtd);  

     j++;
 }
}
function showrecentposts4(json) {
 j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
 img  = new Array();

   for (var i = 0; i < numposts; i++) {
     var entry = json.feed.entry[i];
     var posttitle = entry.title.$t;
  var pcm;
     var posturl;
     if (i == json.feed.entry.length) break;
     for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'alternate') {
          posturl = entry.link[k].href;
          break;
        }
     }
  for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
          pcm = entry.link[k].title.split(" ")[0];
          break;
        }
     }
     if ("content" in entry) {
        var postcontent = entry.content.$t;}
     else
     if ("summary" in entry) {
        var postcontent = entry.summary.$t;}
     else var postcontent = "";
 
     postdate = entry.published.$t;
 if(j>imgr.length-1) j=0;
 img[i] = imgr[j];
 s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
 if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
 //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';

 var month = [1,2,3,4,5,6,7,8,9,10,11,12];
 var month2 = ["January","February","March","April","May","June","July","August","September","October","November","December"];
 var day = postdate.split("-")[2].substring(0,2);
 var m = postdate.split("-")[1];
 var y = postdate.split("-")[0];
 for(var u2=0;u2<month.length;u2++){
  if(parseInt(m)==month[u2]) {
   m = month2[u2] ; break;
  }
 }
 var daystr = m+ ' ' + day + ' ' + y ;
 var trtd = '<a href="'+posturl+'"><span>&#187; </span>'+posttitle+'</a>';
  document.write(trtd);  

     j++;
 }
}
function showrecentposts7(json) {
 j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
 img  = new Array();
   for (var i = 0; i < numposts3; i++) {
     var entry = json.feed.entry[i];
     var posttitle = entry.title.$t;
  var pcm;
     var posturl;
     if (i == json.feed.entry.length) break;
     for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'alternate') {
          posturl = entry.link[k].href;
          break;
        }
     }
  for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
          pcm = entry.link[k].title.split(" ")[0];
          break;
        }
     }
     if ("content" in entry) {
        var postcontent = entry.content.$t;}
     else
     if ("summary" in entry) {
        var postcontent = entry.summary.$t;}
     else var postcontent = "";
 
     postdate = entry.published.$t;
 if(j>imgr.length-1) j=0;
 img[i] = imgr[j];
 s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
 if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
 //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';

 var month = [1,2,3,4,5,6,7,8,9,10,11,12];
 var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
 var day = postdate.split("-")[2].substring(0,2);
 var m = postdate.split("-")[1];
 var y = postdate.split("-")[0];
 for(var u2=0;u2<month.length;u2++){
  if(parseInt(m)==month[u2]) {
   m = month2[u2] ; break;
  }
 }
 var daystr = day+ ' ' + m + ' ' + y ;
 var trtd = '<li><a title=" '+posttitle+' " href="'+posturl+'"><img width="90" height="70"  title=" '+posttitle+' " class=" " src="'+img[i]+'"/></a></li>';
  document.write(trtd);  

     j++;
 }
}
//]]>
</script>

Salve!

2. Agora ainda dentro do HTML procure por <div id='main-wrapper'>  ou  <div class='main-outer'>, ao achar abaixo dele cole: 

Códigos

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='lof-main-wapper' id='slider'>
<div class='slider-main-outer'>
<ul class='slider-main-wapper'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</ul>
</div>
<div class='slider-navigator-outer'>
<ul class='slider-navigator'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</ul>
</div>
</div>
<script type='text/javascript'>
jQuery(document).ready(function($){
    $(&#39;#slider&#39;).lofJSidernews({
        interval:6000,
        duration:800,
        mainWidth:600,
        navigatorWidth:100,
        maxItemDisplay:4,
        easing:&#39;easeOutBounce&#39;,
        auto:true,
        isPreloaded: true
    });
});
</script>
</b:if>
</b:if>

3. Vamos aplicar o CSS, estilo agora.  Ainda dentro do HTML procure por  ]]></b:skin>, e acima dele cole:

Códigos

/* Slider
------------------------------------------------*/
#slider{
border: 15px solid #1F1C1B;
background: #808080;
float:left;
padding:0;
margin:0 0 15px 0;
position:relative;
overflow:hidden;
width:600px;
height:300px;
}
.slider-main-outer{
position:relative;
height:100%;
width:600px;
z-index:3;
overflow:hidden
}
ul.slider-main-wapper li h3{
z-index:10;
position:absolute;
top:-20px;
left:0;
height:100%;
width:180px;
background:#1F1C1B;
opacity:0.7;
filter:alpha(opacity = 70);
padding:10px;
}
ul.slider-main-wapper li h3 p{
color:#fff;
font:12px Arial;
line-height:16px;
padding-top:10px;
display:block;
margin:0
}
ul.slider-main-wapper li h3 a{
color:#fff;
font:17px Arial;
font-weight:700;
line-height:20px;
margin:0
}
ul.slider-main-wapper li .imgauto{
width:600px;
height:300px;
overflow:hidden;
margin:0;
padding:0
}
ul.slider-main-wapper{
height:300px;
width:600px;
position:absolute;
overflow:hidden;
margin:0;
padding:0
}
ul.slider-main-wapper li{
overflow:hidden;
list-style:none;
height:100%;
width:600px;
float:left;
margin:0;
padding:0
}
.slider-opacity li{
position:absolute;
top:0;
left:0;
float:inherit
}
ul.slider-main-wapper li img{
list-style:none;
width:600px;
height:auto;
padding:0
}
ul.slider-navigator{
top:0;
position:absolute;
width:100%;
margin:0;
padding:0
}
ul.slider-navigator li{
cursor:pointer;
list-style:none;
width:100%;
overflow:hidden;
margin:0;
padding:0
}
.slider-navigator-outer{
position:absolute;
right:0;
top:0;
z-index:10;
height:auto;
width:100px;
overflow:hidden;
color:#333
}
.slider-navigator li div{
background:#423836;
height:100%;
position:relative;
margin:0;
padding-right:5px;
}
.slider-navigator li:hover div{
background:#336CA6;
opacity:0.7;
filter:alpha(opacity = 70);
}
.slider-navigator li img{
border:#666 solid 1px;
border-top:1px solid #000;
border-left:1px solid #000;
height:63px;
width:88px;
float:left;
margin:5px 5px 0;
padding:0
}
.slider-navigator li.active img{
border:#000 solid 1px
}

Salve as aplicações e veja o resultado.