Plugin Feed Rotator untuk Blogger

Tabel Konten
  1. Implementasi Dasar 
    1. Daftar Opsi Konfigurasi Dasar 
  2. Pengaturan Animasi 
  3. Konfigurasi Lanjutan 
    1. onInit 
    2. onHide 
    3. onShow 
    4. Parameter `index` 
  • Beberapa Contoh Modifikasi Dasar 
    1. Mengubah Tampilan 
      1. CSS 
      2. JavaScript 
    2. Memanfaatkan Fungsi Callback untuk Menganimasikan Caption 
    3. Menampilkan Beberapa Slideshow Sekaligus 
  • Mengatur Plugin dan Melihat Demo Secara Langsung 
    1. Daftar Contoh 
  • Image of Blogger Feed Rotator plugin demo

    Plugin ini pada dasarnya merupakan perpaduan antara Basic jQuery Image Rotator dengan yang kemudian Saya jadikan sebagai semacam slideshow dengan konten yang akan diperbaharui secara otomatis berdasarkan posting yang sudah terbit. Saya memutuskan untuk membuat ini karena ada beberapa orang yang menanyakan melalui email mengenai bagaimana cara memadukan plugin Image Rotator dengan JSON Blogger.

    Plugin jQuery Image Rotator ini juga sudah dimodifikasi hampir secara keseluruhan, khusus untuk diaplikasikan pada widget ini. Beberapa hal yang Saya tambahkan diantaranya adalah navigasi, efek animasi kontainer dan dukungan fungsi callback yang dapat dijalankan pada sesi-sesi tertentu.

    Lihat Demo

    Implementasi Dasar 

    Berikut ini adalah contoh implementasi paling mendasar yang bisa Anda lakukan untuk mengaktifkan plugin:

    <link rel="stylesheet" href="//blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css"/>
    <div id="slider-rotator" class="slider-rotator loading"></div><script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script src="//blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script>
    <script>
    makeSlider({
        url: "//nama_blog.blogspot.com" // URL blog Anda
    });
    </script>

    Susun file CSS dan plugin Blogger Feed Rotator sesuai dengan urutan yang Saya perlihatkan di atas. Tambahkan juga elemen HTML yang berfungsi untuk menampilkan slideshow sebelum plugin. Setelah itu aktifkan fungsi makeSlider() dengan parameter berupa objek tunggal url yang diisi dengan URL blog Anda. Salin dan tempelkan di dalam formulir elemen halaman HTML/JavaScript. Dengan ini maka Anda sudah bisa menampilkan sebuah slideshow sederhana seperti yang terlihat pada halaman demo di atas.

    Daftar Opsi Konfigurasi Dasar 

    Konfigurasi dasar Saya batasi pada opsi-opsi yang berhubungan dengan pengaturan posting:

    {
        url: "//www.dte.web.id", // Your blog URL
        numPost: 5, // Number of posts to display
        newTabLink: false, // `true` to automatically open link in new window tab
        labelName: null, // Show posts in specific label. Specify name of the post label, or `null` to show all posts
        showDetail: true, // `false` to hide the blog post title & description
        summaryLength: 60, // Length of post summary
        titleLength: "auto", // Length of the post title. "auto" by default, or specify number to crop the post title characters and truncate it with `...`
        showThumb: true, // `false` to hide the post thumbnails
        thumbWidth: 250, // Width of post thumbnail in pixels
        squareThumb: true, // Thumbnail mode: Square mode or use the scaled thumbnail with original width and height ratio
        noThumb: "images/grey.png", // Fallback thumbnail for no picture posts
        showNav: true, // `true` to show both next/prev navigation and navigation number, "next/prev" to show next/prev navigation only, "number" to show navigation number only, `false` to hide the navigation
        navText: {
            prev: "&lt;", // Label of the previous navigation
            next: "&gt;" // Label of the next navigation
        },
        containerId: "slider-rotator" // HTML element ID that is used to display the slideshow/rotator
    }
    OpsiKeterangan
    urlIsi dengan URL halaman muka blog Anda
    numPostDigunakan untuk menentukan jumlah posting yang akan ditampilkan
    newTabLinkUbah nilainya menjadi true untuk membuat tautan-tautan di dalam widget ini terbuka di jendela/tab baru saat diklik
    labelNameDigunakan untuk menampilkan daftar posting dengan label/kategori tertentu. Nilai null berarti menampilkan semua posting terbaru. Ganti nilainya menjadi nama label untuk menampilkan posting dengan label tertentu. Misalnya labelName:"Foto" untuk menampilkan semua posting yang memiliki label Foto - Contoh
    showDetailUbah nilainya menjadi false untuk menyembunyikan judul dan ringkasan posting. Berguna untuk membuat slideshow foto/gambar tanpa tulisan - Contoh
    summaryLengthDigunakan untuk membatasi panjang ringkasan posting. Akhir pemotongan ringkasan posting akan digantikan dengan simbol “…”
    titleLengthDigunakan untuk membatasi panjang judul posting. Secara normal bernilai "auto". Ubah nilainya dengan angka tertentu untuk memotong panjang judul jika Anda merasa judul posting yang tampil terlalu panjang. Akhir pemotongan judul posting akan digantikan dengan simbol “…”
    showThumbUbah nilainya menjadi false untuk menyembunyikan gambar posting. Berguna untuk membuat slideshow teks - Contoh
    thumbWidthDigunakan untuk menentukan lebar thumbnail posting dan juga sekaligus menentukan lebar slideshow
    squareThumbOpsi untuk memilih mode thumbnail. true untuk menampilkan gambar dengan resolusi /sN-c, false untuk menampilkan gambar dengan resolusi /sN
    noThumbIsi dengan URL gambar. Gambar ini akan digunakan sebagai cadangan jika posting yang tampil tidak memiliki gambar
    showNavOpsi untuk menampilkan atau menyembunyikan navigasi slideshow. Ubah nilainya menjadi false untuk menyembunyikan navigasi. "number" untuk menampilkan navigasi angka saja. "next/prev" untuk menampilkan navigasi next/prev saja. true untuk menampilkan keduanya
    navTextOpsi untuk menentukan label navigasi Next dan Previous
    containerIdDigunakan untuk menentukan di mana slideshow akan ditampilkan. Isi dengan ID elemen HTML. Dan jangan lupa untuk menyertakan elemen HTML tersebut sebelum eksekusi plugin.

    Pengaturan Animasi 

    Pengaturan animasi Saya batasi pada opsi-opsi yang berhubungan dengan animasi plugin:

    {
        interval: 6000, // Slideshow interval
        speed: 1000, // Slideshow animation speed
        hoverPause: true, // `false` to make the slideshow/rotator keep running on mouse-over
        crossFade: false, // `true` if you want to make the slide change effect occurs simultaneously between disappearance and appearance
        autoHeight: false, // Animate the rotator to adjust the height of the displayed item
        autoSlide: true // `false` to run the slideshow manually (with navigation)
    }
    OpsiKeterangan
    intervalDigunakan untuk menentukan rentang waktu perpindahan setiap item slide dalam satuan milidetik
    speedDigunakan untuk menentukan kecepatan animasi dalam satuan milidetik
    hoverPauseJika bernilai true maka slideshow akan berhenti bergerak saat pointer mouse berada di atasnya
    crossFadeDigunakan untuk menentukan apakah efek penghilangan dan pemunculan slide dilakukan secara bergantian atau bersamaan dalam waktu yang sama tanpa ada jeda
    autoHeightJika bernilai true, maka tinggi slideshow akan menyesuaikan diri berdasarkan tinggi item slide yang tampil dengan efek animasi - Contoh
    autoSlideUbah nilainya menjadi false untuk membuat slideshow berjalan secara manual melalui aksi klik navigasi

    Konfigurasi Lanjutan 

    Bagian ini Saya khususkan untuk menjelaskan fungsi-fungsi callback dan implementasi lanjutan, khususnya dalam hal modifikasi:

    {
        onInit: function() {}, // Callback function that will be executed when slideshow is starting
        onHide: function(index) {}, // Callback function that will be executed when slideshow is start hiding the slide item
        onShow: function(index) {} // Callback function that will be executed after the slideshow showing the slide item
    }

    onInit 

    Fungsi ini akan dijalankan pada saat pertama kali slideshow terbentuk. Saat slideshow tampil, maka fungsi ini akan langsung dieksekusi. Contoh penerapan:

    makeSlider({
        url: "//nama_blog.blogspot.com",
        onInit: function() {
            alert('Slideshow ready!'); 
        }
    });

    Kode di atas akan menampilkan pesan “Slideshow ready!” segera setelah slideshow tampil.

    onHide 

    Fungsi ini akan dijalankan setiap kali item slide mulai menghilang. Saat item slide menghilang, maka fungsi ini akan tereksekusi. Contoh penerapan:

    makeSlider({
        url: "//nama_blog.blogspot.com",
        onHide: function() {
            alert('Mengganti slide...'); 
        }
    });

    Kode di atas akan menampilkan pesan “Mengganti slide...” setiap kali slide mulai berganti.

    onShow 

    Fungsi ini akan dijalankan setiap kali item slide tampil. Saat item slide tampil, maka fungsi ini akan tereksekusi. Contoh penerapan:

    makeSlider({
        url: "//nama_blog.blogspot.com",
        onShow: function(index) {
            alert('Slide ke ' + index + ' berhasil tampil.'); 
        }
    });

    Kode di atas akan menampilkan pesan “Slide ke {nomor urut slide yang tampil} berhasil tampil.” setiap kali slide ditampilkan.

    Parameter `index` 

    Parameter index hanya berlaku untuk onHide dan onShow. Parameter ini akan menampilkan indeks slide yang aktif:

    makeSlider({
        url: "//nama_blog.blogspot.com",
        onInit: function() {
            console.log('Slideshow dimulai...');
        },
        onHide: function(index) {
            console.log('Menyembunyikan slide ke ' + index); 
        },
        onShow: function(index) {
            console.log('Menampilkan slide ke ' + index);
        }
    });

    Beberapa Contoh Modifikasi Dasar 

    Mengubah Tampilan 

    Dengan mengubah ukuran lebar pada gambar dan slideshow, ukuran tinggi pada slideshow dan mengubah tampilan deskripsi/detail posting sebagai caption, maka Anda bisa semakin memperkuat status plugin ini sebagai “slideshow”:

    CSS 

    <link rel="stylesheet" href="//blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css"/>
    <style>
    
    /* Custom CSS... */
    
    .slider-rotator {
      width:600px;
      height:240px;
      padding:0 0;
      background-color:white;
      font:italic normal 12px/1.4 Georgia,Serif;
      color:white;
      border:1px solid black;
    }
    
    .slider-rotator .slider-item {
      background-color:white;
      height:240px; /* Same with `.slider-rotator` height */
      padding:0 0;
    }
    
    .slider-rotator h4 {margin-top:0}
    .slider-rotator p {margin:2px 0 0}
    
    /* Slider details as caption */
    .slider-rotator .detail-wrapper {
      position:absolute;
      top:auto;
      right:0;
      bottom:0;
      left:0;
      background-color:black;
      background-color:rgba(0,0,0,.9);
      padding:.5em 1em;
      z-index:4;
    }
    
    </style>

    JavaScript 

    makeSlider({
        url: "//nama_blog.blogspot.com", // Your blog URL
        thumbWidth: 600 // Thumbnail width in pixels (same with slideshow width)
    });

    Lihat Demo

    Memanfaatkan Fungsi Callback untuk Menganimasikan Caption 

    Dengan memanfaatkan parameter index pada onHide dan onShow, Anda bisa memberikan efek animasi pada caption slide yang aktif setiap kali slide berganti:

    makeSlider({
        url: "//nama_blog.blogspot.com", // Your blog URL
        thumbWidth: 600, // Thumbnail width in pixels (same with slideshow width)
        containerId: "slider-rotator",
        // Hide all captions on initiation...
        onInit: function() {
            $('#' + this.containerId).find('.detail-wrapper').hide();
        },
        // Hide the caption with `.slideUp()` effect when the slide item hides
        onHide: function() {
            $('#' + this.containerId).find('.detail-wrapper').slideUp();
        },
        // Show the caption with `.slideDown()` effect when the slide item appears
        onShow: function(index) {
            $('#' + this.containerId).children().eq(index).find('.detail-wrapper').slideDown();
        }
    });

    Lihat Demo

    Menampilkan Beberapa Slideshow Sekaligus 

    Karena eksekusi plugin ini dilakukan di luar, maka ini memungkinkan Anda untuk menampilkan beberapa slideshow sekaligus dalam satu halaman. Pertama-tama buatlah beberapa elemen HTML yang dibutuhkan untuk memuat slideshow:

    <div id="container-1" class="slider-rotator loading"></div>
    <div id="container-2" class="slider-rotator loading"></div>
    <div id="container-3" class="slider-rotator loading"></div>

    Kemudian jalankan fungsi makeSlider() sebanyak jumlah kontainer yang dibuat. Tentukan juga konfigurasi containerId yang berbeda-beda berdasarkan ID kontainer:

    makeSlider({
        url: "//nama_blog-1.blogspot.com",
        containerId: "container-1"
    });
    makeSlider({
        url: "//nama_blog-2.blogspot.com",
        containerId: "container-2"
    });
    makeSlider({
        url: "//nama_blog-3.blogspot.com",
        containerId: "container-3"
    });

    Lihat Demo

    Mengatur Plugin dan Melihat Demo Secara Langsung 

    Saya sudah menyertakan halaman konfigurasi plugin yang bisa Anda gunakan untuk melakukan pengaturan dan melihat hasilnya secara langsung di sini:

    Kunjungi Halaman

    Daftar Contoh 

    1. Demo 1: Basic
    2. Demo 2: Show Posts under Category “Widget”
    3. Demo 3: About Thumbnails
    4. Demo 4: Thumbnail Only
    5. Demo 5: Text Only
    6. Demo 6: Multiple Feed Loading
    7. Demo 7: Casual Slideshow
    8. Demo 8: Example Callback Function to Animate the Slideshow Caption (1)
    9. Demo 9: Example Callback Function to Animate the Slideshow Caption (2)

    44 Komentar

    • MUX SPARROW

      \o/ :-bd

    • Anonim

      Mantephh \o/

    • Beben Koben

      walo gak ngerti ini juga nih :D
      jos margonjos, cetar membahana..hu haha huhu haha huhuhu B)

    • dream

      Salam alikom )): :'(
      hanya
      Kemungkinan untuk menjelaskan kepada saya lebih saya ingin menginstal No 6 (http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/index-6.html )
      tidak tahu di mana saya menempatkan kode tidak bekerja dengan saya

      • Taufik Nurrohman

        Kode pertama di atas </head>. Kode berikutnya di dalam widget HTML/JavaScript atau di mana saja di dalam area <body> ... </body>.
        Sesuaikan juga opsi url dan labelName pada kode contoh.

    • Unknown

      naksir sama yang nomer 9.. <3
      oiya kang, kalau mau dibikin random posts gmna ni??
      http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/index-9.html
      Maklum kang saya tidak paham masalah JS.. :D

      • Taufik Nurrohman

        Fitur itu belum ada di dalam plugin ini. Mungkin kapan-kapan. Sebenarnya tinggal di-random-kan saja feed postingnya di bagian awal dan tidak perlu mengutak-atik kode lainnya. Cuma belum nemu kodenya saja.

        • Unknown

          kalau bisa nanti buat yang random'a (pesenan saya) :d .. saya nyari feed'a g dapet..
          nemunya yang ini +"/feeds/posts/summary/..
          mau belajar JS tapi ga mudeng"..

    • Unknown

      Mas saya lihat dalam widget yg mas buat menggunakan $.get().
      apa perbedaannya dengan $.ajax()??
      dan menurut mas yang mana yg memiliki waktu pemuatan yang lebih cepat??

      • Taufik Nurrohman

        Seperti yang pernah Saya katakan bahwa $.get() itu cuma jalan pintas untuk $.ajax(). Masalah kekurangan dan kelebihan masing-masing metode Saya tidak begitu peduli. Di sini secara pribadi Saya memakai $.get() karena Saya melihat indentasi $.get() jauh lebih sedikit dibandingkan $.ajax(), jadi karakter tab di dalam file yang tidak dikompres akan menjadi lebih sedikit. Hehe.

        // $.get() hanya membutuhkan satu kali indentasi untuk mencapai callback
        $.get(url, function(data) {
        |
        |    // [1X]
        |
        });
        // S.ajax() membutuhkan dua kali indentasi untuk mencapai callback
        $.ajax({
        |
        url: url,
        success: function(data) {
        |    |
        |    |    // [2X]
        |    |
        }
        |
        });
        • Unknown

          makasih infonya mas..

    • Unknown

      bagus gan...

    • Randy

      wah2 akhirnya ada yg baru nih, sipp langsung tak pelajari

    • admin

      waiting for your help :(

      • Taufik Nurrohman

        Sorry. I just can't find the solution. Maybe you just need to increase the blog post to the slideshow.

    • Anonim

      Mas, yg text onlynya bisa di sort by label gak? Kalo bisa gimana caranya? :)

    • Anonim

      Mas, gimana caranya bikin SLIDER untuk blog video? Saya ujicoba slider di blog video saya tapi thumbnail-nya gak muncul, yang ada thumbnail "no images". Mohon pencerahannya Mas Taufik.

    • Anonim

      ini bisa dibuat responsive gak mas B)

    • Unknown

      Hi, Taufik -
      at Demo 7: Casual Slideshow, can we change the post title font color? Its something like blue-purple now.
      Best regards

      • Taufik Nurrohman

        Yes:

        <style>
        .slider-rotator h4 {color:YOUR-CUSTOM-COLOR-CODE}
        .slider-rotator h4 a:hover {color:YOUR-CUSTOM-COLOR-CODE}
        </style>
      • Taufik Nurrohman

        PS: It also advisable to embed the JavaScript and CSS source code directly into your HTML template rather than using the Google Code source URL in the demo page. My Google Code account is no longer in a healthy state :(

    • Unknown

      masih menunggu supaya bisa random post. :-bd

      • Taufik Nurrohman

        Kalau mau dibuat acak, tinggal gunakan fungsi ini untuk mengacak posting. Terapkan pada bagian ini:

        var entry = shuffleArray(json.feed.entry), ...

        Unduh JavaScript yang belum dikompres untuk melihatnya.

        • Unknown

          Om saya sudah coba buat disini: http://jsfiddle.net/adjie1258/x9M2r/

          tapi malah loading mulu. konten nya gak keluar. file js yang saya gunakan:
          .js edit

          mohon bantuan nya om,...
          saya awam di js. terimakasi sebelumnya,...

        • Unknown

          maaf om salah kasi jsfiddle nya. yang ini: http://jsfiddle.net/adjie1258/BKvvQ/

          jadi malu,... :D

          • you

            mungkin begini... function shuffleArray(arr) {
            var i = arr.length, j, temp;
            if (i === 0) return false;
            while (--i) {
            j = Math.floor(Math.random() * (i + 1));
            temp = arr[i];
            arr[i] = arr[j];
            arr[j] = temp;
            }
            return arr;
            }
            // console.log(defaults);

            $.get(defaults.url + '/feeds/posts/summary/' + (defaults.labelName === null ? "" : '-/' + defaults.labelName.replace(/\,(\s+)?/g,"/")) + '?alt=json-in-script&max-results=' + defaults.numPost, {}, function(json) {
            if (json.feed.entry !== undefined) {
            var entry = shuffleArray(json.feed.entry), title, link, thumb, summary, skeleton = "", nav = "";
            for (var i = 0, len = entry.length; i < len; i++) {

            cek disini... http://jsfiddle.net/BKvvQ/3]demo

            • you

              maksudnya ini link nya.. Demo
              kode diatas cuma potongan penempatannya fungsi arraynya saja...

              • Unknown

                mantap om,... its work,... :-bd
                makasih banget yah,...
                btw blog nya si om jg keren tampilannya,...
                ok, problem solved...
                skali lagi makasih yah om,....
                \o/

    • Unknown

      Hi again TAUFIK and thanks for your advises, i want to resize the images see them on center, on rotaror - 600x340, because doing somethink like zoom in and spoils the quality... Can i fix it, or change it???
      Keep on and many thanks
      (if you want to see, check it on this blog http://to-poulaki-tsiou.blogspot.com/ )

    • Unknown

      " Change the option squareThumb to false, that would fix your problem ⇒ before · after "
      Taufik, Thank you very much, you are the best!
      Taufik, Terima kasih banyak, Anda adalah yang terbaik

    • Jhonarendra

      bagus juga slidernya
      saya mau pakai yang nomer 8, tapi pingin buat supaya gambarnya dibagian kiri, judul post dan deskripsinya di bagian kanan, kira kira bagaimana caranya ya?

    • Pusaka Madinah

      Mas Taufik.. bisa gak gambarnya dibikin autoresize; menyesuaikan dengan besar slider-wrappernya?
      Moga2 bisa.. ditunggu :D

    • Pusaka Madinah

      oya, ini link tes-blognya, Mas: http://pusakamadinah.blogspot.com/
      thanks in advance :D

    • Unknown

      This is very cool feed rotator widget for blogger. Thanks for sharing.
      I want to ask a question
      How to add the post link clickable to image along with post title in the feed rotator plugin?
      Thanks.

      • Taufik Nurrohman

        You can utilize the onInit callback to wrap each image in the slideshow with an anchor tag:

        makeSlider({
        …
        thumbWidth: 500,
        onInit: function() {
        $('#' + this.containerId + ' .slider-item').each(function() {
        var $link = $('a', this);
        $('img', this).wrap('<a href="' + $link.attr('href') + '"></a>');
        });
        }
        });

        Demo: http://jsbin.com/taseveduke/1/edit?html,output

        • Unknown

          Thanks, Taufik
          This is useful and working for me.
          I want to learn or clear one thing more from your feed rotator plugin for blogger.
          When we see the demo of Thumbnail Only feed rotator demo then the image automatically get the post link and become clickable even without using the trick that you mentioned above.
          How this is possible and what function you use for this?
          Thanks, mas

          • Taufik Nurrohman

            Take a look → https://code.google.com/p/blogger-json-experiment/source/browse/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.js?r=27#222

            It’s because of the options.

    • Unknown

      bisa diterapkan lebih dari satu label g mas ?

    • Suryo

      gan, ada contoh klau buat link rotator gak., gak pakai waktu, tp pada saat di next link dalam frame terganti

      • Taufik Nurrohman

        Lihat tabel!

        autoSlide – Ubah nilainya menjadi false untuk membuat slideshow berjalan secara manual melalui aksi klik navigasi.

    • José María Acuña

      Blogger Feed Rotator Plugin it no longer works.

      ¿where I can locate files?

      http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js
      http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css

      Thanks!!

    • Imron Fhatoni

      thanks

    Komentar telah ditutup.