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/AVvXsEjSevhIugKZjLxgehjS7MkWCRyqcA4lNq8uuWixVrsJTiwTjy6cfJBPwsPYpGZKoVOCmOf1M0fZwj6ZnLz7aRrq7DHPNLCZ4KVqR8LOq0R98B2REigVQkn0G_Q5p6K0spW9Wljok9F5n3s/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/AVvXsEjRo-0SeptG3CLLc1oUtM5HG9wNYGeHzxNA9xv5G82TMYzJ9AY5uito5lkeQjw80QizYfJT1TXeQiTIs9P3nbZRQKbkY-AedS157RHiBVwVn1b-KW7SdixStvXWxo2pRHftYUyDn8qpXb0/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/AVvXsEgNStrbbCX-PJT6Bex5SrBzxsWAU2MelGJ4RbZsioeuxAQGGojDU5YMbXE-vRwxZOeP7Gk8TaW-wguEj3SEgqEXLAMD_t2ni8NNruxFuFalEy7SkroM7bD0rlpKjzH5KuprStEOYsXUkm3W/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/AVvXsEi4lUVZrrliNqGr3imivEdvE8B76FXyfNjMEWJXUtvAB32r4-y2kCh687rpRV12LktOByIzLv9kWMn5XURtVeOb2Td8ekoAZyUK846nXKA7S7Z6shg9aaSS-IWiy1p99UdnZaZFMPdUG-w/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/AVvXsEhs6Npn7gHD0KH4mr2JWPzycfrwVKyuy9sIkHaOo_5FiqUeN6XvBl4D4EE6o-I-Kdc4rUxMRYZLcKb-DCzJC081ib5xI7VQnm8pepy6dmF23wTzD3GosZQPbboxVrlv5GQqucsyfA99LkU/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/AVvXsEi918qwQmg7pUsa3fii6Grluz9fneShY8qW-8ZXK9U4PXrkX1AvZoPwbX2LQfFmkBnjmHDeLsLGGobe2uiv9OraFNcS9fmPWVI6RQ-U-pNWVjUlO_K-SNE_mmPE7F2z7BlMBrgz2YR53Vo/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/AVvXsEhKbE-Fm4_NjM_D5e-Jpv9HKUAe6K76X9FKfbIEmx7S-P8yjDnV7tKF5QqxgtTqAXNI_AQg83yQeRErb1n5GlKRbCSQD6WSP0FW6bTZRRmDfZ1TcoP2WQkRgLW-SDpCTY-r_FxsMeMoJJTS/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/AVvXsEiFSqQg7yru70PgAy6sLwExfgRaZYl0QxSHq4WeESnII5nYpCWYCS9iRmZscb0oAUMka8rkGnj8eslDWJgeJCm8kXHYjOMn-4BIWX-uLvQsOdUuLPpY4oEEcyiaCHwTDj1bMzS5WAe2gHqx/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/AVvXsEjpAzAnWhjVaFA2jNBFaqGZMN1azGTXkCYjm4xT7y_A6o91COr6kgQ9Of04lfZX5wywgM4lUl0r74KBsikogEeYmXN_-wh6purwM-ktWVWqONcr4Mewck5R29wVuFAUSNYM_yhyphenhyphenjTQAbrWQ/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/AVvXsEieb40Jy6kmIwub_orIHZPA_bELDQc_UYeVHN-_TQ3t73xW5SnLB7W8z_vJ_RqX0Rak-o9TWtERz0VWV0ImqRuC8-m0lqpLyireOiad5IjkewINv1vH3nlgfrY6o5Ija5SUrlKgG9_o4Rog/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
Welcome to my blog 😊
