Membuat Efek Skitter Slider di Blog ~ Blog Alvin Warasi

Hay,.. selamat berjumpa lagi dengan saya semoga Anda tidak bosan yaa,.. hehehee
Untuk postingan kali ini saya akan membahas tutorial tentang Membuat Efek Skitter di Blog, apa itu skitter slider,..?? Skitter Slider adalah plugin jQuery yang memungkinkan kita untuk mengkonversi atau memerintahkan daftar ke slide dengan animasi yang menarik.
Slide dapat menampilkan daftar slide sebagai angka atau thumbnail dan item dapat diakses dengan bantuan tombol-prev berikutnya juga. Lebih jelasnya Anda lihat DEMO di bawah ini:

cara membuat efek skitter slider di blog

DEMO Klik disini!!!

Simak langkah-langkah di bawah ini:

1. Login ke akun blogger Anda.
2. Klik Template Edit HTML
3. Kemudian tekan CTRL+F cari kode ]]></b:skin> atau </style>
4. Lalu tambahkan script css berikut ini tepat di atas kode ]]></b:skin> atau </style>

.box_skitter_large {
  margin: 0 auto;
  padding: 0;
}
.box_skitter {
  position:relative;
  width:800px;
  height:300px;
  background:#090909;
  border: 5px solid #EA7575
}
.box_skitter img {
  max-width:none;
}
.box_skitter ul {
  display:none;
}
.box_skitter .container_skitter {
  overflow:hidden;
  position:relative;
}
.box_skitter .image {
  overflow:hidden;
}
.box_skitter .image img {
  display:none;
}
.box_skitter .box_clone {
  position:absolute;
  top:0;
  left:0;
  width:100px;
  overflow:hidden;
  display:none;
  z-index:20;
}
.box_skitter .box_clone img {
  position:absolute;
  top:0;
  left:0;
  z-index:20;
}
.box_skitter .prev_button {
  position:absolute;
  top:50%;
  left:35px;
  z-index:100;
  width:42px;
  height:42px;
  overflow:hidden;
  text-indent:-9999em;
  margin-top:-25px;
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-PzXaGt3VJLjqImYLmnufNAkCcpubPxU3LnwSP0XyGOObBncJe7JzfQjI8grxopbWz5PBNMeuOqLnqh5KFITC6ei6wZrdrOeN044F7VubCRi-yM50Z-pt5D9kVqfQi25AQjYmvwH0bwk/s400/prev.png) no-repeat left top;
}
.box_skitter .next_button {
  position:absolute;
  top:50%;
  right:35px;
  z-index:100;
  width:42px;
  height:42px;
  overflow:hidden;
  text-indent:-9999em;
  margin-top:-25px;
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikfI6kEClYsJ4BJp5NQlvpC0nLD6L-p24tgiDnVVWRuUeAndy8_RCGIKQoYBfbPw6shvH2Y7IHlq_bqtdOQyZz-l2lZZzPRto_o83zYRCd-Rpj9eHm9TBjS5AofwjfqdiAMusZA2EWSMY/s400/next.png) no-repeat left top;
}
.box_skitter .info_slide {
  position:absolute;
  top:15px;
  left:15px;
  z-index:100;
  background: #000;
  color:#fff;
  font:bold 11px arial;
  padding:5px 0 5px 5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
  opacity:0.75;
}

.box_skitter .info_slide .image_number {
  background:#333;
  float:left;
  padding:2px 10px;
  margin:0 5px 0 0;
  cursor:pointer;
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
  border-radius:2px;
}
.box_skitter .info_slide .image_number_select {
  background:#cc0000;
  float:left;
  padding:2px 10px;
  margin:0 5px 0 0;
}
.box_skitter .container_thumbs {
  position:relative;
  overflow:hidden;
  height:50px;
}
.box_skitter .info_slide_thumb {
  height:50px;
  -moz-border-radius:0;
  -webkit-border-radius:0;
  border-radius:0;
  overflow:hidden;
  top:auto;
  top:0;
  left:0;
  padding:0 !important;
  opacity:1.0;
}
.box_skitter .info_slide_thumb .image_number {
  overflow:hidden;
  width:100px;
  height:50px;
  position:relative;
  margin:0 !important;
  padding:0 !important;
  -moz-border-radius:0 !important;
  -webkit-border-radius:0 !important;
  border-radius:0 !important;
}
.box_skitter .info_slide_thumb .image_number img {
  position:absolute;
  top:-30px;
  left:-30px;
  height:100px;
}
.box_skitter .box_scroll_thumbs {
  padding:0;
}
.box_skitter .box_scroll_thumbs .scroll_thumbs {
  position:absolute;
  bottom:60px;
  left:50px;
  background:#ccc;
  background:-moz-linear-gradient(-90deg,#555,#fff);
  background:-webkit-gradient(linear,left top,left bottom,from(#555),to(#fff));
  width:200px;
  height:10px;
  overflow:hidden;
  text-indent:-9999em;
  z-index:101;
  cursor:pointer;
  border:0 solid #333;
}
.box_skitter .info_slide_dots {
  position:absolute;
  bottom:-40px;
  z-index:151;
  padding:5px 0 5px 5px;
  -moz-border-radius:50px;
  -webkit-border-radius:50px;
  border-radius:50px;
}

.box_skitter .info_slide_dots .image_number {
  background:#333;
  float:left;
  margin:0 5px 0 0;
  cursor:pointer;
  -moz-border-radius:50px;
  -webkit-border-radius:50px;
  border-radius:50px;
  width:18px;
  height:18px;
  text-indent:-9999em;
  overflow:hidden;
}
.box_skitter .info_slide_dots .image_number_select {
  background:#cc0000;
  float:left;
  margin:0 5px 0 0;
}
.loading {
  position:absolute;
  top:50%;
  right:50%;
  z-index:10000;
  margin:-16px -16px;
  color:#fff;
  text-indent:-9999em;
  overflow:hidden;
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidE2pDf27zzltG9Tu8CcTYoySCR7VTcKkPdCM4fXBNSaVG_7f8WMHaifzu-ROUth3HTuQ4aoYV1oDg7Cr9k4-l19L8Ascp-v6VASOn5f0X4iY05n6Sw61XMuUN_l-lSmCbh2qwIBTSVYb-/s1600/BIE_Loading3.gif) no-repeat left top;
  width:48px;
  height:41px;
}
.box_skitter .label_skitter {
  z-index:150;
  position:absolute;
  bottom:0;
  left:0;
  display:none;
}
.box_skitter .label_skitter {
  z-index:150;
  position:absolute;
  bottom:0;
  left:0;
  color:#fff;
  display:none;
  opacity:0.8;
  background:#000;
}
.box_skitter .label_skitter p {
  padding:5px 10px;
  margin:0;
  font:normal 13px/20px Arial,tahoma;
  letter-spacing:0;
  text-align: left
}
.box_skitter .label_skitter p a, .box_skitter .label_skitter p a:visited {
  color: #09f;
  text-decoration: underline
}
.box_skitter .info_slide* {
  font-family:Consolas,arial,tahoma !important;
}
.box_skitter .progressbar {
  background: #F5B8B8;
  position:absolute;
  top:5px;
  left:15px;
  height:5px;
  width:200px;
  z-index:99;
  border-radius:20px;
}
.box_skitter .preview_slide {
  display:none;
  position:absolute;
  z-index:152;
  bottom:30px;
  left:-40px;
  width:100px;
  height:100px;
  background:#fff;
  border:1px solid #222;
  -moz-box-shadow:rgba(0,0,0,0.7) 2px 2px 5px;
  -webkit-box-shadow:rgba(0,0,0,0.7) 2px 2px 5px;
  box-shadow:rgba(0,0,0,0.7) 2px 2px 5px;
  overflow:hidden;
}
.box_skitter .preview_slide ul {
  height:100px;
  overflow:hidden;
  margin:0;
  list-style:none;
  display:block;
  position:absolute;
  top:0;
  left:0;
}
.box_skitter .preview_slide ul li {
  width:100px;
  height:100px;
  overflow:hidden;
  float:left;
  margin:0;
  padding:0;
  position:relative;
  display:block;
}
.box_skitter .preview_slide ul li img {
  position:absolute;
  top:0;
  left:0;
  height:150px;
  width:auto;
}
#overlay_skitter {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  z-index:9998;
  opacity:1;
  background:#000;
}
.box_skitter .focus_button {
  position:absolute;
  top:50%;
  z-index:100;
  width:42px;
  height:42px;
  overflow:hidden;
  text-indent:-9999em;
  margin-top:-25px;
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ0WWyhJT-05RVIejt-FAJDJNc2nOSMbHAJ51WSLX5KZ6jvaxZwSJe7wNvPBsbu0Dg9ip-GAoZmGy2Tj1gq42_lrge4xnakIe-7upfmZYSqSfCMIvpm28HVnm8krXGIWgLD_8L3MK_ZN4/s400/focus-button.png) no-repeat left top;
  opacity:0;
}
.box_skitter .play_pause_button {
  position:absolute;
  top:50%;
  z-index:151;
  width:42px;
  height:42px;
  overflow:hidden;
  text-indent:-9999em;
  margin-top:-25px;
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpF8JAF9gesAlB-y3piYmytrTE6eB7npbbh3Txi0ZlMSkEYvZ-g-ZIaluCLoZ9L_yvvRPP7bKHcToU3VhkDixfsraK4ZCvxIIvOi4SDAL_Jol8m4Sn-SX5RQd-ieQTFSXY1LpJDbb9ujc/s400/pause-button.png) no-repeat left top;
  opacity:0;
}
.box_skitter .play_pause_button.play_button {
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj39ysJhyphenhyphenKicoCpK1rMqiKFBDpUEfv90QNJwjEgjFrOSxrqROT3g7YXIkDDgqPKw0fEHfoUoj9E-aWoDU7IdG5FghRqhvqpWJespY4Dj3D2fz1Gofpg5UMgWX77hEpoDrGvXOqb7ShYq2Y/s400/play-button.png) no-repeat left top;
}

5. Tekan CTRL+F cari kode </head> lalu masukkan script di bawah ini tepat di atas kode </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src='http://sites.google.com/site/vanzdy/script/skitter.min.js'></script>
<script src='http://sites.google.com/site/vanzdy/script/jquery.easing.1.3.js'></script>
<script src='http://sites.google.com/site/vanzdy/script/jquery.animate-colors-min.js'></script>
<script type='text/javascript'>
       $(function(){
       $('.box_skitter_large').skitter({
          animation : 'random', // Animasi berjalan secara Acak
          controls  : true, // Tombol Kontrol play pause
          controls_position : 'rightBottom', // Posisi Tombol Kontrol play pause
          numbers_align  : 'right', // Posisi nomor urut slider
          hideTools  : true, // Saat kursor meninggalkan area slider maka tombol - tombolnya akan bersembunyi
          focus   : true, // Menampilkan Tombol fokus
          progressbar  : true, // Efek animasi warna memanjang sebagai tanda waktu slider berjalan
          enable_navigation_keys: true // Slidernya juga bisa di gerakan dengan tombol arah panah komputer
      });
   });
</script>

Perhatian kode jQuery yang saya tulis warna merah di atas, jika script tersebut sudah terpasang di template Anda. Tidak perlu dipasang lagi, jadi cukup kode yang di bawahnya aja Anda copy.

Penerapannya :

Masukkan kode HTML di bawah ini kedalam postingan blog Anda atau bisa juga di dalam gadget HTML/JavaScript.

<div class="box_skitter box_skitter_large">
  <ul>
<li><a href="http://the-warasi.blogspot.com">
     <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt-c0bT1edDhenj1zCg6pzK3rkBGtdUMYi6St3oMAjgFCCJBCneanriyu59ZWPLikNCjuCbeBTdWFXHJlHOLonfp4gpTJ1d3Yrgun7JFe3aITFeGYpYoo77UGyjiexwohGruKMrDnmH3Fi/s1600/mobil+classic.jpg" /></a>
<div class="label_text"><p>Tulis deskripsi dari gambar anda disini!!!</p></div></li>
<li><a href="http://the-warasi.blogspot.com">
     <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0rCJI4QGo51ay4Xwns656N5rNlh3XE61vto5bGEOB0jEUm0xuy61QP8xUgZkYgzEf7bfd808dpGFFDputHQoxWeKzuGDlafCxNWyx4AXzrDgCxeIf2BXkUUh6xyiMLXjpzjVNuIDp9tEH/s1600/mobil+classic_2.jpg" /></a>
<div class="label_text"><p>Tulis deskripsi dari gambar anda disini!!!</p></div></li>
<li><a href="http://the-warasi.blogspot.com">
     <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioSWZHvjpb8S4e8wgkfd9WtIbQKcidZAXLmP9aNBPrkH8ymY4_em_oaCa1VcKmhX9RTbjcaysgUmtMJngajTzK-voqRSB10KOIKLiJZAwy9uU_HsP-_v8p3vCLZ70JDtp8viSSzVlAMhxw/s1600/mobil+classic_3.jpg" /></a>
<div class="label_text"><p>Tulis deskripsi dari gambar anda disini!!!</p></div></li>
<li><a href="http://the-warasi.blogspot.com">
     <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEheDxjFYikJrQM2YIdLxd84dgVXt72H-qyLVg3LQ2oQHzjuyYGjaYg9y8Flog0nQCKeMOJwrfDEjh-qIn-bcoK90zUE5jfpFoE6bPgw-vus-bYMINyz9b20jBEsUGemzjyCF9uNZxdfhj/s1600/mobil+classic_4.jpg" /></a>
<div class="label_text"><p>Tulis deskripsi dari gambar anda disini!!!</p></div></li>
   </ul>
</div>

Note :
Untuk kode URL http://the-warasi.blogspot.com silahkan ganti dengan URL blog Anda.
Untuk kode URL gambar silahkan ganti dengan URL gambar kesukaan Anda, dan
Untuk kode deskripsi gambar silahkan Anda ganti dengan deskripsi gambar Anda

Selamat mencoba, semoga berhasil,..

Advertise

Contact Me

300x250

Advertise

Contact Me

300x250

0 Comments

Silakan Tinggalkan Komentar Anda!
Saya sangat menghargai atas pertanyaan dan komentar Anda, berkomentarlah dengan baik dan sopan.
Dilarang menyertakan link aktif, iklan, atau titip link...
Terima Kasih Sudah Berkomentar..

Konversi KodeTutup Konverter!ForumEmoticon

Terima kasih telah berkomentar