Cara Membuat Slider Otomatis Gambar Vertikal

Cara Membuat Slider Otomatis Gambar Vertikal
Cara Membuat Slider Otomatis Gambar Vertikal - Slider Feature atau yang sering kita pahami sebagai slideshow artikel adalah sebuah widget yang menampilkan thumbnail artikel secara slideshow dan di sertai dengan judul beserta sedikit deskripsi tentang artikel tersebut. jika kita lihat pada website-website portal berita seperti kompas.com dan antaranews.com, tentunya kita akan melihat slider artikel yang terletak pada homepage, karena selain untuk memberikan kesan minimalis dan simple, feature ini juga akan lebih "menonjolkan" sisi proffesionalitas pada blog kita, karena biasanya blog yang menggunakan slider pada homepage-nya adalah blog-blog yang rutin dan "rajin" update, seperti misalnya blog yang berisikan seputar berita aktual dan informasi terbaru.

Berbeda dengan slider yang ditampilkan oleh kompas.com dan antaranews.com, widget slider kali ini nantinya berbentuk vertikal atau memanjang, jadi widget ini akan lebih "cocok" jika diletakkan di sidebar blog anda, karena ukuranya tadi yang sudah saya terangkan yaitu memanjang, jadi lebih baik width atau lebarnya jangan ditambahkan terlalu banyak karena ini adalah slider vertikal, tapi semua keputusan itu ada di tangan anda, jika anda ingin memodifikasinya menjadi slider horizontal (seperti kompas.com) malah lebih baik (kreatif), tinggal disesuaikan dengan kebutuhan dan minat anda.

Bisa dilihat pada gambar diatas, gambar tersebut adalah contoh screenshot yang saya ambil dari salah satu blog kerabat saya maskolis yang mana pula slider ini adalah karya beliau, jika kita memperhatikan slider pada gambar diatas, rasanya widget ini sangat cocok sekali untuk berada di blog anda yang bertemakan minimalistic, tapi tergantung selera anda juga sih, hehe. Well, bagi anda yang berminat, Check itu Out!

1. Login ke Blogger.

2. Pilih Template.

3. Klik Edit HTML > Lanjutkan.

4. Centang box "Expand Template Widget".

5. Cari kode ]]></b:skin> (gunakan CTRL+F) lalu letakkan kode di berikut ini tepat diatasnya.

/* Slider */
.sompret-wrapper {float:right; position: relative;}
.sompret { overflow: hidden; position: relative; width:300px; height:450px;}
.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/AVvXsEiHW6cK-G3zJfLMKJsefFY-eZiGntR4sK3oTr5Gmr97U86dHUeHvv8lddqWRELoSn0fDbxtdxAgg47ZED5yW6H-pWYI0kM6PQwpREryH7GcVZVeHWn0fVEoala9Xf6v3d1ypH0Q_zpOvzI/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/AVvXsEjanm0jL81lwe4WQ1Qou8rHqzdbbB3D6_hJ5-rbiF2Zbpkfyx9FVGnT7nxCXWw6LFzNGOXpQ8HP1wx1fxqBWcbCDrdcy3xtXWYgUgI6oZr4670oMDbOmKOl3p6kpSlr-2JG1LwbOqXLxjc/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/AVvXsEgMWGmALOVFRR3B7C0kop6wDBl-_pbO-C1M-Fn3uVGpHLhiGGpfW_KF2L6ODMVddEBc-WC0wlhrfn1MRYcUe4jEWKH2W46vcPFr7SMZb-a5Ei19CXGDjNwTO5JENFyK8D64JXCq7UX1n4n6/s1600/uj-opacity-40.png);padding:5px 10px;  }
.crott a{color: #fff;font: 16px Oswald }
.crott p{color: #fff;font: 12px Arial;}

Keterangan:
  • Kode Merah : Lebar Slider artikel
  • Kode Biru : Tinggi Slider artikel
6. Masih di Edit HTML, cari kode </head>, lalu letakkan kode berikut ini tepat diatasnya.

<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/AVvXsEh6cNOCKLHMfS2uAcJMp9wjUD23AxDtqviPizeABYMhQhoGUhiVOBvfaxJNUE_BVMiM_d1XrQZaJ5FC9cUJ-OQQ8D6_dmATPXmZMowNm_QNbxY9yXAIbXo1xJXGlAhqbPYMnm4wIECLZ0A/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>

Keterangan:
  • Jika pada template anda sudah ada kode seperti yang bercetak tebal diatas, maka kode yang bercetak tebal diatas dihapus saja.
6. Terakhir, Cari kode <div id='sidebar-wrapper'>, lalu letakkan kode berikut ini tepat diatasnya.

<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>

Keterangan:  
  • Tampilan slider diatas ini hanya akan muncul pada halaman postingan atau artikel, bila anda menginginkanya untuk muncul pada homepage atau halaman awal, anda bisa menghapus kode yang berwarna biru pada kode diatas.
Untuk Live Demo dari slider yang barusan kita bahas, bisa anda lihat disini. Demikian tutorial blog tentang cara membuat slider otomatis gambar vertikal, semoga bermanfaat, dan selamat mencoba. Blogging Is My Addiction...

Share this

Related Posts

Previous
Next Post »