Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

Slideshow Otomatis Blogger dengan TinyCarousel (Custom)

Pembaharuan: 25 November 2013

Custom TinyCarousel for Blogger

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

/*!
 * 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 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 id="tinycarousel-container" class="tinycarousel"></div><script src="//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="//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 tema 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 thumbnail 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: '&#9650;',
        nextText: '&#9660;',
        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

  

Berlangganan

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

 72 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!