Posted by Aak
Aak-share.com Updated at: 2:08:00 PM

Cara Membuat Simple Slider Otomatis Thumbnail Vertikal

No comments:
Simple Slider Otomatis Thumbnail Vertikal - ini menampilkan tampilan yang sederhana, simpel slider otomatis  ini saya letakkan di sedebar sebelah kanan dengan width 350px. simpel slider ini berkerja secara otomatis berdasarkan artikel terbaru dan kategory tertentu.Slider Otomatis Thumbnail Vertikal - hampir sama dengan recent post menampilkan artikel terbaru, namun simpel slide otomatis ini menggunakan jQuery menampilkan tampilan slider yang simpel dan cantik.


Slider diatas bisa Anda modifikasi sendiri, dengan menyamakan ukuran pada template anda. Anda juga bisa gunakan slider ini untuk gambar horisontal (tidak harus vertikal) dan dapat merubah ukuran panjang dan lebar yang ada pada tutorial ini atau menambahkan hiasan ribbon sehingga tampilannya menjadi lebih menarik.

Jika anda ingin membuat tampilan slider pada blog anda yang simple dan SEO friendly, berikut ini adalah langkah-langkahnya :

Pertama anda harus membuka editor template anda, dan mencari kode </head>, anda masukkan kode script dibawah 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] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/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 = "";
     
     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="crott"><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>

Penjelasan :
Perhatikan kode script warna biru paling atas, jika pada template anda sudah terpasang script yang sama dengan seri berapapun, kode script diatas tidak usah diikutkan, hanya satu jquery yang ada pada sebuah template jika ada dua atau lebih akan bentrok dan salah satu fungsinya tidak jalan.


Seperti keteranngan diatas saya meletakkan slider di sedebar kanan paling atas, jika anda menginginkan hal yang sama anda cari kode <div id='sidebar-wrapper'>, kemudian letakkan kode berikut ini sebelum atau diatas <div id='sidebar-wrapper'>.


 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='sompret-wrapper'>
<div class='sompret'>
<div class='image_reel'>
<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='paging'>
<a href='#' rel='1'/>
<a href='#' rel='2'/>
<a href='#' rel='3'/>
<a href='#' rel='4'/>
<a href='#' rel='5'/>
<a href='#' rel='6'/>
</div>
</div></b:if>

Penjelasan :
Tampilan slider dengan menggunakan kode diatas hanya terlihat pada postingan, jika Anda ingin slider terlihat di homepage hapus kode pertama dan terakhir yang berwarna orange. Slider diatas menampilkan postingan terbaru Anda, jika ingin merubah menjadi tampil per label anda tinggal menambahkan kode /-/your label antara kode default dan ?, jadinya seperti ini default/-/your label?max-results ,kode tersebut diatas ada dua, maka anda perlu mengganti keduanya.

langkah berikutnya adalah penambahan kode CSS, anda cari kode  ]]></b:skin> dan letakkan sebelum kode  ]]></b:skin> tepatnya diatasnya :

 /* 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(http://3.bp.blogspot.com/-_RkTTrabRbs/UQWYmksVCYI/AAAAAAAABaU/3vvF1qFSAYI/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(http://4.bp.blogspot.com/-b9OEmVdL6Q4/URA_BL7OXWI/AAAAAAAAB2k/c9exOQaNu2U/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(http://4.bp.blogspot.com/-PpOJ-vHwxvc/T5mGXWpHVCI/AAAAAAAAAqQ/Y1VmLDvoeHI/s1600/uj-opacity-40.png);padding:5px 10px;  }
.crott a{color: #fff;font: 16px Oswald }
.crott p{color: #fff;font: 12px Arial;}

Keterangan :
Kode warna merah adalah ukuran slider, untuk lebar 300px dan tinggi 350px.
Anda sesuaikan dengan ukuran sidebar pada template yang anda gunakan.

dan kode warna biru adalah warna background bawah dan warna border.

Cukup sekian dulu ya sobat Blogger cara Cara Membuat Simple Slider Otomatis Thumbnail Vertikal, semoga bermanfaat!


Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments