Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Cara Modifikasi Skitter Slideshow Pada Blog

jQuery Skitter Slideshow Cara Modifikasi Skitter Slideshow Pada Blog – setelah pada artikel sebelumnya membahas tema yang sama yakni mengenai jQuery Skitter Slideshow, maka pada tutorial ini untuk melanjutkan dan melengkapi artikel tersebut juga akan kembali membahas untuk customisasi slider blog dengan menggunakan jQuery Skitter Slideshow. Dengan menggunakan jQuery Skitter Slideshow sangat memungkinkan kita dalam mendesain untuk mempercantik blog terutama pada fitur slider dengan menambahkan efek animasi yang fantastis. Jika pada artikel sebelumnya yakni artikel yang berjudul Cara Memasang Skitter Slideshow di Blog hanya terdiri dari +22 efek animasi slider, maka kini ada penambahan yakni menjadi 36 type efek animasi dan terdapat 4 theme yang berbeda serta penambahan progress bar dan preview image number. Dari banyaknya type efek animasi dan theme ini dapat memungkinkan kita untuk lebih leluasa memilih diantaranya agar sesuai dengan selera yang kita inginkan. Untuk penjelasan lebih detailnya, berikut tutorial Cara Modifikasi Skitter Slideshow Pada Blog.

1. Login akun blogger.
2. Masuk ke Tata Letak kemudian Tambahkan Widget HTML/Javascript.
3. Copy kode berikut ini, lalu paste kedalam Widget HTML/Javascript kemudian Simpan.
<style type="text/css">
.slideshow_skitter{position:relative;width:900px;height:300px;background:#000; margin:0 auto;}
.slideshow_skitter img {width:900px; height:300px;}
.slideshow_skitter img{max-width:none}
.slideshow_skitter .container_skitter{overflow:hidden;position:relative}
.slideshow_skitter .image{overflow:hidden}
.slideshow_skitter .slideshow_clone{position:absolute;top:0;left:0;width:100px;overflow:hidden;display:none;z-index:20}
.slideshow_skitter .slideshow_clone img{position:absolute;top:0;left:0;z-index:20}
.slideshow_skitter .prev_button{position:absolute;top:50%;left:0px;z-index:152;overflow:hidden;text-indent:-9999em;margin-top:-25px;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s;background-position:-42px -42px;width:42px;height:42px}
.slideshow_skitter .next_button{position:absolute;top:50%;right:0px;z-index:152;overflow:hidden;text-indent:-9999em;margin-top:-25px;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s;background-position:0 -42px;width:42px;height:42px}
.slideshow_skitter .info_slide{position:absolute;top:15px;left:15px;z-index:100;background:#000;color:#fff;font:bold 11px arial;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;opacity:0.75;padding:5px 0 5px 5px}
.slideshow_skitter .info_slide .image_number{background:#333;float:left;cursor:pointer;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s;margin:0 5px 0 0;padding:2px 10px}
.slideshow_skitter .info_slide .image_number_select,.slideshow_skitter .info_slide .image_number_select:hover{background:#c33;float:left;margin:0 5px 0 0;padding:2px 10px}
.slideshow_skitter .container_thumbs{position:relative;overflow:hidden;height:50px}
.slideshow_skitter .info_slide_thumb{height:50px;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;overflow:hidden;top:0;left:0;opacity:1.0;padding:0!important}
.slideshow_skitter .info_slide_thumb .image_number{overflow:hidden;width:100px;height:50px;position:relative;-moz-border-radius:0!important;-webkit-border-radius:0!important;border-radius:0!important;margin:0!important;padding:0!important}
.slideshow_skitter .info_slide_thumb .image_number img{position:absolute;top:-30px;left:-30px;height:100px}
.slideshow_skitter .slideshow_scroll_thumbs{padding:0}
.slideshow_skitter .slideshow_scroll_thumbs .scroll_thumbs{position:absolute;bottom:60px;left:50px;background:0 to(#fff));width:200px;height:10px;overflow:hidden;text-indent:-9999em;z-index:101;cursor:pointer;border:0 solid #333}
.slideshow_skitter .info_slide_dots{position:absolute;bottom:10px;background:rgba(255,255,255,0.8);box-shadow:rgba(0,0,0,0.3) 1px 1px 0;z-index:151;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;padding:5px 0 5px 5px}
.slideshow_skitter .info_slide_dots .image_number{background:#333;float:left;cursor:pointer;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;width:18px;height:18px;text-indent:-9999em;overflow:hidden;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s;margin:0 5px 0 0}
.slideshow_skitter .info_slide_dots .image_number_select,.slideshow_skitter .info_slide_dots .image_number_select:hover{background:#c33;float:left;margin:0 5px 0 0}
.loading{position:absolute;top:50%;right:50%;z-index:10000;color:#fff;text-indent:-9999em;overflow:hidden;background:url(https://lh3.googleusercontent.com/-FADj8mKOTRc/UnLivRf3N7I/AAAAAAAAGdE/KTHuOzxjxF4/h120/ajax-loader.gif) no-repeat left top;width:32px;height:32px;margin:-16px}
.slideshow_skitter .label_skitter{text-transform:uppercase;z-index:150;position:absolute;bottom:0;left:0;color:#fff;display:none;opacity:0.8;background:#000}
.slideshow_skitter .label_skitter p{font:normal 22px arial,tahoma;letter-spacing:-1px;margin:0;padding:10px}
.slideshow_skitter .progressbar{background:#000;position:absolute;top:5px;left:15px;height:5px;width:200px;z-index:99;border-radius:20px}
.slideshow_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}
.slideshow_skitter .preview_slide ul{height:100px!important;overflow:hidden!important;list-style:none!important;display:block!important;position:absolute!important;top:0;left:0;margin:0!important}
.slideshow_skitter .preview_slide ul li{width:100px!important;height:100px!important;overflow:hidden!important;float:left!important;position:relative!important;display:block!important;margin:0!important;padding:0!important}
.slideshow_skitter .preview_slide ul li img{position:absolute!important;top:0!important;left:0!important;height:150px!important;width:auto!important}
#overlay_skitter{position:absolute;top:0;left:0;width:100%;z-index:9998;opacity:1;background:#000}
.slideshow_skitter .focus_button{position:absolute;top:50%;z-index:100;overflow:hidden;text-indent:-9999em;margin-top:-25px;opacity:0;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s;background-position:-42px 0;width:42px;height:42px}
.slideshow_skitter .play_pause_button{position:absolute;top:50%;z-index:151;overflow:hidden;text-indent:-9999em;margin-top:-25px;opacity:0;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s;background-position:0 0;width:42px;height:42px}
.slideshow_skitter_large{width:900px;height:300px}
.slideshow_skitter_small{width:200px;height:100px}
.slideshow_skitter .focus_button,.slideshow_skitter .next_button,.slideshow_skitter .prev_button,.slideshow_skitter .play_pause_button{display:block;background:url(https://lh3.googleusercontent.com/-z9Q6DJBsras/UnUHVPmjijI/AAAAAAAAGe8/COo4K5jeLuk/w84-h126-no/sprite-default.png) no-repeat}
.slideshow_skitter .play_pause_button.play_button{background-position:0 -84px;width:42px;height:42px}
.skitter-minimalist .prev_button,.skitter-minimalist .next_button,.skitter-minimalist .play_pause_button,.skitter-minimalist .focus_button{display:block;background:url(https://lh5.googleusercontent.com/-3wU0mUXni5Y/UnUHUQR_btI/AAAAAAAAGew/9goWUJyX3rM/w24-h110-no/sprite-minimalist.png) no-repeat!important}
.skitter-minimalist .prev_button{background-position:0 0!important;width:24px!important;height:28px!important;}
.skitter-minimalist .next_button{background-position:0 -28px!important;width:24px!important;height:28px!important;}
.skitter-minimalist .play_pause_button{background-position:0 -74px!important;width:18px!important;height:18px!important}
.skitter-minimalist .play_pause_button.play_button{background-position:0 -56px!important;width:18px!important;height:18px!important}
.skitter-minimalist .focus_button{background-position:0 -92px!important;width:18px!important;height:18px!important}
.skitter-minimalist .info_slide .image_number{background:#000;box-shadow:rgba(255,255,255,0.2) 1px 1px 0;font-size:12px;font-weight:400}
.skitter-minimalist .info_slide .image_number_select,.skitter-minimalist .info_slide .image_number_select:hover{background:#c33}
.skitter-minimalist .info_slide_dots .image_number{width:14px;height:14px;box-shadow:rgba(255,255,255,0.2) 1px 1px 0}
.skitter-round .prev_button,.skitter-round .next_button,.skitter-round .play_pause_button,.skitter-round .focus_button{display:block;background:url(https://lh3.googleusercontent.com/-RI8pdWsdAic/UnUHd9xU3oI/AAAAAAAAGfM/Mpp464PWZwQ/w47-h116-no/sprite-round.png) no-repeat}
.skitter-round .prev_button{background-position:0 0;width:23px;height:47px;left:-23px}
.skitter-round .next_button{background-position:-23px 0;width:23px;height:47px;right:-23px}
.skitter-round .next_button:hover,.skitter-round .prev_button:hover{opacity:1}
.skitter-round .play_pause_button{background-position:0 -70px;width:47px;height:23px;top:24px;left:24px!important}
.skitter-round .play_pause_button.play_button{background-position:0 -47px;width:47px;height:23px;top:24px}
.skitter-round .focus_button{background-position:0 -93px;width:47px;height:23px;top:24px;left:82px!important}
.skitter-round .info_slide .image_number{background:#999;box-shadow:rgba(255,255,255,0.2) 1px 1px 0;font-size:12px;font-weight:400}
.skitter-round .info_slide_dots .image_number{width:14px;height:14px;box-shadow:rgba(255,255,255,0.2) 1px 1px 0;background:#999}
.skitter-round .progressbar{top:5px;left:0;background:#333;box-shadow:rgba(255,255,255,0.3) 1px 1px 0}
.skitter-clean .prev_button,.skitter-clean .next_button,.skitter-clean .play_pause_button,.skitter-clean .focus_button{display:block;background:url(https://lh5.googleusercontent.com/-00FmPtkv7CQ/UnUHUqoFqfI/AAAAAAAAGe4/pZwlaZ05FQM/w47-h215-no/sprite-clean.png) no-repeat}
.skitter-clean .prev_button{background-position:0 0;width:47px;height:46px}
.skitter-clean .next_button{background-position:0 -46px;width:47px;height:46px}
.skitter-clean .play_pause_button{background-position:0 -133px;width:41px;height:41px}
.skitter-clean .play_pause_button.play_button{background-position:0 -92px;width:41px;height:41px}
.skitter-clean .focus_button{background-position:0 -174px;width:41px;height:41px}
.skitter-clean .info_slide_dots .image_number{width:14px;height:14px;background:#999}
.skitter-clean .progressbar{top:5px;left:5px;background:#fff;box-shadow:rgba(0,0,0,0.5) 1px 1px 0}
.skitter-square .play_pause_button,.skitter-square .next_button,.skitter-square .focus_button,.skitter-square .prev_button{display:block;background:url(https://lh5.googleusercontent.com/-9CSYRZwMrVA/UnUHWTDhmaI/AAAAAAAAGfE/TguUFjlMC2U/w110-h165-no/sprite-square.png) no-repeat}
.skitter-square .play_pause_button{background-position:-55px 0;width:55px;height:55px;top:10px!important;left:10px!important;bottom:auto!important;right:auto!important;margin-top:0}
.skitter-square .play_pause_button.play_button{background-position:0 0;width:55px;height:55px}
.skitter-square .focus_button{background-position:-55px -55px;width:55px;height:55px;top:10px!important;left:65px!important;bottom:auto!important;right:auto!important;margin-top:0}
.skitter-square .next_button{background-position:0 -55px;width:55px;height:55px;top:auto;left:auto;bottom:10px;right:10px}
.skitter-square .prev_button{background-position:0 -110px;width:55px;height:55px;top:auto;left:auto;bottom:10px;right:65px}
.skitter-square .info_slide_dots .image_number{width:14px;height:14px;box-shadow:rgba(255,255,255,0.2) 1px 1px 0;background:#999}
.skitter-square .info_slide_dots .image_number:hover{background:#999}
.skitter-square .info_slide_dots .image_number_select,.skitter-square .info_slide_dots .image_number_select:hover{background:#555}
.skitter-square .progressbar{top:0!important;left:0!important;width:100%;background:#fff;border-radius:0;height:2px}
.slideshow_skitter ul,.slideshow_skitter .image img{display:none}
.slideshow_skitter .prev_button:hover,.slideshow_skitter .next_button:hover,.slideshow_skitter .play_pause_button:hover,.slideshow_skitter .focus_button:hover{opacity:0.5!important}
.slideshow_skitter .info_slide .image_number:hover,.slideshow_skitter .info_slide_dots .image_number:hover{background:#000}
.skitter-minimalist .info_slide,.skitter-round .info_slide,.skitter-clean .info_slide,.skitter-square .info_slide{background:transparent}
.skitter-minimalist .info_slide .image_number:hover,.skitter-round .info_slide .image_number_select,.skitter-round .info_slide .image_number_select:hover,.skitter-round .info_slide_dots .image_number_select,.skitter-round .info_slide_dots .image_number_select:hover,.skitter-clean .info_slide_dots .image_number_select,.skitter-clean .info_slide_dots .image_number_select:hover{background:#111}
.skitter-round .info_slide .image_number:hover,.skitter-round .info_slide_dots .image_number:hover,.skitter-clean .info_slide_dots .image_number:hover{background:#333}
.skitter-clean .info_slide .image_number,.skitter-square .info_slide .image_number{background:#fff;box-shadow:rgba(0,0,0,0.2) 1px 1px 0;font-size:12px;font-weight:400;color:#333}
.skitter-clean .info_slide .image_number:hover,.skitter-square .info_slide .image_number:hover{background:#ccc}
.skitter-clean .info_slide .image_number_select,.skitter-clean .info_slide .image_number_select:hover,.skitter-square .info_slide .image_number_select,.skitter-square .info_slide .image_number_select:hover{background:#111;color:#fff}
</style>
<script src="http://faceblog-evolutions.googlecode.com/files/jquery-1.6.3.min.js" type="text/javascript"></script>
<script src="http://faceblog-evolutions.googlecode.com/files/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="http://faceblog-evolutions.googlecode.com/files/jquery.animate-colors-min.js" type="text/javascript"></script>
<script src="http://faceblog-evolutions.googlecode.com/files/slideshow.skitter.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow_skitter_large').skitter({
theme: 'square',
numbers_align: 'center',
progressbar: true, 
dots: true, 
preview: true
});
});
</script>

<div class="slideshow_skitter slideshow_skitter_large">
<ul>
<li><a href="http://mas-andes.blogspot.com"><img class="cube" src="https://lh3.googleusercontent.com/DSRxr-nnwRISU7rCCoj12-RnD53BFK-cfnfIr5tCI14=w600-h300-no" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cube</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img class="cubeRandom" src="https://lh4.googleusercontent.com/xvWHYzsBk3-F5pCmaeUAQ2H5DvPfelTtgLR40CV6IZE=w600-h300-no" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cuberandom</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img class="block" src="https://lh4.googleusercontent.com/JpRl4FY6_U9VSw-hrUgJpuqfEbk3ec9OdydP9lIqjQ8=w790-h286-no" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek block</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img class="cubeStop" src="https://lh5.googleusercontent.com/HvRyGEKGrthxZZkjXtn_h70MMUkyqGDtb2naqTD0CHM=w463-h240-no" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cubestop</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img class="cubeHide" src="https://lh4.googleusercontent.com/m3_nU-R0xpg7q6ufiLvXH4XDcVomM7oDt26pU0sMpNk=w463-h240-no" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cubehide</p></div></li>
</ul>
</div>
Keterangan:
- Ganti http://mas-andes.blogspot.com dan URL gambar.
- Untuk lebar slider silahkan ubah sesuai selera masing-masing.

Customisasi
Dari kode yang terdapat di atas, perhatikan teks yang berwarna biru. Kita dapat memilih salah satu di antara 4 theme, disitu saya menggunakan square sebagai default theme. Namun apabila ingin menggantinya, anda dapat merubah dengan pilihan theme lain di antaranya terdapat square, clean, round, minimalist.

Sedangkan pada type efek animasi slider perhatikan teks yang berwarna merah pada kode diatas, saya hanya memasukan 5 gambar dengan masing-masing efek yang berbeda. Anda dapat menambahkan gambar sebanyak mungkin dengan berbagi efek animasi yang berbeda didalam satu slider. Anda dapat merubah dan memilih berbagai type efek animasi tersebut, berikut type animasi yang dapat anda gunakan: cube, cubeRandom, block, cubeStop, cubeStopRandom, cubeHide, cubeSize, horizontal, showBars, showBarsRandom, tube, fade, fadeFour, paralell, blind, blindHeight, blindWidth, directionTop, directionBottom, directionRight, directionLeft, cubeSpread, glassCube, glassBlock, circles, circlesInside, circlesRotate, cubeShow, upBars, downBars, hideBars, swapBars, swapBarsBack, swapBlocks, cut, hideProgressBar.

Untuk yang lain-lain misalkan ingin merubah warna,font, maupun letak elemen silahkan custom sendiri agar sesuai dengan template blog yang di gunakan.

Berlangganan artikel via email

31 Response to "Cara Modifikasi Skitter Slideshow Pada Blog"

Gambar selain menjadikan blog lebih berwarna juga buat menerangkan artikel yang kita publishkan...untuk saat ini saya masih meminimalisirkan gambar di blog...untuk referensi saya save dulu scriptnya mas..hehehe

Balas
avatar
Anonymous

walah walah CSS nya banyak bangedd

Balas
avatar
Anonymous

saya belum kepikiran mau pasang slider mas, tapi saya simpen dulu deh kalau sewaktu-waktu perlu hehe... Makasih :)

Balas

tinggal copy doang gan gak ribet :)

Balas

ngeriii namanya panjang bangeddd

Balas
avatar
Anonymous

mantaap gan tp kyk ny gk cocok d template saya..

Balas

Nah ini artikel yang saya cari ijin nyimak
Dan simpen script nya Mas Andes terima kasih

Balas

wah keren ditambah jumlah slidenya ya , keren mas :)

Balas
avatar
Anonymous

Kaya Choklate Solut berarti yah Mas Andes
Panjaaanng dan banyak hhhhhhhh

Balas

Biasanya kalau udah nyimpen harus cepet2
Di pakai sebelum Kadaluarsa Mas. sayang kan?
Nanti kalau dah kadaluarsa Mas Anthonie yang
Susah ngobatinya..hhhh

Balas

Wow hanya itu yang aku bisa katakan mas hehe .. kerenn mantapzzzzzzz

Balas

Untuk Cssnya sebenernya ga panjang tuh mas..kan bisa dipotong sesuai theme yg akan kita gunakan, kita pilih salah satunya kemudian hapus yg tidak perlu..kan mas andes udah kasih pilihannya ( square, round, minimalist, clean ) hohohoho

Balas

gk ada demo, bikin penasaran aja ni.., makasih sdh berbagi *smile

Balas

Scriptnya lumayan banyak juga ya Mas...
Pngen pasang tp takut lmot soalnya blog saya sudah banyak gambarnya :)

Balas

dan tidak usah mikir bumbu dapurnya, tinggal lhap, santap saja

Balas

keren dong, kan mas andes yang bikin

Balas

Mantap sob.. jgn lupa kunjungan balik :)

Balas
avatar
Anonymous

ijin nyoba mas kayanya keren nih :)

Balas

sepertinya yang komentar sedang ikut kontes seo mas hehe :D

Balas

Lumayan panjang juga ya mas kode nya. Jadi apabila kita ingin pasang skitter slideshow atau sudah pasang, bisa di modifikasi sesuai keinginan kita ya mas, biar lebih keren lagi slide show nya :)

Balas

iya..banyak banget kodenya. sampe pusing bacanya. hihihih

Balas

Biar aman dan awet kodenya, bisa disimpen di kulkas mas hehe :D

Balas

mas cara biar tampil pada homepage saja gimana? gagal terus pas edit HTML katanya salah terus ada solusinya gak ya mas

Balas

itu slideshownya panjaang bnget... untuk mngedit kodenya gmn y?

Balas
avatar
Anonymous

Rame banget ya mas kodenya..tapi bagus buat dicoba

Balas

mas bro efeknya koq jadi cube semua setelah gambarnya aku ganti dgn gambar aku ... suwun

Balas

Ngurangin kecepatan sildenya gimana bro?

Balas

Mantap pisan bang,,
Kalau slidenya pengen otomatis menyesuaikan dengan recent post atau popular post gimana cara nya bang?? thanks

Balas

mas,cara menghapus tombol/icon next prev itu gimana?

Balas

itu untuk ukuran gambaranya sendiri berapa gan ??? terimkaasih

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Cara Modifikasi Skitter Slideshow Pada Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode