Ads 728x90

» » Membuat Slider Responsive Keren Di blog
Dede Ubed 29 Mei 1 komentar Read
adscblog
Slider merupakan salah satu Feature yang menampilkan berbagi artikel baik itu melalui Post yang baru di publishkan atau juga bisa melalui artikel yang telah di tentukan (label) biasa nya Slider/Slideshow ini di pasang di bagian depan halaman blog saja tanpa ke halaman Postingan,Slider banyak Juga jenis nya atau pariasi nya dan anda juga dapat memilih SLider di blog ini dengan berbagai Jenis slider dan anda bisa menentukan pilihan Slider di blog infotrens ini


Slider ini banyak juga di pasang di bebagai blog,baik itu blog tutorial ataupun blog Berita,namun banyak Juga blog yang tidak suka di pasangi slider tersebut dengan berbagai alasan,dan bahkan google pun menyerukan untuk tidak memasang Slider di blog karena tidak ada guna nya nya sama sekali,namun bagi anda yang suka mempercantik blog nya,bisa anda coba untuk memasangan slider yang saya bagikan ini

Cara Pemasangan Slider Responsive di blog

Slider ini keren untuk di pasangan di blog,bahkan saya juga memasang slider ini di blog yang lain nya,hanya untuk pemanis blog saja tidak lebih,dan slider ini juga tidak berpengaruh terhadap loading page sehingga Slider ini layak di pasang di blog sobat blogger,namun itu kembali lagi kepada diri anda memasang atau tidak nya slider tersebut

Cara pemasangan Slider ini pun sangat lah gampang,karena anda hanya perlu untuk mengikuti langkah-langkah pemasangan di bawah ini,dan dengan begitu anda juga akan mendapatkan slider nya,untuk contoh nya anda dapat lihat disini Contoh Slider
Untuk pemasangan nya anda bisa ikuti langkah langkah di bawah

Tutorial Pemasangan Slider di blog

 Langkah langkah pemasangan Slider di blog
  • Silahkan untuk masuk ke blogger
  • Setelah itu silahkan anda klik Template yang berada di bagian kiri blogger kemudian Edit Html
  • Setelah itu silahkan anda letakan CSS berikut
#slider{
background: #336CA6;
float:left;
padding:0;
margin:0 0 15px 0;
position:relative;
overflow:hidden;
width:650px;
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:#336CA6;
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:#336CA6;
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}

  • Setelah itu silahkan anda cari Kode </head> untuk pencarian kode tersebut agar lebih mudah dan cepat ketemu,silahkan anda tekan Ctrl+F secara bersamaan kemudian letakan kode berikut tepat di atas kode </head> tersebut
 <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/AVvXsEh7VDmURZKH_-WJtkJDBB7W41P4mvhNa2RuVC0lJlfccfGnA0EOAkegqTjU0_jmgF3I1QJBwFEclR7p2bFvfLndQAhEAtBduK8ttRJ11mU7yodViQiszT-qfX2zbsLPiGAqvNiPqFNDz6E/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>
  • Kemudia setelah itu silahkan anda cari lagi kode <div id='main-wrapper'> lalu kemudian silahkan anda letakan kode berikut tepat di bawah nya,Dan anda harus ingat kode itu mungkin bisa saja tidak sama dengan template anda,jadi silahkan sesuaikan letak nya sesuai dengan yang anda harapkan
<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>
  • Kemudian Save Template
Keterangan
- Jika Slider nya ingin berjalan seperti pada contoh silahkan anda letakan jQuery berikut tepat di atas kode </head> dan save template
<script src='http://yourjavascript.com/24211643151/jquery.easing.js' type='text/javascript'/>
Nah itulah Cara pemasangan Slider Responsive keren di blog,semoga anda menyukai dengan Slider tersebut,dan selamat mencoba,semoga bermanfaat.
adscblog

Recommendation Apps
ads1
Posted by Dede Ubed, Published at 29 Mei and have 1 komentar
Dede Ubed

I manage this blog and post tutorials related to Blogger, SEO, Software Tools, Windows, CSS and Social Media. Did you find this blog helpful? Please socialize with us !!


Perlihatkan Semua Komentar Tutup Semua Komentar

1 komentar:

avatar
Pengiriman Via Cargo 17/12/21, 13.11
✖

Keren slidernya, thanks gan infonya

Balas

* Silahkan Berkomentar Tetapi Sopan
* Jangan Meninggalkan Spam atau terkait lain nya
* Jangan Promosi

Ads 728x90