Cara Pasang Featured Post Image Slider Otomatis untuk Blogger V2

Follow @romel_tea
Featured Post Image Slider Otomatis untuk Blogger V2 adalah widget Featured Post yang menampilkan posting unggulan, berdasarkan label tertentu, kategori khusus, bisa juga posting terbaru.

Ditampilkan di halaman depan blog. Cocoknya sih untuk blog berita atau blog bisnis. Blog pribadi juga boleh. Ini penampilannya:

Featured Post Image Slider Otomatis untuk Blogger V2

Berikut ini cara memasangnya di blog Anda.

Featured Post Image Slider Otomatis untuk Blogger V2

1. Di dashboard Blogger Anda, klik Tema > Edit HTML
2. Copas kode CSS & JavaScript Featured Post Image Slider berikut ini di atas kode </head>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
#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}</style>

<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]="http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/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>

</b:if>

Catatan: Kode warna merah (jQuery) gak usah ikutan jika sudah ada di template Anda.

3. Simpan kode HTML Featured Post Image Slider berikut ini di atas kode <div id='main-wrapper'> atau  <div class='main-outer'>

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

Catatan:
- Kode di atas menampilkan posting terbaru di Featured Post ini.
- Jika akan menampilkan posting berdasarkan label, ubah kode warna merah (/feeds/posts/default?) menjadi /feeds/posts/default/-/Label? atau /feeds/posts/default/-/Nama%20Label?
- Nama label, jika dua kata, pisahkan dengan %20, misalnta Tips%20SEO.

4. Save! Simpan Template.

Itu dia Cara Pasang Featured Post Image Slider Otomatis untuk Blogger V2. (blogromeltea.blogspot.com).*

Code Source

Thanks for reading Cara Pasang Featured Post Image Slider Otomatis untuk Blogger V2 | Tags:

Next Article
« Prev Post
Previous Article
Next Post »

Related Posts

Your Comments

No Spam, Please!