Free File

Membuat Simple Slider Otomatis Gambar Vertikal

Membuat Simple Slider Otomatis Gambar Vertikal

1. Setelah login ke Blogger, pilih blog yang ingin ditambahkan slider ini.
2. Kemudian masuk ke Template >> Edit HTML (centang kotak expand widget templates)
3. Di back up atau disimpan dulu templatenya, jika sewaktu-waktu terjadi kesalahan bisa dikembalikan ke bentuk semula.
4. Klik "Buka" dan masukkan kode berikut di atas kode ]]></b:skin> :
   /* Slider */
   .sompret-wrapper {float:right; position: relative;}
   .sompret { overflow: hidden; position: relative; width:300px; height:400px;}
   .image_reel { position: absolute; top: 0; left: 0; }
   .image_reel img {overflow: hidden;float: left;width:300px; height:auto;}
   .paging {background:#878773; border:1px solid #676756;padding: 4px 0 2px; text-align: right;z-index: 100; }
   .paging a { text-indent:-9999px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQfIRbgl5bMv_gfikTBC93XQgQXkL6RX4M-o6wOU4QsNNI-Ofr12gLQXyKGiuEBvswaJDJuhMSQaaEu35diMBeCWF2gS0cSwnccd8no3bjT1wvVS7ts1_FtNGwjVeseKYsv9cC2ApADqM/s1600/slider_item.png) no-repeat center; width:10px; height:10px; display:inline-block;margin:3px; border:none; outline:none; }
   .paging a.active { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDq1XX6l_T3qd64cKUN26LpmNxz6-P8vQ3IOE0X4hsuiJ_QPSaih4UFegWaBs7NWcbja5e93Fb7ltNU9VtGn9jVheFuRUJ_eJe_aFpOUqvhTRSheWUjt3tIAL5rdahU2fCW3K0og91qkI/s1600/slider_item_active.png) no-repeat center; border:none; outline:none;}
   .paging a:hover {font-weight: bold; border:none; outline:none;}
   .crott { width:280px; display: none; position:absolute;bottom: 0; left: 0; z-index: 101; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLNWwm67V1G-kcw3PCMnjKXmtBgGhk3s7qWYzIck9ovMbtLKCXdt4El-xxryuiFUVmO0UwrgLkqaG89igJZ0TeqMRxSZvj5uiznWGGF4j4__4E26LjC-sHBIYgHnjNa0PArYn-oDO66qYr/s1600/uj-opacity-40.png);padding:5px 10px;  }
   .crott a{color: #fff;font: 16px Oswald }
   .crott p{color: #fff;font: 12px Arial;}
   Kode warna merah diatas adalah ukuran slider, untuk lebar 300px dan tinggi 400px. Perhatikan semua dan Anda harus sesuaikan dengan ukuran sidebar pada template yang Anda gunakan.
5. Masih di Edit HTML, masukkan kode script berikut ini diatas </head> :
   <script src=http://code.jquery.com/jquery-1.8.3.js type=text/javascript/>
   <script type=text/javascript>
   //<![CDATA[
   jQuery(document).ready(function() {
   
   //Set Default State of each portfolio piece
   $(".paging").show();
   $(".paging a:first").addClass("active");
   
   //Get size of images, how many there are, then determin the size of the image reel.
   var imageWidth = $(".sompret").width();
   var imageSum = $(".image_reel img").size();
   var imageReelWidth = imageWidth * imageSum;
   
   //Adjust the image reel to its new size
   $(".image_reel").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
   
       $(".paging a").removeClass(active); //Remove all active class
       $active.addClass(active); //Add active class (the $active is declared in the rotateSwitch function)
      
   $(".crott").stop(true,true).slideUp(slow);
   
   $(".crott").eq( $(.paging a.active).attr("rel") - 1 ).slideDown("slow");
   
       //Slider Animation
       $(".image_reel").animate({
           left: -image_reelPosition
       }, 500 );
   
   
   };
   
   //Rotation + Timing Event
   rotateSwitch = function(){
   $(".crott").eq( $(.paging a.active).attr("rel") - 1 ).slideDown("slow");
       play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
           $active = $(.paging a.active).next();
           if ( $active.length === 0) { //If paging reaches the end...
               $active = $(.paging 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
       $(".paging 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] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZbxfnQ63ay9YD2P3PfpZUR1ExcUdYqfrvPJ_ddW-6MaNak2BKa7f0fUJn3ZcoRZjPUhXJvXYpzMVdg48wPeAfQWb6DBwRg36mRwYHY1j8hBySovc4j5oAlZl4YilI4v2kQD2X6oywqik/s1600/no+image.jpg";
   showRandomImg = true;
   aBold = true;
   summaryPost1 = 80;
   summaryTitle = 20;
   numposts1 = 6;
   
   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 = "";
       
   

   Available link for download

   Posted by Unknown at 7:09 PM

   Email ThisBlogThis!Share to TwitterShare to FacebookShare to Pinterest

   Labels: gambar, membuat, otomatis, simple, slider, vertikal