Slideshow Otomatis Blogger dengan SLIDES

Pembaharuan: 1 Desember 2013

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

Lihat Demo

Tahap 1: Mengedit Template

Untuk membuatnya, pertama-tama masuklah ke menu Template 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI4ulqecExOa1GT8wdRP51jLehNXwDR4RgqY9EGyCGX_Z8lK_ay4hyphenhyphenjzi-04EQ0euSVOscR1UDDYbX005bY-NmISFlUdQowv4N9E1JA6eZKP0657-oAnlVfFu0obasn-m4xsbPfS2OhzA/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHZxZJUq7C6xLaS4z0FgDuyStL45PLcmgZEAoVwRo9mFRpxdkrjeCq7UbSHw52O6U8SqiC-No0ROQTvBDeYetsI2Pe3pTqKLXRUwdx9XhdIavcCEr5AIhO8CH9muvZ1IzX0kXsHGbmgg4/s1600/slidesJS-arrow-prev.png') no-repeat 50% 50%;
  display:block;
  overflow:hidden;
  text-indent:-9999px;
}
.slidesJS-next {
  background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXmqSn_ab1pRpjla_RJ_TkDX53wGz7A3NSaEJyiEx9GTsttdNvyBsZxjQins3HTIMkxEnVqaVCN4NMuwQ27ixulayTzFWuuvEoePCOoHxdJt9KC085_NFnJe4KRLzIBLj1qO45uGn6TM8/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ka0-PQ1hinAKA1_3eN6FmlLwFuuNZz3OMx8pFtaM0QjAlf7E04yU6tlIson7Nxc8DcPlnaRw6mjmIX1u1sJR2OUkgEnLe5HNtdh-XnoHtZyN5j3jZ89RfMDLiWwu4Qz8xVTVjYa2n0k/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcNjUy7M2a5ZC0e9i4Vr1mVHJ97EfPwTjIW2jeLcsvmxbFoCHIHD_xrHUM2mcaKwLm4pZ9N86Wp8DlKcpRiSgWzqrR_Lqr6NgLs50Y4fTqgYx8m1KVAxSL_kp7zy2LrFNs_OpgAir-nFE/s1600/slidesJS-ribbon.png') no-repeat 0 0;
}

Klik Simpan Template.

Tahap 2: Meletakkan Slideshow

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

Menambahkan Widget — Menambahkan widget.

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="http://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: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDHgPl2ViEcw3Rd4YpTJnMcSCOu0WaW5YfBt4wnQPJcj5dpPn4w-TiID8XihNt31fhLXejbT6qzXTZA7g6omnRzvtfWDWv-3XQOyaxFUe_KSJ0PGJD879PIQnkOK76E72_CVHXzeVSv4M/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="http://dte-project.googlecode.com/svn/trunk/blogger-slidesjs.js"></script>

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

Kode yang Saya beri garis bawah adalah JQuery. Jika templat Anda sudah dilengkapi dengan JQuery, singkirkan kode tersebut!

Konfigurasi Widget

Opsi	Keterangan
url	Ganti nilainya dengan URL blog Anda.
numPost	Digunakan untuk menentukan jumlah posting yang ingin ditampilkan.
labelName	Ganti nilainya dengan nama label untuk menampilkan posting berlabel spesifik. Misalnya `labelName: "JQuery"` akan membuat slideshow hanya menampilkan posting yang memiliki label JQuery.
monthArray	Daftar nama-nama bulan sesuai dengan sistem penanggalan di negaramu.
noImage	URL gambar cadangan untuk posting yang tidak memiliki gambar.
newTabLink	Jika bernilai `true`, semua tautan pada slideshow akan membuka ke tab/jendela baru secara otomatis ketika diklik.
containerId	ID kontainer penampung widget.
slider => width	Digunakan untuk menentukan lebar slideshow.
slider => height	Digunakan untuk menentukan tinggi slideshow.
slider => preload	Jika bernilai `false`, efek animasi akan dimulai segera sesaat ketika JSON berhasil dimuat. Ini akan membuat halaman seolah termuat lebih cepat. Hanya saja, karena animasi dimulai terlalu cepat (sebelum semua gambar termuat) akibatnya itu akan membuat animasi slideshow menjadi tidak rapi pada saat permulaan.
slider => preloadImage	URL gambar animasi memuat slideshow.
slider => generateNextPrev	Jika bernilai `false`, navigasi Next & Prev tidak akan tampil.
slider => nextText	Label navigasi Next.
slider => prevText	Label navigasi Prev.
slider => generatePagination	Jika bernilai `false`, navigasi 1, 2, 3, … tidak akan tampil.
slider => prependPagination	Opsi untuk menyisipkan navigasi angka dari sebelah atas slideshow. Secara normal, navigasi angka akan disisipkan dari sebelah bawah.
slider => fadeSpeed	Digunakan untuk menentukan kecepatan animasi jika opsi `effect` bernilai `"fade"`.
slider => fadeEasing	Digunakan untuk menentukan easing animasi jika opsi `effect` bernilai `"fade"`.
slider => slideSpeed	Digunakan untuk menentukan kecepatan animasi jika opsi `effect` bernilai `"slide"`.
slider => slideEasing	Digunakan untuk menentukan easing animasi jika opsi `effect` bernilai `"slide"`.
slider => start	Digunakan untuk menentukan urutan slide yang akan ditampilkan pertama kali.
slider => effect	Digunakan untuk menentukan tipe efek animasi. Pilihannya ada dua: slide dan fade.
slider => crossfade	Digunakan untuk menentukan apakah efek perpindahan slide (khusus efek `fade`) akan dilakukan dengan cara memudarkan slide yang tampil, kemudian pada saat yang bersamaan menampilkan slide setelahnya (`true`) atau dengan cara memudarkan slide yang tampil, menunggu sampai efek pemudaran berakhir, lalu slide berikutnya ditampilkan (`false`).
slider => randomize	Jika bernilai `true`, maka plugin akan berusaha untuk mengacak urutan slide.
slider => play	Digunakan untuk menentukan lama waktu berhenti sementara setelah animasi terjadi.
slider => pause	Digunakan untuk menentukan lama waktu berhenti sementara setelah pengguna mengeklik tombol navigasi.
slider => bigTarget	Jika bernilai `true` setiap gambar pada slide akan berfungsi sebagai navigasi. Ketika gambar tersebut diklik, maka slide berikutnya akan tampil.
slider => animationStart	Opsi untuk menerapkan fungsi bebas yang akan bekerja ketika animasi perpindahan slide dimulai.
slider => animationComplete	Opsi untuk menerapkan fungsi bebas yang akan bekerja ketika animasi perpindahan slide selesai.
slider => slidesLoaded	Opsi untuk menerapkan fungsi bebas yang akan bekerja ketika slideshow telah berhasil termuat.

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 templat:

/* 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