Blog Official Eko Rudianto yang membahas tentang Blogger , Makalah, Artikel , Religi, Wisata dan lain-lain

Tuesday, March 15, 2016

Cara Membuat Skitter Slide Show Pada Blog

Eko Rudianto Blogs - Memang widget ini sangatlah cocok untuk dipasang pada blog, selain untuk mempercantik tampilan blog widget ini juga keren untuk dipasang pada blog kita. Cara membuatnya cukuplah mudah, dan yang pasti saya akan membuat tutorial yang bisa dengan mudah saudara mengerti. Efek slider ini cukup keren dan yang pasti tidak membuat loading blog menjadi berat, Widget ini juga bisa dipasang sesuai keinginan anda, bisa dipasang diatas postingan/dibawah header dan juga bisa dipasang pada widget atau sidebar anda.

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 Membuat Skitter Slide Show Pada 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/AVvXsEieN2-XNrDOIOIUnNrujCir6dcW-nHrR_1L0qepujWf8Jd-xKThyK2E3X27Umeql0H6712PMW0UX6iLphQwgZR7IDWPo2BPfH5nHxp2HWy9r88UlmL4JsMG2dyviIhyphenhyphen8b54YP-gmNLc9fY/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/AVvXsEgPFyPY4ypEGKIN8Q8ESM6yIrDj8TdyMpbA_3VBku3l0vIfiPHlJ5ThmujQVIPTDX7CCoYai7MSyGK3UlMlewW4hxYgas3AfOHtrLHi2nCt3_6zX9jGfTsTeyabfbRAtJ8B-p_QdvMK8W0/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/AVvXsEgfMXL5ynK1itoy547hAgWLmJTsIkofdA2a8RLnUdkJmu7aFQ_mrMmD8UdbzD00LWyA8KLxEFkrSCol_w57COyVDRmUn4_S29CrpKKXGPU802mFtznwB4TzxfuqZo293rCuTV8am3NakCc/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/AVvXsEhENXpnlp6HHZP-Qhs6ShlJceYVYY-kEyQS7oBkjyte5Sl62K2TtBocRgbLXzDKl7qd5ZbN4B7N68IkDbQ4FByeuxyncYD5L_VWNtWk5ZTFivzVttqzHc1CNg-c5r8ALKmzvvnXwWW24J4/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://www.wisatatelukkiluan.com"><img src="http://2.bp.blogspot.com/-bGZbHQM-6e0/U99A7UWuEyI/AAAAAAAAAjM/f17nxbB5Qv8/s1600/lumba-lumba-21.jpg" class="cube" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Lumba-Lumba</p></div></li>
<li><a href="http://www.wisatatelukkiluan.com"><img src="http://4.bp.blogspot.com/-lqX_obyjzB0/U99AZdxu4gI/AAAAAAAAAc0/HZqS7vBxUo8/s1600/115.jpg" class="cubeRandom" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Pantai yang Bersih dan Indah</p></div></li>
<li><a href="http://www.wisatatelukkiluan.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizr065Vh5vSYn4Vk2wa3XnRKzf0e1JbXHPjK2Mnuf8GJLJOCxPWiyWIvT2gSmJUb2SIJ9lOqNGRwLuI1dASwN6BbB2G3n3ywok8fhDmWYcQxUrPknmcyCccnNs05B-feZ52fBvluPzHSA/s400/Laguna+Gayau+Teluk+Kiluan+5.JPG" class="block" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Laguna Gayau Teluk Kiluan</p></div></li>
<li><a href="http://www.wisatatelukkiluan.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHsHlqi60uHbDzhewzjZPGd_SU_3uctWNmt4WXHEYAmPlOdZsjn4hBUPDf7dW9M8FbulAwR1q6d1UmjtNxMhIw9FunC1NghwttVDOnP4L2ClwPLorn_6y3pIu6N3gjI4kOFQbHjELd2FQ/s1600/DSCF6400.JPG" class="cubeStop" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Keindahan Sunset Teluk Kiluan</p></div></li>
<li><a href="http://www.wisatatelukkiluan.com"><img src="http://4.bp.blogspot.com/-UxaAThxyG0U/U99A45U_XPI/AAAAAAAAAiw/VCYEc43pJdw/s1600/kil-anemo.jpg" class="cubeHide" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Keindahan Bawah Lautnya</p></div></li>
<li><a href="http://www.wisatatelukkiluan.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQyehuc-B29TGwUly-QSu9pMy2OfeeDJ38C-CMRPgIYVaYMD2rgaezKc5gzB8MpxyfNydsNncC5-tiInYHWban7eJxRcevGucBvzMdQD68wXSp8xN_Xl9kkzrQBwfdf5eslV2lP9HnZubV/s320/Lumba-Lumba+Teluk+Kiluan+05.jpg" class="cubeHide" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Lumba-Lumba Menari Mendekati Kita</p></div></li>
<li><a href="http://www.wisatatelukkiluan.com"><img src="http://4.bp.blogspot.com/-gJ4WoPONcGE/VlZfDBBrU2I/AAAAAAAACZ0/bJpcJI8MXkw/s320/Pulau%2BTeluk%2BKiluan%2B03.jpg" class="cubeHide" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Pulau Teluk Kiluan</p></div></li>
<li><a href="http://www.wisatatelukkiluan.com"><img src="http://1.bp.blogspot.com/-epUjp8xhf3k/VlZg7wyRMaI/AAAAAAAACbo/FGFnsyfkjt0/s1600/Laguna%2BGayau%2BTeluk%2BKiluan%2B3.jpg" class="cubeHide" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Semburan Air di Laguna Gayau</p></div></li>
<li><a href="http://www.wisatatelukkiluan.com"><img src="http://4.bp.blogspot.com/-85TdJb6msjY/VlZfHb6SexI/AAAAAAAACac/P0VZgx_5pgQ/s320/Sunset%2BTeluk%2BKiluan%2B02.jpg" class="cubeHide" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Keindahan Sunset Teluk Kiluan</p></div></li>
<li><a href="http://www.wisatatelukkiluan.com"><img src="http://3.bp.blogspot.com/-k_Mj2EJd1WA/VlZfEdAWUlI/AAAAAAAACaA/cTGnBb85rKI/s1600/Snorkeling%2BTeluk%2BKiluan%2B2.jpg" class="cubeHide" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Nikmati Keindahan Bawah Lautnya</p></div></li>
<li><a href="http://www.wisatatelukkiluan.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTqgxrLpyFFKfOGXdHciclitb0KiH0ne6kQ2NTdBplqHGTcMIxRUbu3hus9-64Q0OnsWtWimXYnt0rCB6LzA6bYZLUq3S8sOZuw6k5KKgYVKyq-BSu_wff26cAJLR-pTRdO0a3V0lhb8g/s400/Lumba+Teluk+Kiluan+4.jpg" class="cubeHide" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Loncatan yang Sangat Menakjubkan</p></div></li>
<li><a href="http://www.wisatatelukkiluan.com"><img src="http://4.bp.blogspot.com/-9X-v66-pir8/VlZe6xoxc8I/AAAAAAAACY8/_TMoF9euOrQ/s320/Pantai%2BTeluk%2BKiluan%2B04.jpg" class="cubeHide" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Pantai yang Bersih nan Indah</p></div></li>
<li><a href="http://www.wisatatelukkiluan.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsUPzD_Ovqu9yBAkt3vIzzEcoT9fe5OLg9RWtDcOHLHCZkLDn5QwUH_3zFrAlZpVYWKEUK8ru-1dLxK30viiVH3t4idBQ5zb0H94Sp4qM4Izn_EkU1GsLaCDXSvsANj5X6Kh3qzqC4YRc-/s1600/13530067001519843102.jpg" class="cubeHide" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Laguna Gayau Teluk Kiluan</p></div></li>
<li><a href="http://www.wisatatelukkiluan.com"><img src="http://3.bp.blogspot.com/-SjAiYAXf1-c/VlZfJ5QTlOI/AAAAAAAACas/yGJnJlTWhSg/s320/Sunset%2BTeluk%2BKiluan%2B04.jpg" class="cubeHide" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Keindahan Sunset Teluk Kiluan</p></div></li>              
<li><a href="http://www.wisatatelukkiluan.com"><img src="http://3.bp.blogspot.com/-PSaXATC64WE/U99AYpMAfYI/AAAAAAAAAco/HjG99bn8rVM/s1600/113571_teluk-kiluan_663_382.jpg" class="cubeHide" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Nikmati Keindahan Bawah Lautnya</p></div></li>
<li><a href="http://www.wisatatelukkiluan.com"><img src="http://4.bp.blogspot.com/-ne6otRrNYJg/VlZp5pjTSjI/AAAAAAAACcA/oQsywR5moWY/s320/Lumba-Lumba%2BTeluk%2BKiluan%2B02.jpg" class="cubeHide" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Waww Banyak Banget Lumba-Lumbanya</p></div></li>
<li><a href="http://www.wisatatelukkiluan.com"><img src="http://2.bp.blogspot.com/-AEGRK0_2fms/VlZe7yYYP0I/AAAAAAAACZE/odcY_xL0Sec/s320/Pantai%2BTeluk%2BKiluan%2B06.jpg" class="cubeHide" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Pantai yang Bersih nan Indah</p></div></li>
<li><a href="http://www.wisatatelukkiluan.com"><img src="http://1.bp.blogspot.com/-Q8_x_v118vE/U99Aa_7zhFI/AAAAAAAAAdM/R6JqF_VVjLE/s1600/13485508381297885382.jpg" class="cubeHide" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Laguna Gayau Teluk Kiluan</p></div></li>
<li><a href="http://www.wisatatelukkiluan.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVvZo2hBf1CeJ5Ag5dF2IcL_DAUKaLgnsm_OlcecBQuY1U35QPMDca5HDfC6aCkLrWLy91YIJD57BYoiSghfNGUKsFLqmiEI3JXpfD5FM0FIg0zkHHrAMZ4SIA6iz8WmLWaRDH46nurlE/s1600/2014-12-29+18.14.43.jpg" class="cubeHide" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Keindahan Sunset Teluk Kiluan</p></div></li>              
<li><a href="http://www.wisatatelukkiluan.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBKtKUsUb0XvCdaqLxG-IBOm4yyK6ZNuDEvhEmhtGgMpqb1CyHknApKP2SccHZVxbd3AqxRD3KI3MAfnTjZNziMbnECzTGV0I2zxzsALIBwQCKfbsrhBAoYCOzwTqUbZd87ZZKgVTCdGYx/s640/Gapura+Teluk+Kiluan.jpg" class="cubeHide" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Gapura Teluk Kiluan</p></div></li>
<li><a href="http://www.wisatatelukkiluan.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWOzW8FGfqoJyadVzcsxr-wNEFFDt1wM8DXIZ1hv7SXZak5hlQOrR6KSr6DUpk6STH7Z-rrvnTm3eTzGbK_3vSs1EQLPtQDm9r2CXo01ajNX3CwKh9Knfa5EaMLIhpyKAc9UTWyy1oj-k/s400/Lumba+Teluk+Kiluan+3.jpg" class="cubeHide" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Keren Banget Lumba-Lumbanya</p></div></li>
<li><a href="http://www.wisatatelukkiluan.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQPXLLSq0yS_fvq-GXnuOs4dzqnnudDHJulBpNq44nS6BUBqGxdQZf0bGbJWGM2dea4KTIwZOk-zQYynlYVvU1fIpgYwL4Zip24vEmXVk8f89v4-8U6J0U_bd7zcI_K9Ss8kxSqkdkQWjQ/s1600/teluk-kiluan-3.jpg" class="cubeHide" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Pantai yang Bersih nan Indah</p></div></li>
<li><a href="http://www.wisatatelukkiluan.com"><img src="http://2.bp.blogspot.com/-LT9D6DfNCug/U99A-UitJSI/AAAAAAAAAjw/wsHaOq-36Bs/s1600/pantai-tanggamus.jpg" class="cubeHide" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Asyiknya Bermain di Laguna Gayau</p></div></li>
<li><a href="http://www.wisatatelukkiluan.com"><img src="http://1.bp.blogspot.com/-_cBprfaaxRU/VlZfD-FujlI/AAAAAAAACZ8/DGAIBIa8TYk/s320/Pulau%2BTeluk%2BKiluan.jpg" class="cubeHide" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Menuju Pulau Teluk Kiluan</p></div></li>           
<li><a href="http://www.wisatatelukkiluan.com"><img src="http://3.bp.blogspot.com/-skQLHSMLBwk/U99A4BUsXpI/AAAAAAAAAio/BNYI5DExhyU/s1600/kil-anemo-2.jpg" class="cubeHide" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Ikanya Lucu dan Mungil</p></div></li></ul>
</div>
</div>

Keterangan:
 

Ganti http://www.wisatatelukkiluan.com dan URL gambar.

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

Sekian posting dari saya tentang Cara Membuat Skitter Slide Show Pada Blog. Mohon Maaf bila ada kesalahan kata, selamat mencoba dan Semoga postingan ini dapat bermanfaat bagi Anda dan kita semua. 


http://wisatatelukkiluan.com

G+

1 comment:

  1. Saya sudah berhasil memasang untuk homepage blog saya yang dpawoncatering.blogspot.com tapi gagal menampilkannya di halaman postingan...

    slideshow terlihat tidak bermasalah di layar desktop, tapi terlihat berantakan di layar smartphone,

    kira-kira apa ya yang jadi masalah?

    saya menambahkan class img-responsive pada image (kebetulan saya pakai bootstrap), dan saya buat lebar dan tingginya masing-masing 100%,

    tapi gambar tidak menyesuaikan ketika dibuka di layar smartphone, mohon saran dan koreksinya... terima kasih...

    rencana saya, nanti kalau di blog saya yang itu berhasil, saya ingin memasangnya pula di website saya yang www.dpawoncatering.com

    ReplyDelete

Tour & Travel Lampung

Copyright © Eko Rudianto Blogs Sponsored by Wisata Teluk Kiluan | Powered by Blogger