Slideshow Otomatis Blogger dengan SLIDES

Saya menggunakan versi terakhir dari SLIDES yaitu pada 5 Februari 2013 (versi 1.2.0):

Lihat Demo

Tahap 1: Mengedit Tema 

Untuk membuatnya, pertama-tama masuklah ke menu Tema kemudian klik Edit HTML dan klik Lanjutkan:

Temukan kode ini:

]]></b:skin>

Salin kode di bawah ini, kemudian letakkan di atasnya:

/*! SlidesJS for Blogger by Taufik Nurrohman <http://gplus.to/tovic> */

/* Main */
.slidesJS-frame {
  width:739px;
  height:341px;
  background:transparent url('http://lh5.googleusercontent.com/-CPP57QQsIKk/UpnvzwVwYwI/AAAAAAAAIYs/WpSvq-mh9bQ/s1600/slidesJS-frame.png') no-repeat 50% 50%;
  margin:0 auto;
}
.slidesJS {
  background-color:#F0F0F0;
  position:relative;
  top:18px;
  left:84px;
}
.slidesJS-container {
  position:relative;
  overflow:hidden;
  display:none;
}

/* Next & Prev */
.slidesJS-next,
.slidesJS-prev {
  position:absolute;
  top:50%;
  left:-39px;
  width:24px;
  height:43px;
  margin-top:-21px;
  background:transparent url('http://lh6.googleusercontent.com/-GRIwFsYLCCE/UpntR8pxmrI/AAAAAAAAIYQ/x4DQEB7bDbI/s1600/slidesJS-arrow-prev.png') no-repeat 50% 50%;
  display:block;
  overflow:hidden;
  text-indent:-9999px;
}
.slidesJS-next {
  background-image:url('http://lh6.googleusercontent.com/-kgnU17H_E6M/UpnsAEhoiZI/AAAAAAAAIYA/NxTUozUJ8Cc/s1600/slidesJS-arrow-next.png');
  right:-39px;
  left:auto;
}

/* Pagination */
.slidesJS-pagination {
  list-style:none;
  margin:26px auto 0;
  padding:0;
  width:auto;
  text-align:center;
}
.slidesJS-pagination li {
  display:inline-block;
  *display:inline;
  margin:0 1px;
  padding:0;
  list-style:none;
}
.slidesJS-pagination a {
  display:block;
  width:12px;
  height:12px;
  background: transparent url('http://lh3.googleusercontent.com/-QltA5Dq8IbM/UpnwkpOTW5I/AAAAAAAAIZE/Dp3_T14wmaI/s1600/slidesJS-pagination.png') 50% 0;
  text-indent:-999px;
  overflow:hidden;
}
.slidesJS-pagination li.current a {background-position:0 -12px}

/* Caption */
.slidesJS-caption {
  display:none;
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  z-index:500;
  padding:5px 20px 10px;
  background-color:black;
  background-color:rgba(0,0,0,.5);
  font:normal normal 13px/1.33 Helmet,Freesans,Sans-Serif;
  color:white;
  border-top:1px solid black;
  text-shadow:none;
}
.slidesJS-title a {
  color:white;
  text-decoration:none;
}
.slidesJS-title a:focus,
.slidesJS-title a:hover {text-decoration:underline}
.slidesJS-meta:before {content:" - "}
.slidesJS-meta-comment {display:none}

/* Ribbon */
.slidesJS-ribbon {
  display:block;
  /* display:none; <= uncomment this declaration to hide the ribbon */
  width:112px;
  height:112px;
  position:absolute;
  top:-19px;
  left:-19px;
  z-index:500;
  background:transparent url('http://lh5.googleusercontent.com/-m3mnN0lLn-c/UpnwqLR_vMI/AAAAAAAAIZM/fyQzMaLIfao/s1600/slidesJS-ribbon.png') no-repeat 0 0;
}

Klik Simpan Tema.

Tahap 2: Meletakkan Slideshow 

Masuklah ke menu Tata Letak kemudian tambahkan sebuah elemen halaman HTML/JavaScript yang terletak di bagian atas posting:

Salin kode di bawah ini kemudian letakkan di dalam formulirnya:

<div class="slidesJS-frame" id="slidesJS-frame">
    <div class="slidesJS" id="slidesJS"></div>
</div>
<div style="clear:both;"></div><script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script>
var slidesJS_config = {
    url: 'http://nama_blog.blogspot.com',
    numPost: 7,
    labelName: null,
    monthArray: [
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    noImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC',
    newTabLink: false,
    containerId: 'slidesJS',
    slider: {
        width: 570,
        height: 270,
        preload: true,
        preloadImage: "//lh3.googleusercontent.com/-SrchH_T_dag/UpnwHVaUkCI/AAAAAAAAIY4/kAG7IM7kMT8/s1600/slidesJS-loading.gif",
        generateNextPrev: true,
        nextText: "Berikutnya",
        prevText: "Sebelumnya",
        pagination: true,
        generatePagination: true,
        prependPagination: false,
        fadeSpeed: 350,
        fadeEasing: "",
        slideSpeed: 350,
        slideEasing: "",
        start: 1,
        effect: "slide",
        crossfade: false,
        randomize: false,
        play: 5000,
        pause: 0,
        hoverPause: true,
        bigTarget: false,
        animationStart: function(current) {
            $('.slidesJS-caption', '.' + this.container).slideUp(100);
        },
        animationComplete: function(current) {
            $('.slidesJS-caption', '.' + this.container).slideDown(200);
        },
        slidesLoaded: function() {
            $('.slidesJS-caption', '.' + this.container).slideDown(200);
        }
    }
};
</script>
<script src="//dte-project.googlecode.com/svn/trunk/blogger-slidesjs.js"></script>

Ganti kode yang Saya beri tanda dengan alamat blog Anda lalu simpan.

Konfigurasi Widget 

Contoh Penerapan Efek Fade 

var slidesJS_config = {
    ...
    slider: {
        ...
        fadeSpeed: 350,
        fadeEasing: "",
        effect: "fade",
        ...
    }
};

Lihat Demo

Contoh Penerapan Easing 

Untuk menerapkan efek percepatan kustom, plugin Easing jQuery dibutuhkan di sini:

var slidesJS_config = {
    ...
    slider: {
        ...
        slideSpeed: 1000,
        slideEasing: "easeInOutBack",
        effect: "slide",
        ...
    }
};

Lihat Demo

Contoh Penerapan crossfade: true 

var slidesJS_config = {
    ...
    slider: {
        ...
        fadeSpeed: 350,
        fadeEasing: "",
        effect: "fade",
        crossfade: true        ...
    }
};

Lihat Demo

Tema Polos untuk Modifikasi 

Kode CSS ini adalah kode minimal untuk pembentukan tata letak slideshow. Selebihnya bisa dimodifikasi sesuai dengan desain tema:

/* Main */
.slidesJS-frame {
  background-color:white;
  width:570px; /* samakan dengan lebar slideshow */
  height:270px; /* samakan dengan tinggi slideshow */
  border:4px solid black;
  margin:0 auto;
}
.slidesJS {
  background-color:#f0f0f0;
  position:relative;
  font:normal normal 11px/normal Helmet,Freesans,Sans-Serif;
}
.slidesJS-container {
  position:relative;
  overflow:hidden;
  display:none;
}

/* Next & Prev */
.slidesJS-next,
.slidesJS-prev {
  display:block;
  float:left;
  background-color:black;
  color:white;
  font-weight:bold;
  text-decoration:none;
  height:20px;
  line-height:20px;
  padding:0 7px;
  margin:8px 0 0;
  overflow:hidden;
}
.slidesJS-next {float:right}

/* Pagination */
.slidesJS-pagination {
  list-style:none;
  margin:8px auto 0;
  padding:0;
  width:auto;
  text-align:center;
}
.slidesJS-pagination li {
  list-style:none;
  display:inline-block;
  *display:inline;
  margin:0 2px;
  padding:0;
}
.slidesJS-pagination a {
  display:block;
  background-color:black;
  color:white;
  font-weight:bold;
  text-decoration:none;
  height:20px;
  line-height:20px;
  padding:0 7px;
  overflow:hidden;
}
.slidesJS-next:hover,
.slidesJS-prev:hover,
.slidesJS-pagination li.current a {background-color:blue}

/* Caption */
.slidesJS-caption {
  display:none;
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  z-index:500;
  padding:8px 10px 10px;
  background-color:black;
  background-color:rgba(0,0,0,.5);
  font:normal normal 13px/1.33 Helmet,Freesans,Sans-Serif;
  color:white;
}
.slidesJS-title a {
  color:white;
  text-decoration:none;
}
.slidesJS-title a:focus,
.slidesJS-title a:hover {text-decoration:underline}
.slidesJS-meta:before {content:" - "}
.slidesJS-meta-comment {display:none}

/* Ribbon */
.slidesJS-ribbon {display:none}

Lihat Demo