Cara Memasang Skitter Slideshow di Blog

Cara Memasang Skitter Slideshow di Blog – setelah beberapa waktu lalu sudah pernah membahas untuk Menambah Fitur jQuery Animasi Slider Pada Blog dengan efek transisi yang menarik, maka pada tutorial kali ini kembali akan membahas untuk menambah fitur slider pada blog dengan efek-efek yang tidak kalah menarik menggunakan plugin jQuery Skitter Slideshow. Sebelum membahas lebih jauh ke tutorial, saya sedikit akan menjelaskan mengenai plugin jQuery Skitter Slideshow. Skitter adalah plugin jQuery yang memungkinkan kita untuk mengkonversi menjadi slideshow dengan efek animasi transisi pada gambar. jQuery Skitter sangat memungkinkan kita untuk membuat slideshow dengan efek gambar yang menarik dan terdiri dari 22 efek transisi. Skitter Slideshow ini dapat menampilkan daftar slide sebagai angka atau thumbnail dan item dapat diakses dengan bantuan tombol prev dan next. Ada beberapa opsi yang ditawarkan untuk kustomisasi maksimum seperti: kecepatan (untuk partikel animasi), interval antara setiap slide atau menampilkan label on/off. Fitur lain yang bagus adalah kemampuan untuk menyebutkan jenis animasi untuk setiap slide sebagai nama class yang memungkinkan kita untuk menggunakan beberapa jenis animasi dalam satu slide. Untuk membuat slider ini terpasang ke dalam blog, berikut tutorial Cara Memasang Skitter Slideshow di Blog.

1. Login ke blogger.
2. Masuk ke Tata Letak kemudian Tambahkan Widget HTML/Javascript.
3. Copy kode berikut ini.

<style type="text/css">
.skitter_slideshow {background:#111;padding:10px 10px 30px 10px;float:left;margin:auto; }
.skitter_slideshow img {width:850px; height:300px;}
.label_skitter {text-transform:uppercase;z-index:150;position:absolute;bottom:0px;left:0px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5T3XyRGtsSQeOoRLnxSjkIZXxNF7JHYNN5HWOq4WLI3EFfMYeMQfUtekOADcTFlmj8trlw2OFRcsjXaR44Dg1uZXPpdwc5xtVFWmMpDN2wbGGp72muuIYVHfuwvAy1zQNU3Oxvy2qIMc/h120/back-box-label-black.png) repeat-x left top;color:#fff;display:none;border-top:1px solid #000;}
.label_skitter p {padding:10px;margin:0;font:normal 22px arial,tahoma;letter-spacing:-1px;}
.info_slide * {font-family:Consolas,arial,tahoma !important;}
.slideshow_skitter {position:relative;width:850px;height:300px;}
.slideshow_skitter ul {display:none;}
.slideshow_skitter .container_skitter {overflow:hidden;position:relative;}
.slideshow_skitter .image {overflow:hidden;}
.slideshow_skitter .image img {display:none;}
.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:100;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNdqmGXipdAM8B5KDi66tDBALLHNidZqWsLpXCLNVb9V68kEZOwjtv4K1gz5gXj6vJqZsTjV1EtdvXiOImZDBFA071SAzi1vCm147gjfpuYDYPvjDRgkm1s84wOjQc57kBMxPLclWRv_k/h120/prev.png) no-repeat left top;}
.slideshow_skitter .next_button {position:absolute;top:50%;right:0px;z-index:100;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkhekYCC0MOCYY9ja8I2GrlhCOGewUhk9XE4akb1YsHT1EFa-RyQpNOCV887Q3lhM4MPme9eNOg8rVe2I8mQz4WzSiNEe7YOR7D1EZ_Uds2WxYIDnovMbktHVYTo6vLxScon62gnzWzLE/h120/next.png) no-repeat left top;}
.slideshow_skitter .info_slide {position:absolute;bottom:-27px;left:40px;z-index:100;color:#fff;font:bold 11px arial;padding:5px 0 5px 5px;}
.slideshow_skitter .info_slide .image_number {background:#333;float:left;padding:2px 10px;margin:0 5px 0 0;cursor:pointer;}
.slideshow_skitter .info_slide .image_number_select {background:#cc0000;float:left;padding:2px 10px;margin:0 5px 0 0;}
.slideshow_skitter .container_thumbs {position:relative;overflow:hidden;height:50px;}
.slideshow_skitter .info_slide_thumb {-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;overflow:hidden;height:45px;top:auto;bottom:-5px;left:-5px;padding:5px;opacity:1.0;}
.slideshow_skitter .info_slide_thumb .image_number {overflow:hidden;width:70px;height:40px;position:relative;}
.slideshow_skitter .info_slide_thumb .image_number img {position:absolute;top:-50px;left:-50px}
.slideshow_skitter .slideshow_scroll_thumbs {padding:0 10px;}
.slideshow_skitter .slideshow_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;-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;cursor:pointer;border:1px solid #333;}
.slideshow_skitter .info_slide_dots {position:absolute;bottom:-40px;z-index:100;padding:5px 0 5px 5px;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;}
.slideshow_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;}
.slideshow_skitter .info_slide_dots .image_number_select {background:#cc0000;float:left;margin:0 5px 0 0;}
.slideshow_skitter .label_skitter {z-index:150;position:absolute;bottom:0px;left:0px;display:none;}
.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/AVvXsEixhhz6BS5LnhLni0V4jT7Wd6sH4ShXUKkHtWmMSewdMeQQR0rtlEeuG8SNumykDiM7aW284rdi-9unJFtpsblET_7oLrfTh1GCWjg-wsEv4NoFWbm0Vcd21fTRnEdc2oY1Q6EyvAScudU/h120/ajax-loader.gif) no-repeat left top;width:32px;height:32px;}
.slideshow_skitter_large {width:850px;height:300px;}
.slideshow_skitter_small {width:200px;height:200px;}
</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.skitter.min.js" type="text/javascript"></script>
<script src="http://faceblog-evolutions.googlecode.com/files/jquery.animate-colors-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var options = {};
if (document.location.search) {
var array = document.location.search.split('=');
var param = array[0].replace('?', '');
var value = array[1];
if (param == 'animation') {
options.animation = value;
}
else if (param == 'type_navigation') {
options[value] = true;
if (value == 'dots') $('.skitter_slideshow').css({'margin': 'auto'});
}
}
$('.slideshow_skitter_large').skitter(options);
});
</script>
<div class="skitter_slideshow">
<div class="slideshow_skitter slideshow_skitter_large">
<ul>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg00hTZ8DLs66jobzKbT9scD64u_sCxSb3AtvCmcezfngeV6HcROaA4qqWeAKe3BmW3uY9wGitqTyPQ7qn_1X3SE4hyphenhyphenHmdJLDCSDB4ZHGzH5a41KTPpe6rJWPIukAau1Q9O5E6yLmxVAgk/w600-h300-no/" class="cube" 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 src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ0WK8PbRLfnUMJoEVGVLEZZB-iDKU4GR9k_aRKr3vVNZAX5mZ8p3zkWPiVH5b0sXIOYwwx5nD4IESxYFZX8ujVWx3Xq0glZNbnvqguosHP2gOK5hGZA0WhICh7mbKO0zokGEZAVFxOpw/w600-h300-no/" class="cubeRandom" 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 src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_7D9-p4KdJrAaP-ZJUmHVSqdHqA6U_NySdjvk_FO-sFRMNv3R4RqsoLsRAB1Isdyjb_N9tzMm1h7C8YmM1A4HzDnosWMuQyZ4RX1Uid8m8NWgAc2bluhZ9hucl43RhXTOvVu9bv7yZpY/w790-h286-no/" class="block" 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 src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw8WLO-bFH86g3dVB6HOyBnUn-5eTSDzeqtc1ALiU_ZUtV6UiMo98FqMB3Jwo7fbEukKwen1toj2JAWMoFTWxl51TnrJ8SfQJaf6P4NNzN6w0WScOlomoGPNcghLMRpqzWckn79Uebu7A/w463-h240-no/" class="cubeStop" 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 src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqWdd1gei66vdPRJ4vqedYi03lW1xmPNb5NFVcfRqXKZQoKaATYcYPRYpAi6a-yFxeOXsAbkZXsC9_slBUCtfGl5NBWnQD0ZpNqG39l8A8QfnF08rTsdDI0G7Tt1Vv-pxtlBo0VeS6S7w/w463-h240-no/" class="cubeHide" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cubehide</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAZO84kowefmz8Qf6c39vNiRSA_JZMvC8Tln5eUajtH1JoYvKR0D9vmovoZW8zU3uHYz-PHnc3W3I3Xgkf8WUfecTaucvhIrkxw6O32AmdsX0OpAvlS2V0ta40HLn86dX6jfe2SRsxkrU/w463-h240-no/" class="cubeSize" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cube size</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvJcRoIaHwGWHPZYJBVmmBhogexuvDU_BSgxPX6aamQDPPwZuCUjt6T-mvR3z6e0m31A1bv7BBJnEZX_XqhH_HlMYWH1tTpDdJuJESXcLlYBQ0QylssnoHZxVw9BupoPhmuiYalrNFSH0/w500-h300-no/" class="horizontal" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek horisontal</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs2OnrogaBVA_q5gKkkRYatY2qfNznVRPkWEhH8PIhxfw0Pv1d7cce7zHZCFJ30EaWKPQr91vsw1X5GWf5al4cLGE1V3QzT1whD2BF90rwO4OPxyzwMrfwTvSS1ilMN7fMh5YsQWg08Cs/w852-h284-no/" class="showBars" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek showbars</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0Y7B-BVoJF2tFz8lG-zq8nw5QEIq6GgWDEGT4624ayI22HO85Fa7U4IBGB8q3gf5UH7JFvBOS36XLjNwDgs4tDC-i3Pt2crTzE1z2bzbpYnA2jVytLw92LXFUzgKT1NRGnwN8PbM6L5Q/w500-h300-no/" class="showBarsRandom" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek showbarsrandom</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRPth2RDx_OzVDQ-7LIap2jjJMu8Ilg6A5vvU200S8tD9iYZlOoUcR9c7mYQDqkcooVA5-z9Bd3E1qSw_qQaZSTXd28sabD814LP5rl6RupCVjmLfIEOTB1duZFWtT2ir4sj0Wrkj4tdY/w758-h438-no/widget-contact-form-blogger.jpg" class="tube" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek tube</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV1nY-jmV10-G-h9Oo2lk-cbwwCYqeXMYTekNMAZA75RzmIX_14UKJJlREE7LfDRaXLsJdamHrKTpoTFobjmIci-j-Ofm-hfa9hnysfCcwGcFQcfzrcQ8DvJwW8j6ZMUmyNsp6inSaogs/w500-h300-no/" class="fade" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek fade</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2zzMf_fJtVVsZOk8o_0ciOh5DdHlNGqTmY1Wjox07sSZiRDZQ_CxbPBvPL8wY65Vj7Ym40fqZmk6iR_EHr44ZBmZNdyWnkKJKk8mHMkFpmvkEJ6g9-lYcVMuB9cPhni4ioD72-hJ8JYA/w600-h300-no/form-email-subscribe-blogger.png" class="fadeFour" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek fadefour</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheystoN9RRsepg4bZui-iWfO00dqkps8lxa1zJynmLml_sLpB_QAHsrYU2OxfCsoaQqrekNhzKzif0QnWnp1qyTg9zc1AdLLVfkt4KVd77diUBCknNfhm1wVL8RFF2Zpw6hvTNgjwGL0E/w985-h533-no/widget-contact-form-official-blogger.jpg" class="paralell" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek paralell</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkgpphS8-_gZbOR7rEezZmdQxH39dfp32NZghmHSD2pskA0dlPnL_-VESVh3-oCoUjfTdeAVZggC4iSZWvZ1qEjc4H-VAu0qjFQ_a3xMIVGCvrny81aXT5Mo-Hp2nuPSLcQMEtWCicQI0/w540-h180-no/Pop-Up-Widget-Google%252B-Follower-for-blogger.png" class="blind" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek blind</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-64EhGAzVVSxQZfDVKRBMd1eVYYRve0_add3qUyUgXAdnKYkoHO-w7DSklYiFpEVipU0c7VsuP-b14lY1fjCqO1SwlgWO1l7DnCiixlINgqKvL9Gz188WH07JlEoAAPrDLPkrOar4MBI/w353-h243-no/Pop-Up-Widget-Google%252B-Follower-2.png" class="blindHeight" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek blindheight</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiybQaoE2Olil3fLgU-1rTvWWkcl0Bic0NCU0r4lIA9wthN44MBQId7ZMhOKZZS2aJ5qibHmBHfPNsaKlKuW93ynM9QJ9ARRve0O1ms3DN9A183pbKzDoWumxEXA19p6Qdw9VzH-wii6Qk/w540-h180-no/modifikasi-email-subscribe.jpg" class="blindWidth" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek blindwidth</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmgPjw2rHyKo41nW1rVuw0o4a3sLC67HrgNninlINnVQz_pD6EJspg62RzaSQfrlsyHzw2ABxm9ms5TPXt8D8nxzutEAiDRHotUuPauyvtyqYCXOJdvlfirDbYv7t7kPPVoyTfvc0OwVo/w540-h179-no/modifikasi-facebook-like-box.jpg" class="directionTop" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek directionTop</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqF8oTs8wum9v7fOp7ze7hn0u1yfK-jxzM6o-MwA6B1pbHKPWq3Pt0hSYoDp-k20mX4Ed2gC0jAfFZZb_QvGhV1Vf9WpCesRyB5Uln4EbXniQYI5uoZq4lTKgPqME3AEJHE603nOar95U/w540-h179-no/modifikasi-widget-google%252B.jpg" class="directionBottom" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek directionBottom</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYB-2-n1fxgGCWpKnLHBdR-vYhnpjYmFC8lXhQ4nlyFUfYAkaxWc_X9TpM-IATdX2G02pFr4Swl6GD2T511LuPVfdD-nZM2Up2p4X4vPZp54jDXzaj6TATohQeJBz7knS21KbBYmcDXDk/w500-h300-no/" class="directionRight" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek directionRight</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdl9kd8UjVtyqxcp77-mL6DR4_Q06CKKxPXQbPnJhEjmeADhWnqO22ASY7EDiBSGiLAm1X4Zwo39htqIwTfRoEPwooQJFYR0iejWwDas9kAh6Tt78jKZlJDFX3R5z9qldHq6EOFTReB4o/w400-h274-no/flod-image-hover.jpg" class="directionLeft" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek directionLeft</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEV168VjLCivvhlQBJ5kk5SqZbUiXmdEdYlNkRhgdN9nVAnMUWGr8bGdl6gwrHdKzEqnYoOnXoLYjrMqY2QYR1MMnSPNiP-BeQFbQzuwc_3yZMphC08nP552cw-a2m0NCy7GEhG0yOi0M/w725-h459-no/widget-sidebar-ribbon.jpg" class="cubeStopRandom" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cubeStopRandom</p></div></li>
<li><a href="http://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiORk_h-MhYiqph8-4Nja0OR0OHce-T6EY1uv1Vepre5SVl-4wQfDCsgdhpx63kOnFw0I9TmqTMd2UvfGiwHrNeFmtsnkOd3XRFONJVNbQsgRP7CRr_c_LOAdYkKIX78H6dn2pW-PbtvhI/w587-h344-no/sidebar-ribbon.2.jpg" class="cubeSpread" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cubeSpread</p></div></li>                
</ul>
</div>
</div>

Keterangan:
Ganti http://mas-andes.blogspot.com dan URL gambar.

4. Paste kode tersebut kedalam Widget HTML/Javascript.
5. Langkah terakhir Simpan.

Di atas hanya kode dasarnya saja, silahkan sesuaikan atau custom sendiri dengan tampilan yang lebih menarik sesuai dengan selera masing-masing.