Cari di Blog ini

Nov 5, 2014

Simple Fast Automatic Blogspot Slider

Slider otomatis untuk blogspot yang sederhana serta cepat loadingnya ini merupakan hasil modifikasi dari pakar-pakar javascript, jquery dan css, pastinya slider ini dapat menghiasi blogspot menjadi lebih menarik lagi tanpa memberatkan laju blog Anda :D

SCREENSHOT


DEMO

Tempatkan script ini dimanapun yang Anda suka, maka dipastikan slider akan muncul, please try!!!

<!--:[SLIDER WRAPPER START ]:-->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<style type='text/css'>
#slider-wrapper{position:relative;width:620px;margin:0 -2px 20px;box-shadow:0 1em 2em -1em #000;}
.slider{overflow:hidden;position:relative;width:620px;height:300px;}
.slide-image{position:absolute;top:0;left:0;}
.slide-image img{overflow:hidden;float:left;width:620px;height:300px;}
.slide-page {background:linear-gradient(#444,#000);background:-webkit-linear-gradient(#444,#000);border-bottom:2px solid #000;padding:4px 0 2px;text-align:center;z-index: 100;}
.slide-page a{text-indent:-9999px;background:#f90;width:10px;height:10px;display:inline-block;margin:3px;border:none;outline:none;}
.slide-page a.active{background:#fff;border:none;outline:none;}
.slide-page a:hover{font-weight:700;border:none;outline:none;}
.slide-title{width:100%;display:none;position:absolute;bottom:0;left:0;z-index:101;background:rgba(0,0,0,.3);padding:5px 10px;}
.slide-title a{color:#fff;font-size:16px;font-weight:700}
.slide-title p{color:#fff;font-size:12px;}
</style>
<script type='text/javascript'>
// Simple Fast Automatic Blogspot Slider
// Original post by Maskolis 2013. See http://www.maskolis.com/2013/02/membuat-simple-slider-otomatis-gambar.html
//<![CDATA[
jQuery(document).ready(function() {

 //Set Default State of each portfolio piece
 $(".slide-page").show();
 $(".slide-page a:first").addClass("active");

 //Get size of images, how many there are, then determin the size of the image reel.
 var imageWidth = $(".slider").width();
 var imageSum = $(".slide-image img").size();
 var imageReelWidth = imageWidth * imageSum;

 //Adjust the image reel to its new size
 $(".slide-image").css({'width' : imageReelWidth});

 //Paging + Slider Function
 rotate = function(){
     var triggerID = $active.attr("rel") - 1; //Get number of times to slide
     var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

     $(".slide-page a").removeClass('active'); //Remove all active class
     $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
   
  $(".slide-title").stop(true,true).slideUp('slow');
 
  $(".slide-title").eq( $('.slide-page a.active').attr("rel") - 1 ).slideDown("slow");
 
     //Slider Animation
     $(".slide-image").animate({
         left: -image_reelPosition
     }, 500 );

 
 };

 //Rotation + Timing Event
 rotateSwitch = function(){
 $(".slide-title").eq( $('.slide-page a.active').attr("rel") - 1 ).slideDown("slow");
     play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
         $active = $('.slide-page a.active').next();
         if ( $active.length === 0) { //If paging reaches the end...
             $active = $('.slide-page a:first'); //go back to first
         }
         rotate(); //Trigger the paging and slider function
     }, 10000); //Timer speed in milliseconds (3 seconds)

 };

 rotateSwitch(); //Run function on launch

 //On Click
    $(".slide-page a").click(function() {  
        $active = $(this); //Activate the clicked paging
        //Reset Timer
        clearInterval(play); //Stop the rotation
        rotate(); //Trigger rotation immediately
        rotateSwitch(); // Resume rotation
        return false; //Prevent browser jump to link anchor
    });  

});

//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "http://3.bp.blogspot.com/-Hu7aB3FArtc/VDalFqdQRQI/AAAAAAAADlE/KA-IqSUFOEU/w620-h300-p/wave.gif";
showRandomImg = true;
aBold = true;
summaryPost1 = 100;
summaryTitle = 25;
numposts1 = 5;

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 showrecentposts1(json) {
 j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
 img  = new Array();
   
   for (var i = 0; i < numposts1; 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 = '<div class="slide-title"><a href="'+posturl+'">'+posttitle+'</a><p>'+removeHtmlTag(postcontent,summaryPost1)+'... </p></div>';    
  document.write(trtd);    
   
     j++;
 }

}

function showrecentposts2(json) {
 j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
 img  = new Array();
 
   for (var i = 0; i < numposts1 ; 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 = '<a href="'+posturl+'"><img src="'+img[i]+'"/></a>';
  document.write(trtd);    
   
     j++;
 }

}
 //]]>
</script>
<div id='slider-wrapper'>
<div class='slider'>
<div class='slide-image'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts2\&quot;&gt;&lt;\/script&gt;&quot;);
</script></div>
<div class='description'>
<script>        
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</div>
<div class='slide-page'>
<a href='#' rel='1'/>
<a href='#' rel='2'/>
<a href='#' rel='3'/>
<a href='#' rel='4'/>
<a href='#' rel='5'/>
</div>
</div>

</b:if>
<!--:[SLIDER WRAPPER END ]:-->

1 comment:

  1. tmena memang sangat siplle tapi sangat memakau gan , ijin sedot yah :)

    ReplyDelete

Copyright © Fauzi Blog