Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

Slideshow Otomatis Blogger dengan SLIDES

Pembaharuan: 1 Desember 2013

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:

Edit HTML Blogger
Mengedit HTML.

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:

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="//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.

Kode yang Saya beri garis bawah adalah jQuery. Jika tema 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 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

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 31 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!