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

    • Ijal Fauzi

      Keren mas, tapi carousel kayaknya lebih cocok untuk menampilkan gambar saja deh, ngga pake summary postnya. Overall sip :D Saya baru nyoba pelajarin carousel dari anshlul dudeja di template portofolio nya aja. wkwk

    • Taufik Nurrohman

      @Ijal Fauzi Nggak apa-apa. Lagipula Saya menargetkan carousel ini untuk blog-blog bertema berita saja kok, bukan galeri, portfolio atau fotografi.

    • Putra

      konfigurasinya caranya masang di atas /head mas??
      masih bingung :(

    • Taufik Nurrohman

      @Alam Perwira ??? :\

    • Putra

      @Taufik Nurrohmanudah tau dink mas :D tpi kok punya saya cuman muncul 1slide saja ya?? :\
      coba dicek mas http://al4m-blog.blogspot.com/

    • Taufik Nurrohman

      @Alam Perwira Saya cek menggunakan firebug ada semua kok isinya:

      Coba hapus kode ini. Ini khan JQuery juga, URLnya memang berbeda, tapi isinya sama (uncompressed):

      <script src='http://code.jquery.com/jquery-latest.js'></script>
    • Putra

      @Taufik Nurrohmanoaaalah, tenan to?? aku udah nebak loadernya. tp gak berani hapus, kirain beda mas :D

      wokeee, mancep mas.. :D
      biar blognya rame pakai ini aja didepan header.. awakwkawk, thanks berat ilmunya mas :)
      Sukses selalu..

    • Games Lover

      Alhamdulillah akhirnya mas taufik memenuhi permintaan saya, langsung mau praktek dulu mas. Nanti kalo kesulitan mohon bantuannya... terimaksih sekali lagi

    • Taufik Nurrohman

      @Alam Perwira Amiin...
      Itulah sebabnya kenapa di sini Saya tidak capek-capeknya memperingatkan bahwa saat memasang widget sejenis seperti ini, selalu pastikan bahwa JQuery tidak lebih dari satu. Cukup satu saja untuk selamanya, meskipun versinya berbeda, ambil satu saja yang paling baru dan buang yang lainnya.

    • Unknown

      mantap sob...!

      aq jg mau dunk dipenuhi permintaan sy.., permintaan sy simple aja bro, gmn carax menempatkan form untuk komentar diatas para komentator (apalah namax itu).., tlg ya bro.., terima kasih banyak :)

    • Games Lover

      @It's a Hardlife
      Berhasil dengan sukses mas Taufik, tapi kalau mau menampilkan hanya judulnya saja tanpa summary bagaimana ya mas?

    • Taufik Nurrohman

      @It's a Hardlife Pertama set nilai dua variabel ini menjadi false:

      showPostDate_g  = false;
      showComm_g      = false;

      lalu set elemen paragraf menjadi display:none:

      #tinycarousel p {
      display:none;
      }
    • Taufik Nurrohman

      @Rohis Facebook Wkwkwk... kaget Aku, fotomu kembar ^_^
      Ya, tapi bukan sekarang. Sedang ada satu hal lagi yang ingin Saya selesaikan mengenai eksperimen emoticon ini.

    • Taufik Nurrohman

      @Rohis Facebook Ini dia hasil akhir dari eksperimen emoticon Saya: http://hompimpaalaihumgambreng.blogspot.com/2012/03/jquery-auto-emoticons-for-blogger.html
      Dan ini adalah posting tentang bagaimana cara meletakkan formulir komentar di bagian atas daftar komentar: http://hompimpaalaihumgambreng.blogspot.com/2012/03/format-formulir-komentar-di-atas-daftar.html
      Semoga bisa membantu :)

    • admin

      mas, bagaimana caranya supaya judul di slide nya kalau di sentuh dengan cursor warna judulnya berubah,,
      tolong pencerahannya terimakasih mas :)

    • Taufik Nurrohman

      @mr, copas Tepat di bawah kode ini:

      #tinycarousel h6 a {
      color:#39f;
      text-decoration:none;
      border:none;
      }

      tambahkan kode ini:

      #tinycarousel h6 a:hover {
      color:yellow; /* Warna saat pointer berada di atas judul */
      }
    • Setio Aji

      Udah saya prakttekan di blog tapi kenapa yang keluar cuma gambar warna pelangi, seperti profil Rohis Facebook diatas ya gan? Padahal gambar udah diupload lewat blogger langsung... mohon bantuannya

    • Taufik Nurrohman

      @Unknown Itu karena pengaturan feed blog yang dibatasi. Coba masuk ke dasbor Blogger, klik Pengaturan/Setelan ⇒ Lainnya
      Lihat pada bagian umpan situs. Coba ubah nilainya menjadi "penuh" atau "sampai lompat baris" lalu simpan:

      Widget tidak akan bekerja kalau kita menonaktifkan feed blog, karena sebagian besar widget Blogger mengunakan feed sebagai produsen untuk memuat posting-posting pada widget tersebut.

    • Setio Aji

      @Taufik Nurrohman
      Wah iya gan bener, udah keluar sekarang gambarnya. Makasih banyak ya

    • Baharudin Nofiandi

      mas bro kalo pengin tampil hanya gambar dan judulnya di atas gambar sebelah bawah gimana mas?
      makasih sebelumnya'

    • Taufik Nurrohman

      @bahar Waduh, nggak bisa tuh mas, kalau mau begitu harus memodifikasi markupnya sendiri. Coba dicek di bagian ini:

      if (slideOpenNewTab) {
      document.write('<li><div class="inner"><a href="' + p + '" target="_blank"><img src="' + img[o] + '" alt="" class="recent-thumb"/></a><h6><a href="' + p + '" target="_blank">' + g + '</a></h6><p>' + r + '</p></div>' + n + cmtext + '</li>')
      } else {
      document.write('<li><div class="inner"><a href="' + p + '"><img src="' + img[o] + '" alt="" class="recent-thumb"/></a><h6><a href="' + p + '">' + g + '</a></h6><p>' + r + '</p></div>' + n + cmtext + '</li>')
      }

      Tag <h6> terletak setelah tag <img>

    • Muhammad Zaki Al Aziz

      KAng Taufik, saya sudah pake slideshow ini dan berfungsi di chrome. Namun ternyata di mozilla tidak berfungsi. Ada solusinya engga kang?

    • Taufik Nurrohman

      @Muhammad Zaki Al-Aziz Aneh. Padahal Saya membuat slideshow ini menggunakan Firefox. Dan setalah jadi Saya juga mengetesnya di peramban lain dan lulus. Kalau halaman demo di atas dibuka menggunakan Firefox jalan nggak? :\

    • Muhammad Zaki Al Aziz

      @Taufik Nurrohman KAng, sudah ditest di Mozilla ternyata berfungsi. Waduh harus ganti lagi jadinya :(

    • zalfiheriwan@gmail.com

      Pak taufiq, tolongin aku ya?
      1. aku sudah pasang tamplet ini, tapi tampilnya cuma 1 tolong lihat http://zaldiheriwan.blogspot.com
      2. aku ambil tamplate gempa terkini di http://www.padang-today.com/ dan aku pasang di blog aku itu tapi kok statis jadinya?

      trims sebelumnya pak

    • Taufik Nurrohman

      @zaldi heriwan Coba lepas kode yang Saya beri garis bawah lalu simpan lagi, sambil mempelajari komentar-komentar di atas.

    • zalfiheriwan@gmail.com

      waduh pak, tetap nga' bisa aku nicht, padahan semua instruksi udah di chek ulang. apakah yang salah dlm html blogku ini ya?

    • Taufik Nurrohman

      @zaldi heriwan Sepertinya iya. Saya lihat banyak sekali script loader sekelas dengan CDN Google di dalam :(

    • zalfiheriwan@gmail.com

      hehe iya pak aku hapus blog itu trus aku bikin yang baru (http://karimangkutokamang.blogspot.com/) sekarang udah muncul slidenya tapi justru gudget slide foto yang punya blogspotnya yang gak muncul lagi...yang ku ambil di album picasa ku (https://picasaweb.google.com/116187375040661885064/KumpulanNanTaserak)..maaf sebelumnya amat ngerepotin..hehe

    • Unknown

      mas, gimana cara buat dua atau lebih slide ya?
      mohon bimbingannya. masih nubi. :)

    • Taufik Nurrohman

      @Ibnu Hazar Nggak bisa, untuk dua slideshow dalam satu halaman yang sama nggak bisa 7:(

    • Doddy Sugianto

      Terima kasih pak, sangat bermanfaat!
      Saya ingin menanyakan pada "Contoh Konfigurasi Animasi Otomatis", bisa gak tampilan sildeshow nya hanya bergeser kekiri saja? jadi, pada postingan terakhir kembali lg ke postingan pertama dan tetap bergeser kekiri tidak kekanan.

    • Taufik Nurrohman

      @Dody Sugianto Nggak bisa. Tinycarousel tidak dilengkapi dengan fitur itu. Kalau untuk tipe-tipe slideshow yang lebih besar seperti AnythingSider ada opsi seperti itu, opsi untuk kembali ke awal saat slideshow berakhir atau tetap bergerak rotasi searah. Kalau yang ini tidak ada.

    • Doddy Sugianto

      Ok pak.
      Ada tutorial hideline berita utama seperti detik com??
      tadinya saya ingin mencari yg seperti itu pak.
      Terima Kasih

    • Admin SS

      di blog saya kok cuma muncul 1 ya mas , gambarnya??
      http://rowniie.blogspot.com

      • Taufik Nurrohman

        Baca pertanyaan-pertanyaan dari Alam Perwira yang sudah Saya jawab di atas.

        • Admin SS

          gk ada mas kode kyk gtu??mohon pencerahanya.

    • RCW

      Keren Om...
      Tp koq di blog saya thumbnail / gambar ga mau muncul ya?
      ini blog saya>> http://digitaljogja.blogspot.com

      Thanks

    • Kida

      Blog ini wajib di bookmark bagi blogger pemula seperti saya...

      Oh iya mas, kalau boleh saya tanya, apakah bisa untuk meletakkan slideshow di dalam postingan blog ? karena saya sudah muter2 google yg ada cuma slideshow sebagai widget header, dll. jika bisa bagaimana caranya ?

      Terima kasih atas jawabannya n___n

      • Taufik Nurrohman

        Slideshow yang ada di halaman demo juga ditaruh di dalam posting :)

    • Unknown

      i want to slow move slide bar.my site slide bar move is very fast.please help me how can i solve this problem.
      see this site:-
      http://downloadplusbd.blogspot.com/

      • Taufik Nurrohman

        Just increase the intervaltime and/or the duration value:

        $(document).ready(function(){
        $('#tinycarousel').tinycarousel({
        intervaltime: 10000,
        animation   : true,
        duration    : 4000
        });
        });
    • Unknown

      http://dhobrotara.blogspot.com/
      this side slid show only one. how can i many slid show.please help me how can i solve this problem.

      • Taufik Nurrohman

        Try to update the JQuery version from 1.7.1 to 1.7.2 or 1.8.2
        Or... re-order your script position.

    • Unknown

      Buat gantiin homepage bagus ni.. :-bd
      tapi bisa ga mas slide'a di bikin 2 baris.. itu kan pake 1 baris.. :yaya:

    • Anonim

      Mas, ini bisa di bikin jadi 2 baris nggak?

    • Unknown

      gab coba liat blogku http://zaoo.blogspot.com
      setelah ane pasang slidenya itu cuman satu yang keliatan, aneh kecilin ukurannya eh ternyata posts berbaris kebawah bukan ke samping? jadi ,solusinya gmn bang?? udah aneh hapus JQuery. tetep aja gak bisa.

      • Taufik Nurrohman

        Script di blogmu banyak yang error mas. Jadi mungkin masalahnya muncul dari script yang lain:

    • azewdsignet

      wiss`baru liat yg kaya gini unik..!!

    • V

      bang taufik, Slidshow ini bisa gak menampilkan postingan per kategori saja??
      saya ingin menmpilkan post dengan kategori "Berita" saja dengan slidshow ini.

      #rencananya mau dipakai buat web sekolah bang. hee

      • Taufik Nurrohman

        Pelajari opsi slidebyLabels dan slideLabelName

        • V

          mkasih bang..
          tapi kok navigasi "next/prev" nya jadi hilang?? :(

    • Jone

      Mantep banget nih slidshownya \o/
      Tapi kok lebarnya enggak bisa di ubah y
      Coba nih gan mampir di http://www.bloggerawn98.com gimana rekomendasinya

    • Karla Castañeda

      Hi Taufik NurrohmanSenin,
      Very nice job!!
      I love your work!

    • V

      kok muncul gini kang??

      • Kang Rian

        Cari di Edit Html , http://reader-download.googlecode.com nya hapus gan , kasus nya sama kaya di blog ane tuh! :( , nempel di plugin JSON QUICK SEARCH blogger. :D , semoga membantu gan ^_^

        • Unknown

          Kalau code itu dihapus JavaScriptnya ga jalan dong...

      • Taufik Nurrohman

        Sudah fix. Baca lagi tutorial di atas dari awal.

    • Asdhar

      MasyaAllah..
      Minta izin tuk memakainya. Jazaakallahu khair..

    • Ahwas

      cocok untuk toko online juga nih

    • Unknown

      Berhasil makasih banyak mas

    Komentar telah ditutup.