Slideshow Otomatis Blogger dengan TinyCarousel (Custom)

Pembaharuan: 25 November 2013

Menjawab permintaan dari It's a Hardlife, Saya mencoba untuk memodifikasi JQuery Carousel yang sederhana karena slideshow versi Agile Carousel itu terlalu rumit. Saya mengambil TinyCarousel sebagai bahan utama, yang pada awalnya hanya berupa slideshow gambar biasa untuk dimodifikasi lagi sesuai dengan tata letak slideshow Agile Carousel sehingga setiap slide menjadi lebih kaya akan konten:

Lihat Demo

---

Tahap 1: Mengedit Templat

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

Mengedit HTML

Temukan kode ini:

]]></b:skin>

Salin kode di bawah ini, kemudian letakkan di atasnya:

/*!
 * Custom TinyCarousel for Blogger by Taufik Nurrohman
 * Visit: http://www.dte.web.id
 */

.tinycarousel {
  overflow:hidden;
  font:normal normal 10px/12px Arial,Sans-Serif;
  color:#666;
  margin:0 auto;
}
.tinycarousel-viewport {
  overflow:hidden;
  position:relative;
  background-color:#eee;
  border:1px solid #ccc;
  margin:0 auto;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
}
.tinycarousel-overview {
  list-style:none;
  margin:0;
  padding:0;
  position:absolute;
  left:0;
  top:0;
}
.tinycarousel-overview li {
  list-style:none;
  float:left;
  padding:0;
  height:auto;
  background-color:white;
  color:#666;
}
.tinycarousel-inner {
  padding:10px;
  border:1px solid #ccc;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  overflow:hidden;
  position:relative;
}
li .tinycarousel-inner {padding-bottom:48px}
.tinycarousel-image {
  display:block;
  width:100%;
  height:auto;
  border:none;
  outline:none;
  margin:0;
  padding:0;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
}
.tinycarousel-title {
  font:normal bold 11px/100% Verdana,Tahoma,Arial,Sans-Serif;
  color:#39f;
  margin:0 0 6px;
  padding:10px 0 0;
  background:none;
}
.tinycarousel-title a {
  color:inherit;
  text-decoration:none;
  border:none;
}
.tinycarousel-summary {
  margin:0;
  padding:0;
  overflow:hidden;
}
.tinycarousel-footer {
  color:#aaa;
  background-color:#333;
  background-image:-webkit-linear-gradient(#555,#333);
  background-image:-moz-linear-gradient(#555,#333);
  background-image:-ms-linear-gradient(#555,#333);
  background-image:-o-linear-gradient(#555,#333);
  background-image:linear-gradient(#555,#333);
  padding:0 10px;
  height:24px;
  line-height:24px;
  overflow:hidden;
  position:absolute;
  right:0;
  bottom:0;
  left:0;
}
.tinycarousel-footer-date {bottom:24px}
.tinycarousel-navigation {
  display:block;
  background-color:white;
  border:1px solid #ccc;
  margin:2px auto 0;
  overflow:hidden;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
}
.tinycarousel-navigation .tinycarousel-inner {border:none}
.tinycarousel-button {
  background-color:#666;
  padding:2px 5px;
  overflow:hidden;
  position:relative;
  float:left;
  margin:0 2px 0 0;
  color:white;
  text-decoration:none;
  font-weight:bold;
  text-align:center;
}
.tinycarousel-navigation .disable {display:none}
.tinycarousel-button:active {background-color:#900}
.tinycarousel-total-posts {
  float:right;
  margin:2px 5px 0 0;
  font-weight:bold;
  font-size:120%;
}

/* Orientasi Vertikal */
.tinycarousel.vertical .tinycarousel-overview li {
  float:none;
  display:block;
}
.tinycarousel.vertical .tinycarousel-button,
.tinycarousel.vertical .tinycarousel-total-posts {
  float:none;
  display:block;
  margin:0 0 2px;
}
.tinycarousel.vertical .tinycarousel-button.disable {display:none}
.tinycarousel.vertical .tinycarousel-total-posts {
  text-align:center;
  margin-top:10px;
  margin-bottom: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

Salin kode di bawah ini kemudian letakkan di dalam formulirnya:

<div id="tinycarousel-container" class="tinycarousel"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var tinycarousel_config = {
    url: 'http://nama_blog.blogspot.com',
    numPosts: 12,
    labelName: null,
    containerId: 'tinycarousel-container',
    newTabLink: false,
    summaryLength: 100,
    monthArray: [
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    noImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC',
    nav: {
        prevText: '&lt;',
        nextText: '&gt;',
        showText: 'Menampilkan {num} Posting'
    },
    carousel: {
        axis: "x",
        itemwidth: 200,
        itemheight: 370,
        itemmargin: 5,
        itempadding:10,
        visible: 4,
        display: 1,
        start: 1,
        interval: true,
        intervaltime: 3000,
        animation: true,
        duration: 1000,
        easing: "swing",
        callback: function() {}
    }
};
</script>
<script src="http://dte-project.googlecode.com/svn/trunk/blogger-tinycarousel.js"></script>

Ganti URL http://nama_blog.blogspot.com dengan alamat blog Anda lalu klik 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.
numPosts	Digunakan untuk menentukan jumlah posting yang ingin ditampilkan.
labelName	Ganti nilainya menjadi nama label untuk menampilkan posting dengan label yang spesifik. Misalnya, menentukan nilai labelName: "Widget" akan membuat widget ini menampilkan posting berlabel Widget saja.
containerId	ID kontainer penampung widget.
newTabLink	Ganti nilainya menjadi true untuk membuat semua tautan terbuka di tab/jendela baru secara otomatis.
summaryLength	Digunakan untuk menentukan panjang ringkasan posting.
monthArray	Daftar nama-nama bulan sesuai dengan sistem penanggalan di negaramu.
noImage	URL gambar thumbnailgambar kecil pengganti untuk posting yang tidak memiliki gambar.
nav => prevText	Teks navigasi mundur.
nav => nextText	Teks navigasi maju.
nav => showText	Teks indikator jumlah posting.
carousel => axis	Ganti nilainya menjadi "y" untuk menampilkan carousel vertikal.
carousel => itemwidth	Digunakan untuk menentukan lebar masing-masing item carousel.
carousel => itemheight	Digunakan untuk menentukan tinggi masing-masing item carousel.
carousel => itemmargin	Digunakan untuk menentukan margin masing-masing item carousel.
carousel => itempadding	Digunakan untuk menentukan padding masing-masing item carousel.
carousel => visible	Digunakan untuk menentukan jumlah item yang ingin ditampilkan dalam satu baris.
carousel => display	Digunakan untuk menentukan jumlah item yang akan tergeser dalam satu kali gerakan.
carousel => start	Digunakan untuk menentukan indeks permulaan item (normalnya dimulai dari indeks pertama).
carousel => interval	Ganti nilainya menjadi false untuk membuat animasi berjalan secara manual (dengan cara mengeklik tombol navigasi).
carousel => intervaltime	Digunakan untuk menentukan waktu interval animasi (hanya berlaku jika opsi interval bernilai true).
carousel => animation	Ganti nilainya menjadi false untuk mematikan efek animasi.
carousel => duration	Digunakan untuk menentukan kecepatan animasi.
carousel => easing	Digunakan untuk menentukan tipe easing animasi.
carousel => callback	Fungsi bebas yang bisa Anda terapkan pada widget ini yang akan bekerja setiap kali slide berganti.

Contoh Pengaturan Carousel Vertikal

Perhatikan pada bagian-bagian yang Saya tandai:

var tinycarousel_config = {
    ...
    nav: {
        prevText: '▲',
        nextText: '▼',
        showText: 'Menampilkan {num} Posting'
    },
    carousel: {
        axis: "y",
        itemwidth: 200,
        itemheight: 370,
        itemmargin: 5,
        itempadding:10,
        visible: 1,
        display: 1,
        start: 1,
        interval: true,
        intervaltime: 3000,
        animation: true,
        duration: 1000,
        easing: "swing",
        callback: function() {}
    }
};

Lihat Demo