Mecha versi 2.6.3 sudah dirilis!

Slideshow Otomatis Blogger dengan TinyCarousel (Custom)

Tabel Konten
  1. Tahap 1: Mengedit Tema 
  2. Tahap 2: Meletakkan Slideshow 
  • Konfigurasi Widget 
    1. Contoh Pengaturan Carousel Vertikal 
  • 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 

    OpsiKeterangan
    urlGanti nilainya dengan URL blog Anda.
    numPostsDigunakan untuk menentukan jumlah posting yang ingin ditampilkan.
    labelNameGanti 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.
    containerIdID kontainer penampung widget.
    newTabLinkGanti nilainya menjadi true untuk membuat semua tautan terbuka di tab/jendela baru secara otomatis.
    summaryLengthDigunakan untuk menentukan panjang ringkasan posting.
    monthArrayDaftar nama-nama bulan sesuai dengan sistem penanggalan di negaramu.
    noImageURL gambar thumbnail pengganti untuk posting yang tidak memiliki gambar.
    nav => prevTextTeks navigasi mundur.
    nav => nextTextTeks navigasi maju.
    nav => showTextTeks indikator jumlah posting.
    carousel => axisGanti nilainya menjadi "y" untuk menampilkan carousel vertikal.
    carousel => itemwidthDigunakan untuk menentukan lebar masing-masing item carousel.
    carousel => itemheightDigunakan untuk menentukan tinggi masing-masing item carousel.
    carousel => itemmarginDigunakan untuk menentukan margin masing-masing item carousel.
    carousel => itempaddingDigunakan untuk menentukan padding masing-masing item carousel.
    carousel => visibleDigunakan untuk menentukan jumlah item yang ingin ditampilkan dalam satu baris.
    carousel => displayDigunakan untuk menentukan jumlah item yang akan tergeser dalam satu kali gerakan.
    carousel => startDigunakan untuk menentukan indeks permulaan item (normalnya dimulai dari indeks pertama).
    carousel => intervalGanti nilainya menjadi false untuk membuat animasi berjalan secara manual (dengan cara mengeklik tombol navigasi).
    carousel => intervaltimeDigunakan untuk menentukan waktu interval animasi (hanya berlaku jika opsi interval bernilai true).
    carousel => animationGanti nilainya menjadi false untuk mematikan efek animasi.
    carousel => durationDigunakan untuk menentukan kecepatan animasi.
    carousel => easingDigunakan untuk menentukan tipe easing animasi.
    carousel => callbackFungsi bebas yang bisa Anda terapkan pada widget ini yang akan bekerja setiap kali slide berganti.

    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

    72 Komentar

    Unknown

    kang, mau tanya nih kalo di buat responsive css yg harus di ubah apa ? soalnya kn setting lebar nya otomatis lewat tinycarousel-container itemwidth ??
    Thx kang..

    Taufik Nurrohman

    Tidak bisa. Slideshow ini sejak awal memang tidak responsif.

    Unknown

    okle, kang.. sampean ada referensi ga buat slideshow yg responsive

    Taufik Nurrohman

    Sebenarnya kalau orang nggak pada “berat” buka situs www.google.com tidak akan susah.

    Rusli Cikoang

    assalamu alaikum .....
    terima kasih dik dengan widgetnya ,
    moga tetap sehat .

    Unknown

    kok yang tinycarouselnya yg kena cuman 1 ya??

    
    var multiFeed = {
    feedsUri: [
    {
    name: "Judul Widget 1",
    url: "http://dte-feed.blogspot.com/",
    tag: "Efek"
    },
    {
    name: "Judul Widget 2",
    url: "http://dte-feed.blogspot.com/",
    tag: "Widget"
    },
    {
    name: "Judul Widget 1",
    url: "http://dte-feed.blogspot.com/",
    tag: "Slideshow"
    }
    ],
    numPost: 7,
    showThumbnail: true,
    showSummary: true,
    summaryLength: 80,
    titleLength: "auto",
    thumbSize: 72,
    containerId: "tinycarousel-container",
    readMore: {
    text: "Selengkapnya",
    endParam: "?max-results=20"
    },
    nav: {
    prevText: '&lt;',
    nextText: '&gt;',
    },
    carousel: {
    axis: "x",
    itemwidth: 100,
    itemheight: 100,
    itemmargin: 5,
    itempadding:10,
    visible: 2,
    display: 1,
    start: 1,
    interval: true,
    intervaltime: 3000,
    animation: true,
    duration: 1000,
    easing: "swing",
    callback: null
    }
    };

    JS Lanjutannya :
    http://pastebin.com/raw.php?i=ha4Ar4pL

    maaf merepotkan
    terima kasih

    Taufik Nurrohman

    Kamu mikirnya widget ini bisa dipakai seperti widget ini ya? Tidak bisa mas :p

    Unknown

    iya engga bisa ternyata wkwkwk...btw thx udah jawab

    Unknown

    bagaimana jika saya ingin mengubahnya menjadi related posting mas,yang berada dibawah posting