Slider Lofslidernews Otomatis

1. 
   
   Caranya, letakkan kode berikut di atas kode ]]></b:skin>
   

   /* Slide Content
   ----------------------------------------------- */
   .slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left;
   word-wrap: break-word; overflow: hidden;} 
   .slide {color: #666666;line-height: 1.3em;}
   .slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}
   .slide li {margin:0;padding-top:0;
   padding-right:0;padding-bottom:.25em;
   padding-left:0px;text-indent:0px;line-height:1.3em;}
   .slide .widget {margin:0px 0px 6px 0px;}

   
   
   Kemudian untuk memunculkannya pada layout (diatas blog post), anda harus memanggilnya. Cari kode <div id='main-wrapper'> kemudian letakkan kode berikut dibawahnya :

   <b:if cond='data:blog.url == data:blog.homepageUrl'>
         <div id='slide-wrapper'>
   <b:section class='slide' id='slide' preferred='yes'/>
         </div>
   </b:if> 

2. Save template dulu, sekarang masuk ke Layout/Tata Letak, Anda cek apa sudah terpasang satu kolom di atas Blog Post? Jika sudah ada, masuk lagi ke Edit HTML. Kemudian masukkan kode berikut di atas kode ]]></b:skin> :
3. /* Lofslidernews */
   #slider{background-color:#e2e2e2;background-image: -moz-linear-gradient(top,#f6f6f6 0,#e2e2e2 100%); background-image: -ms-linear-gradient(top,#f6f6f6 0,#e2e2e2 100%); background-image: -o-linear-gradient(top,#f6f6f6 0,#e2e2e2 100%); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#f6f6f6),color-stop(100%,#e2e2e2)); background-image: -webkit-linear-gradient(top,#f6f6f6 0,#e2e2e2 100%); background-image: linear-gradient(to bottom,#f6f6f6 0,#e2e2e2 100%);
   border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;border:1px solid #999;box-shadow:0 0 4px #888;-moz-box-shadow:0 0 4px #888;-webkit-box-shadow:0 0 4px #888;padding:10px;margin:4px;position:relative;overflow:hidden;width:600px;height:298px;}
   .slider-main-outer{position:relative;height:100%;width:400px;z-index:3;overflow:hidden}
   ul.slider-main-wapper li h3{z-index:10;position:absolute;bottom:-14px;width:385px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3dlUG9wLqsqJ6U8wq_UoY0sly4oAToFeva8dHxKzZ9ClVhyhk3s-7LDc-IRifsSeDYm_KAZnNuLcPKg_gtGY1_J4taY-Lyf68rqiLlANNxLHI2Wljdv2tXtUnd0jGLc5g-Vl23NNLFzfI/s1600/transparant.png);padding:10px}
   ul.slider-main-wapper li h3 p{color:#FFF;font-size:12px;padding-top:5px;display:block;margin:0}
   ul.slider-main-wapper li h3 a{color:#FFF;font-size:16px;line-height:25px;margin:0}
   ul.slider-main-wapper li .imgauto{width:405px;height:298px;overflow:hidden;margin:0;padding:0}
   ul.slider-main-wapper{height:298px;width:405px;position:absolute;overflow:hidden;margin:0;padding:0}
   ul.slider-main-wapper li{overflow:hidden;list-style:none;height:100%;width:405px;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:405px;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:10px;top:10px;z-index:10;height:300px;width:200px;overflow:hidden;color:#333}
   .slider-navigator li h5{color:#333;font:11px Arial;margin:0;padding:5px 10px 0 0}
   .slider-navigator li div{background-color:#e2e2e2;background-image: -moz-linear-gradient(top,#fff 0,#e2e2e2 100%); background-image: -ms-linear-gradient(top,#fff 0,#e2e2e2 100%); background-image: -o-linear-gradient(top,#fff 0,#e2e2e2 100%); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(100%,#e2e2e2)); background-image: -webkit-linear-gradient(top,#fff 0,#e2e2e2 100%); background-image: linear-gradient(to bottom,#fff 0,#e2e2e2 100%)color:#444;text-shadow:1px 1px 1px #fff;height:56px;position:relative;margin:0px 0px 3px 10px;padding:0 5px;border:1px solid #c0c0c0;}
   .slider-navigator li.active div,.slider-navigator li:hover div{color:#0178d3;border:1px solid #999}
   .slider-navigator li img{border:#ddd solid 1px;height:44px;width:60px;float:left;margin:5px 5px 5px 0}
   .slider-navigator li.active img{border:#eee solid 1px}
   .slider-navigator li.active h5{color:#0178d3}
   Perhatikan kode warna merah diatas, itu dalah ukuran panjang dan lebar slider, silahkan disesuaikan dengan ukuran pada template Anda. Pada demo yang saya gunakan panjang main-wrapper 630px tapi karena ada padding slider sebesar 10px, ukuran yang saya gunakan untuk slider hanya 600px.
   
   
4. Masih di Edit HTML, masukkan kode script berikut ini diatas </head> :
5. <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
   <script src='http://yourjavascript.com/24211643151/jquery.easing.js' type='text/javascript'/>
   <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         : 5,
               startItem            : 0,
               navPosition            : 'vertical',
               navigatorHeight        : 60,
               navigatorWidth        : 210,
               duration            : 600,
               navItemsSelector    : '.slider-navigator li',
               navOuterSelector    : '.slider-navigator-outer' ,
               isPreloaded            : true,
               easing                : 'easeInOutQuad'
           }   
           $.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/AVvXsEh-FFV08te1wbJWEum7zV7R-N2MrwXm7144fCxaVtvs-XcwUcAnkF_ySyYvVyUvqx-UferlMewnuBETZt7h9nIRZmaiRhDNCOGPOOn0suITzHpcRa-opJYqomGwIiUMltBkfF1xcIFyWqQ/s1600/no+image.jpg";
   showRandomImg = true;
   aBold = true;
   summaryPost = 70;
   summaryTitle = 20;
   
   numposts = 10;
   
   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 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 width="405" height="298" class=" " src="'+img[i]+'"/></a></div><h3><a href="'+posturl+'">'+posttitle+'</a><p>'+daystr+' / '+pcm+' comments</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 width="60" height="44" class="alignnone" src="'+img[i]+'"/><h5>'+posttitle+'</h5></div></li>';                   
           document.write(trtd);      
                  
                 j++;
       }
      
   }
   
    //]]>
   </script>
   Perhatikan kode script warna merah paling atas, jika pada template Anda sudah terpasang script itu seri berapapun, kode script itu tidak usah diikutkan. numposts:10; adalah jumlah post yang tampil pada slider
6. Save templates lagi, pemasangan kode-kode di Edit HTML selesai. Sekarang Anda kembali ke Layout/Tata Letak. Masukkan kode di bawah ini ke dalam kolom kosong diatas Blog Post yang sudah Anda buat pertama kali, klik Add a Gadget >> HTML/Javascript :

   <div class='lof-main-wapper' id='slider'>
   <div class='slider-main-outer'>
   <ul class='slider-main-wapper'>
   <script>                   
   document.write("<script src=\"/feeds/posts/default/-/misteri?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
   </script>
   </ul>
   </div>
   <div class='slider-navigator-outer'>
   <ul class='slider-navigator'>
   <script>                   
   document.write("<script src=\"/feeds/posts/default/-/misteri?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
   </script>
   </ul>
   </div>
   </div>
   <script type='text/javascript'>
   jQuery(document).ready(function($){   
       $('#slider').lofJSidernews({
           interval:6000,
           duration:800,
           mainWidth: 405,
           navigatorWidth: 200,
           maxItemDisplay:5,
           easing:'easeInOutQuad',
           auto:true,
           isPreloaded: false
       });
   });   
   </script>

   Keterangan :
   Tulisan warna merah (misteri) adalah label yang saya masukkan pada slider. Silahkan diganti dengan label yang ingin ditampilkan.
7. Terakhir save, selesai.

About Me