Memberi slideshow di blog dengan tujuan menambah kindahan template blog, promosi atau apapun tujuannya yang pasti memberi nilai plus bagi pemilik blog/website itu sendiri itu menurut saya entah menurut anda, Kenapa saya suka menambahkan widget slide poto karena blog saya berhubungan dengan multimedia dimana usaha yang kami jalani bergerak di bidang tersebut dimana kami perlu menampilkan poto-poto untuk promo kepada pengunjung blog salah satu jenis usaha yang kami jalankan., begitulah kira-kira.
Untuk DEMO silahkan Klik DISINI untuk menuju halaman Photo Wedding Sample pada website kami.
Untuk rekan-rekan yang mau sedang mencari solusi bagaimana cara membuat slideshow pada blog bisa mencopy html di bawah, dengan catatan rekan bisa mengedit ulang html tersebut untuk menyesuikan ukauran, komposisi gambar, jenis efek transisi dll.
Langkah Langkah nya :
1. Masuk ke Bloger
2. Pilih Tata Letak
3. Tambahkan Gadget + Pilih HTML/Java Script
4. Copy + Paste Kode Java Script di bawah ini :
<style type="text/css">
.skitter_slideshow {background:#111;padding:10px 10px 30px 10px;float:left;margin:auto; }
.skitter_slideshow img {width:630px; height:400px;}
.label_skitter {text-transform:uppercase;z-index:150;position:absolute;bottom:0px;left:0px;background:url(.png) repeat-x left top;color:#fff;display:none;border-top:1px solid #;}
.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:630px;height:400px;}
.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/AVvXsEhp7e2-J3rVTRBTge838_wbTcbRuFrlnu3iqF5JsV_KIxC9q4_W9dNf4T2yKBsNcNL0G9GLBcsLBMUysp0k3xXY473m_xF3KEanCz75HHMirC6X0-pXX0pIvqXp5lOiMCSdXn2Fvb8uP7U/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/AVvXsEitnl1Er64MepVBaKb27Iivkt9VThtgYEBbmupj6S-3ImfRSaR5nF49z3bEuMSCHz0yOPj1QNiYNu2NKdtmZbOOT6yhyAWMOi3xhh4LJAlshfAmvODPMgBR5GxmKFLTW-dKYJrvN4SysRQ/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:#000;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/AVvXsEgDVdfTKbGj35oqFO38hYdC4vSbL5ZWxlcVq1MiYqZNcqkk7UnTBm3crXXaNBfXeRkbl9kJh_aFCaVfV-VYd6FUraflx_gLSN1JnMcxr3PK9REoYqgT7GQ22uRQBLYc1gxOljA34F6IV30/h120/ajax-loader.gif) no-repeat left top;width:32px;height:32px;}
.slideshow_skitter_large {width:630px;height:400px;}
</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><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJWm0kBYJOlIplx6m6DgLTvaWJJOpHHNR3-E4T9OQmh7MISwm5_ImXlUn6Xwxm-5ZGq_OoEDw7hNLOSM-3NSdHViT65sKu_n2Vhc_4QERtt1GDl8hpd897UtsC4BecqJNMdO1ko2udP2o/w1021-h638-no/11.jpg" class="cube" alt="Faceblog Evolutions" title="Faceblog Evolutions"/><div class="label_text"><p></p></div></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0CtdvyVzVK870MbOwgwoBVuq3PsoBc3I2TisMaFGhZobytzibrKKlZeXW3R4Hz9Q5B_1oY22kybhPVPgpjpk94SuvI-2N2rXoLIPrh0V9FD8U_l-2iyLz4j9-cyYzacC1AmSA0Moj6pQ/w1021-h638-no/10.jpg" class="fade" alt="Faceblog Evolutions" title="Faceblog Evolutions"/><div class="label_text"><p></p></div></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcfNlVL5qfJUy4nk9koRoqEIlRplQZYA73RLh5ZPvkiZOvzTuaKtIScDEdFFq4qnAMEoi0yYHAQ73vYCJ7wVZQWJaB84aN9eJX4C0VPcNX2qb8JZnquOHKXI3slrjFaMY01BoL6srjjPc/w1021-h638-no/09.jpg" class="showBarsRandom" alt="Faceblog Evolutions" title="Faceblog Evolutions"/><div class="label_text"><p></p></div></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZdzU8hAkQOb_4cG9RcdXk8oDW12lGvBmlXFQgqe6OdkyJl-0zllVvpdD5KHhKogzLTZlLJxxczkYhXV14m5PRc0rL4SDIviUZb8Um510CkXea66Vwgaccr8mc2b-xjMAS5okSEmZO590/w1021-h638-no/07.jpg" class="blind" alt="Faceblog Evolutions" title="Faceblog Evolutions"/><div class="label_text"><p></p></div></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyjH0JW8fa_WVpDW0-5o6iyvOTbcsHYQ1W34QcKWRQpEzz_Rgc0Sr6Q-h5q5USEx3gQjWTLJsyW0LBJf5fck86twlCypJVL9qhKnXyKbzDCoglh7V0pOYsumN76i3c8Tn7wAgNTXOHocY/w1021-h638-no/08.jpg" class="paralell" alt="Faceblog Evolutions" title="Faceblog Evolutions"/><div class="label_text"><p></p></div></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRQO0UtwirKaO5MjgePVICOeTwK-stDiZ5qTJ1SS0j-vKP2lVTDMuUjSnVzlZrPicFn8jrIkS3n1GBDs2Ki3zsD4axo9aTAbQuDNI8sZspL9zQNL9jLu8qZbaF97UjDF0Zch7F1k1pYi0/w1021-h638-no/05.jpg" class="blindHeight" alt="Faceblog Evolutions" title="Faceblog Evolutions"/><div class="label_text"><p></p></div></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6Laa4V15toh6pelikACQkpJpyJzdnSX_YlaPQ3muR0H3UelCaadG6YEoI0aUzsaxIJebGn5iNpf3Jf22pzlPYpEO3YjFY_3WfYj52vU_r3pod-b2Kt9UZ6lrybLKx9HxSKa9TTp8qhNU/w1021-h638-no/06.jpg" class="fadeFour" alt="Faceblog Evolutions" title="Faceblog Evolutions"/><div class="label_text"><p></p></div></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigyWeDAlt-tH8rYA0FAPgDRxUgmW4CmD1oGzNCdnnrpb7FWwi2f1qC14DQ86nO_3jcFwaGf2kzsOUC8tV9zrHZNmOom0OZnXFKwsNktAcRqEyLjKFdRiNitJJiwP4MtSUInt5TUGPaoVs/w1021-h638-no/02.jpg" class="directionBottom" alt="Faceblog Evolutions" title="Faceblog Evolutions"/><div class="label_text"><p></p></div></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYjTyKw4SpvkrjWR_TkGZwWpmCy3ifdaMzwgckGZx6-2sDf2kT5VRJ5A9oBZtR2ZjyyERx6tABg7nIOvmbcViGdios9Yg4Ami2UjmgTZIEvsDzytaM8DMxM7SUVoBznAID7f63DjcuFPo/w1021-h638-no/03.jpg" class="cubeStopRandom" alt="Faceblog Evolutions" title="Faceblog Evolutions"/><div class="label_text"><p></p></div></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga3pOCKB5AirQqTisrAxci3oZF9FXODRZ48Y_ENU7VhL3e1UuJZqGG7aDrkPacTJpWFWYmqifNYeU9FKkXyyh2wpjBmPDqT_cKBUajNF1T9MHAFs3hEXaz45mtOuoj8_N-v_sJi2xhZj4/w1021-h638-no/01.jpg" class="cubeSpread" alt="Faceblog Evolutions" title="Faceblog Evolutions"/><div class="label_text"><p></p></div></li>
</ul>
</div>
</div>
: Ukuran poto/gambar (Sesuikan)
: Ukuran slideshow (Sesuikan dengan ukuran yang anda kehendaki)
: Url gambar (Silahkan ganti url gambar milik anda)
: Efek Transisi ( efek transisi yang lain : "directionLeft" | "directionRight" | "directionTop" |
"blindWidth" | "fadeFour" | "tube" | "showBarsRandom" | "showBars" | "horizontal" | "cubeSize" | "cubeHide" | "cubeStop" | "block" | "cubeRandom" | .
Dari tulisan yang saya blok dengan warna-warna tersebut itulah yang harus anda ganti, Bahkan anda bisa lebih kreative dengan mengoprek lagi untuk menambah keindahanya karena saya yakin anda lebih creative dari saya.
Selamat Mencoba, Semoga hal yang sederhana bisa berguna.
Custom Search
Share this Article with your friends
Tag :
Catatan NgeBlog
0 Komentar untuk "CARA MEMBUAT SLIDESHOW DI BLOG"