Kata Share | Mas Sehat | Ston SEO Responsif Blogger Template
» » » » » Membuat efek skitter slider di blog

Membuat efek skitter slider di blog

Animasi , CSS , Efeck Gambar , JQuery
Monday 2 June 2014
Belum ada komentar
Hay,.. sobat selamat berjumpa lagi dengan saya semoga anda tidak bosan yaa,.. hehehehee
Untuk postingan kali ini saya akan membahas tutorial tentang Membuat efek skitter slider 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 jelas nya sobat lihat DEMO dibawah ini :



Simak langkah2 dibawah ini:

1. Login ke akun blogger sobat
2. Klik Template » Edit HTML
3. Kemudian tekan Ctrl+F cari kode ]]></b:skin> atau </style>
4. Lalu tambahkan script CSS berikut ini tepat diatas 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/AVvXsEgVkBarwZIlsn3KX3UpCWlx7G8mwCwbwz3ML6OHjSXq6TXV9YUJ9EQAjuaZq20uQEpjDEbaTsvWLDtolT3wx7RdKvCGWnPyMRy8cCVxVC7Cf33xW44YSzMlOpEkVR6u2Z_12I9a7DxCv4M/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/AVvXsEjYKepRVoD5gwXJApojQqSUCXjdCZsGCz9Rdvr9ehsmNfsZKi6Ja6fPbdN_BBxl2nIpbqIbjh197iyFp_8btmdFIEpRN35jBtrlmBSpLJ3HQPTvijeEB8xisilWzenSEHf-89US6YkKJDY/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/AVvXsEifP4XIbjYYguGWCJssR5r2_2TxwW2K48eC7muLtRWkmmomppyxISAhs_bLTlt4UQp41rmjAQtz7h1kv5YzgZXh4ljiyAOvmS2ecWl-F_3MGzOaSaeE2PmcqS0RSaCYh5gDDYt1PsO0JHto/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/AVvXsEjH8AVotomsGXgob_vM0zKnKkoH4lly0heRJnw_LlNemqTC002WNxPrvtIYevsQnihlpKH6MJBVHCdHF5o8RUSjolm4sCLfw1KbScoVcpnns_mP-CXwORhTFxrBsHmRCSh2UYOwjOUmPy0/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/AVvXsEjdZWql9YR1NShyphenhyphensz0staep3qc8mfoHGbYR0UVgJ3AL84RV4Kg86wEP8BkR8GKWLPA4uZuPHl-F0hsKF1MIykiUZrrv3zo2UEucejGpUF0owdBGmAxPzvDfOf6gbqSSgkliEyDqyd7P6Vs/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/AVvXsEgp5CsBRlXMQHCW20FWSkWV7XtApKJ_q2-J4ijFiiYiGObeQtgGJBKNqhUQnaASf79vg3jFfRWslQpsBOxzsIojEOk9ThKox8e4GnyP3EW_NJmQLcEM4IgvHKzV4iywqTYaxOzjZOMHjrU/s400/play-button.png) no-repeat left top;
}

5. Tekan Ctrl+F cari kode </head> Lalu masukan 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>

Perhatikan kode JQuery yang saya block warna kuning diatas,  jika script tersebut sudah terpasang di template sobat. Tidak perlu dipasang lagi, jadi cukup kode yang di bawahnya ajah sobat copy.

Penerapannya:

Masukan kode HTML di bawah ini ke dalam postingan blog sobat atau bisa juga di dalam gadget HTML/Javascript
<div class="box_skitter box_skitter_large">
  <ul>
<li><a href="http://irvan-efendy.blogspot.com">
     <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCDdU13MY-EhOg8cX7NzawNScQ3LuAfRhXM5yJ3Eu_VZorxs1X82btgj_mZQysFcEbVkurLLvFDQWPQzKYMJEqkb_SQM5PyS4TekFjB3fsdh2n_5DXs0_GH7rDmvMjwuyzJhlrFzi433vp/s1600/mobil+classic.jpg" /></a>
<div class="label_text"><p>Tulis deskripsi dari gambar anda disini!!!</p></div></li>
<li><a href="http://irvan-efendy.blogspot.com">
     <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJGSu7j6_IUNi22Csj1dnGyRAb2N8HLsyvtKIQBbac0E01Zp4hXRr5qddUwmvGOOCcymh34Zbp4Wt-hqqE0TPPEaH2U9jplfPp1QSL36xcvHl09W7lrZA4_KrFZyrCdVo7i96kA1Kr55SI/s1600/mobil+classic_2.jpg" /></a>
<div class="label_text"><p>Tulis deskripsi dari gambar anda disini!!!</p></div></li>
<li><a href="http://irvan-efendy.blogspot.com">
     <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0BHbe0kBoYKW2hOQwEzJ_ir6uQQPdjIQWVRrCE6-Hc052997KtGvi09wjDR-GshOT6dNGatEPeF3YSwdxp8HSEBpo-w-gtmFSiI9ullzITGAPKWJ_-YZBNeTwkFBxIy492u7pzRtTa8E2/s1600/mobil+classic_3.jpg" /></a>
<div class="label_text"><p>Tulis deskripsi dari gambar anda disini!!!</p></div></li>
<li><a href="http://irvan-efendy.blogspot.com">
     <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUQ-LEmZ5G9W_xVOgJNgIcu7I2iV7al1TtT8YYBzweNhzLRoGEI5orV30a4PYLCjnLZ3QGnCMcnF1bIkizH9YnOBAwyb04VURnPG1BEY12F4Uvfo31d0vff3xzdZ-99BrAxiLa3xU1oWFN/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 yang berwarna Merah silahkan ganti dengan URL blog anda
  • Untuk kode yang berwarna Biru silahkan ganti dengan URL gambar ke sukaan anda
  • Untuk kode yang berwarna Kuning silahkan isi dengan deskripsi gambar anda

    Special thankz for you
Terima kasih telah membaca artikel tentang Membuat efek skitter slider di blog di blog blog sepot jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini diwebbroswer anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.

Artikel terbaru :

Kata Share | Mas Sehat | Ston SEO Responsif Blogger Template