Slideshow Otomatis Blogger dengan SLIDES

Tabel Konten
  1. Tahap 1: Mengedit Tema 
  2. Tahap 2: Meletakkan Slideshow 
  • Konfigurasi Widget 
    1. Contoh Penerapan Efek Fade 
    2. Contoh Penerapan Easing 
    3. Contoh Penerapan crossfade: true 
  • Tema Polos untuk Modifikasi 
  • Pembaharuan: 1 Desember 2013

    Slideshow Otomatis Blogger dengan SLIDES

    Saya menggunakan versi terakhir dari SLIDES yaitu pada 5 Februari 2013 (versi 1.2.0):

    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:

    /*! SlidesJS for Blogger by Taufik Nurrohman <http://gplus.to/tovic> */
    
    /* Main */
    .slidesJS-frame {
      width:739px;
      height:341px;
      background:transparent url('http://lh5.googleusercontent.com/-CPP57QQsIKk/UpnvzwVwYwI/AAAAAAAAIYs/WpSvq-mh9bQ/s1600/slidesJS-frame.png') no-repeat 50% 50%;
      margin:0 auto;
    }
    .slidesJS {
      background-color:#F0F0F0;
      position:relative;
      top:18px;
      left:84px;
    }
    .slidesJS-container {
      position:relative;
      overflow:hidden;
      display:none;
    }
    
    /* Next & Prev */
    .slidesJS-next,
    .slidesJS-prev {
      position:absolute;
      top:50%;
      left:-39px;
      width:24px;
      height:43px;
      margin-top:-21px;
      background:transparent url('http://lh6.googleusercontent.com/-GRIwFsYLCCE/UpntR8pxmrI/AAAAAAAAIYQ/x4DQEB7bDbI/s1600/slidesJS-arrow-prev.png') no-repeat 50% 50%;
      display:block;
      overflow:hidden;
      text-indent:-9999px;
    }
    .slidesJS-next {
      background-image:url('http://lh6.googleusercontent.com/-kgnU17H_E6M/UpnsAEhoiZI/AAAAAAAAIYA/NxTUozUJ8Cc/s1600/slidesJS-arrow-next.png');
      right:-39px;
      left:auto;
    }
    
    /* Pagination */
    .slidesJS-pagination {
      list-style:none;
      margin:26px auto 0;
      padding:0;
      width:auto;
      text-align:center;
    }
    .slidesJS-pagination li {
      display:inline-block;
      *display:inline;
      margin:0 1px;
      padding:0;
      list-style:none;
    }
    .slidesJS-pagination a {
      display:block;
      width:12px;
      height:12px;
      background: transparent url('http://lh3.googleusercontent.com/-QltA5Dq8IbM/UpnwkpOTW5I/AAAAAAAAIZE/Dp3_T14wmaI/s1600/slidesJS-pagination.png') 50% 0;
      text-indent:-999px;
      overflow:hidden;
    }
    .slidesJS-pagination li.current a {background-position:0 -12px}
    
    /* Caption */
    .slidesJS-caption {
      display:none;
      position:absolute;
      right:0;
      bottom:0;
      left:0;
      z-index:500;
      padding:5px 20px 10px;
      background-color:black;
      background-color:rgba(0,0,0,.5);
      font:normal normal 13px/1.33 Helmet,Freesans,Sans-Serif;
      color:white;
      border-top:1px solid black;
      text-shadow:none;
    }
    .slidesJS-title a {
      color:white;
      text-decoration:none;
    }
    .slidesJS-title a:focus,
    .slidesJS-title a:hover {text-decoration:underline}
    .slidesJS-meta:before {content:" - "}
    .slidesJS-meta-comment {display:none}
    
    /* Ribbon */
    .slidesJS-ribbon {
      display:block;
      /* display:none; <= uncomment this declaration to hide the ribbon */
      width:112px;
      height:112px;
      position:absolute;
      top:-19px;
      left:-19px;
      z-index:500;
      background:transparent url('http://lh5.googleusercontent.com/-m3mnN0lLn-c/UpnwqLR_vMI/AAAAAAAAIZM/fyQzMaLIfao/s1600/slidesJS-ribbon.png') no-repeat 0 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 class="slidesJS-frame" id="slidesJS-frame">
        <div class="slidesJS" id="slidesJS"></div>
    </div>
    <div style="clear:both;"></div><script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script>
    var slidesJS_config = {
        url: 'http://nama_blog.blogspot.com',
        numPost: 7,
        labelName: null,
        monthArray: [
            "Januari",
            "Februari",
            "Maret",
            "April",
            "Mei",
            "Juni",
            "Juli",
            "Agustus",
            "September",
            "Oktober",
            "November",
            "Desember"
        ],
        noImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC',
        newTabLink: false,
        containerId: 'slidesJS',
        slider: {
            width: 570,
            height: 270,
            preload: true,
            preloadImage: "//lh3.googleusercontent.com/-SrchH_T_dag/UpnwHVaUkCI/AAAAAAAAIY4/kAG7IM7kMT8/s1600/slidesJS-loading.gif",
            generateNextPrev: true,
            nextText: "Berikutnya",
            prevText: "Sebelumnya",
            pagination: true,
            generatePagination: true,
            prependPagination: false,
            fadeSpeed: 350,
            fadeEasing: "",
            slideSpeed: 350,
            slideEasing: "",
            start: 1,
            effect: "slide",
            crossfade: false,
            randomize: false,
            play: 5000,
            pause: 0,
            hoverPause: true,
            bigTarget: false,
            animationStart: function(current) {
                $('.slidesJS-caption', '.' + this.container).slideUp(100);
            },
            animationComplete: function(current) {
                $('.slidesJS-caption', '.' + this.container).slideDown(200);
            },
            slidesLoaded: function() {
                $('.slidesJS-caption', '.' + this.container).slideDown(200);
            }
        }
    };
    </script>
    <script src="//dte-project.googlecode.com/svn/trunk/blogger-slidesjs.js"></script>

    Ganti kode yang Saya beri tanda dengan alamat blog Anda lalu 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.
    numPostDigunakan untuk menentukan jumlah posting yang ingin ditampilkan.
    labelNameGanti nilainya dengan nama label untuk menampilkan posting berlabel spesifik. Misalnya labelName: "jQuery" akan membuat slideshow hanya menampilkan posting yang memiliki label jQuery.
    monthArrayDaftar nama-nama bulan sesuai dengan sistem penanggalan di negaramu.
    noImageURL gambar cadangan untuk posting yang tidak memiliki gambar.
    newTabLinkJika bernilai true, semua tautan pada slideshow akan membuka ke tab/jendela baru secara otomatis ketika diklik.
    containerIdID kontainer penampung widget.
    slider => widthDigunakan untuk menentukan lebar slideshow.
    slider => heightDigunakan untuk menentukan tinggi slideshow.
    slider => preloadJika bernilai false, efek animasi akan dimulai segera sesaat ketika JSON berhasil dimuat. Ini akan membuat halaman seolah termuat lebih cepat. Hanya saja, karena animasi dimulai terlalu cepat (sebelum semua gambar termuat) akibatnya itu akan membuat animasi slideshow menjadi tidak rapi pada saat permulaan.
    slider => preloadImageURL gambar animasi memuat slideshow.
    slider => generateNextPrevJika bernilai false, navigasi Next & Prev tidak akan tampil.
    slider => nextTextLabel navigasi Next.
    slider => prevTextLabel navigasi Prev.
    slider => generatePaginationJika bernilai false, navigasi 1, 2, 3, … tidak akan tampil.
    slider => prependPaginationOpsi untuk menyisipkan navigasi angka dari sebelah atas slideshow. Secara normal, navigasi angka akan disisipkan dari sebelah bawah.
    slider => fadeSpeedDigunakan untuk menentukan kecepatan animasi jika opsi effect bernilai "fade".
    slider => fadeEasingDigunakan untuk menentukan easing animasi jika opsi effect bernilai "fade".
    slider => slideSpeedDigunakan untuk menentukan kecepatan animasi jika opsi effect bernilai "slide".
    slider => slideEasingDigunakan untuk menentukan easing animasi jika opsi effect bernilai "slide".
    slider => startDigunakan untuk menentukan urutan slide yang akan ditampilkan pertama kali.
    slider => effectDigunakan untuk menentukan tipe efek animasi. Pilihannya ada dua: slide dan fade.
    slider => crossfadeDigunakan untuk menentukan apakah efek perpindahan slide (khusus efek fade) akan dilakukan dengan cara memudarkan slide yang tampil, kemudian pada saat yang bersamaan menampilkan slide setelahnya (true) atau dengan cara memudarkan slide yang tampil, menunggu sampai efek pemudaran berakhir, lalu slide berikutnya ditampilkan (false).
    slider => randomizeJika bernilai true, maka plugin akan berusaha untuk mengacak urutan slide.
    slider => playDigunakan untuk menentukan lama waktu berhenti sementara setelah animasi terjadi.
    slider => pauseDigunakan untuk menentukan lama waktu berhenti sementara setelah pengguna mengeklik tombol navigasi.
    slider => bigTargetJika bernilai true setiap gambar pada slide akan berfungsi sebagai navigasi. Ketika gambar tersebut diklik, maka slide berikutnya akan tampil.
    slider => animationStartOpsi untuk menerapkan fungsi bebas yang akan bekerja ketika animasi perpindahan slide dimulai.
    slider => animationCompleteOpsi untuk menerapkan fungsi bebas yang akan bekerja ketika animasi perpindahan slide selesai.
    slider => slidesLoadedOpsi untuk menerapkan fungsi bebas yang akan bekerja ketika slideshow telah berhasil termuat.

    Contoh Penerapan Efek Fade 

    var slidesJS_config = {
        ...
        slider: {
            ...
            fadeSpeed: 350,
            fadeEasing: "",
            effect: "fade",
            ...
        }
    };

    Lihat Demo

    Contoh Penerapan Easing 

    Untuk menerapkan efek percepatan kustom, plugin Easing jQuery dibutuhkan di sini:

    var slidesJS_config = {
        ...
        slider: {
            ...
            slideSpeed: 1000,
            slideEasing: "easeInOutBack",
            effect: "slide",
            ...
        }
    };

    Lihat Demo

    Contoh Penerapan crossfade: true 

    var slidesJS_config = {
        ...
        slider: {
            ...
            fadeSpeed: 350,
            fadeEasing: "",
            effect: "fade",
            crossfade: true        ...
        }
    };

    Lihat Demo

    Tema Polos untuk Modifikasi 

    Kode CSS ini adalah kode minimal untuk pembentukan tata letak slideshow. Selebihnya bisa dimodifikasi sesuai dengan desain tema:

    /* Main */
    .slidesJS-frame {
      background-color:white;
      width:570px; /* samakan dengan lebar slideshow */
      height:270px; /* samakan dengan tinggi slideshow */
      border:4px solid black;
      margin:0 auto;
    }
    .slidesJS {
      background-color:#f0f0f0;
      position:relative;
      font:normal normal 11px/normal Helmet,Freesans,Sans-Serif;
    }
    .slidesJS-container {
      position:relative;
      overflow:hidden;
      display:none;
    }
    
    /* Next & Prev */
    .slidesJS-next,
    .slidesJS-prev {
      display:block;
      float:left;
      background-color:black;
      color:white;
      font-weight:bold;
      text-decoration:none;
      height:20px;
      line-height:20px;
      padding:0 7px;
      margin:8px 0 0;
      overflow:hidden;
    }
    .slidesJS-next {float:right}
    
    /* Pagination */
    .slidesJS-pagination {
      list-style:none;
      margin:8px auto 0;
      padding:0;
      width:auto;
      text-align:center;
    }
    .slidesJS-pagination li {
      list-style:none;
      display:inline-block;
      *display:inline;
      margin:0 2px;
      padding:0;
    }
    .slidesJS-pagination a {
      display:block;
      background-color:black;
      color:white;
      font-weight:bold;
      text-decoration:none;
      height:20px;
      line-height:20px;
      padding:0 7px;
      overflow:hidden;
    }
    .slidesJS-next:hover,
    .slidesJS-prev:hover,
    .slidesJS-pagination li.current a {background-color:blue}
    
    /* Caption */
    .slidesJS-caption {
      display:none;
      position:absolute;
      right:0;
      bottom:0;
      left:0;
      z-index:500;
      padding:8px 10px 10px;
      background-color:black;
      background-color:rgba(0,0,0,.5);
      font:normal normal 13px/1.33 Helmet,Freesans,Sans-Serif;
      color:white;
    }
    .slidesJS-title a {
      color:white;
      text-decoration:none;
    }
    .slidesJS-title a:focus,
    .slidesJS-title a:hover {text-decoration:underline}
    .slidesJS-meta:before {content:" - "}
    .slidesJS-meta-comment {display:none}
    
    /* Ribbon */
    .slidesJS-ribbon {display:none}

    Lihat Demo

    31 Komentar

    • Unknown

      saya sudah melihat. kerja yang bagus, namun kami ingin anda memberikan permintaan kepada pengguna anda tentang feedback dari tutorial ini. Sebab position:absolute sangat tergantung pada jenis template yang digunakan

    • Unknown

      cuma bisa nyimak aja :D

    • Taufik Nurrohman

      @Putri ArisnawatiSaya sudah menyadari itu dari SLIDES versi aslinya yang hanya menggunakan elemen absolut. Itulah sebabnya mengapa Saya membungkus kembali slider ini dengan <div id="slides-outer"> yang mengandung position:relative.
      Dari posting ini Saya rasa bisa dengan mudah dimengerti: http://hompimpaalaihumgambreng.blogspot.com/2011/12/posisi-absolute-pada-elemen-induk.html :)

    • Taufik Nurrohman

      @Syndicate OSHahaha.. dicoba saja mas :)

    • Unknown

      Mas, ko saya coba pakai semua slider otomatisnya ga bekerja di blog saya ya??

    • Taufik Nurrohman

      @Mug Jaya Saya punya satu pertanyaan: Apakah slideshow tidak bekerja karena semua slide tidak tampil atau slideshow tidak bekerja karena slide tidak bergerak?

    • Unknown

      Asik nih mas berhasil dipasang, thanks mas taufik... :D

    • Unknown

      Kok Gagal ya????
      Maaf Bisa Beri tahu saya tentang Slide yang sedang anda pakai sekarang???

    • Taufik Nurrohman

    • Unknown

      terima kasih mas, sudah saya pakai loh :)
      kunjungi blog saya juga ya.

      metrotipi.blogspot.com

    • Unknown

      kalau slide dengan gambar sendiri gimana bang??

      soalnya saya mau menambahkan foto-foto kenangan dengan slide seperti ini di blog saya.. he

      • Taufik Nurrohman

        Kunjungi saja situs sumbernya: SLIDES, lalu unduh slideshow-nya. Markup HTML manual harusnya akan menjadi seperti ini:

        <div id="slides-outer">
        <img src="http://4.bp.blogspot.com/-NYp6Cx-vy6A/T0plh0PkkdI/AAAAAAAACNs/NFkZdqeP8hY/s1600/example-frame.png" width="739" height="341" alt="Example Frame" id="frame" />
        <img src="http://4.bp.blogspot.com/-T1K0fQGXHn8/T0pmUCTEjEI/AAAAAAAACN8/zJ1CEvvEzLo/s1600/new-ribbon.png" width="112" height="112" alt="New Ribbon" id="ribbon" />
        <div id="slides">
        <div class="slides_container">
        <div class="slide">
        <img src="gambar-1.jpg" alt="1">
        <div class="caption">Judul Gambar 1</div>
        </div>
        </div>
        <div class="slides_container">
        <div class="slide">
        <img src="gambar-2.jpg" alt="2">
        <div class="caption">Judul Gambar 2</div>
        </div>
        </div>
        <div class="slides_container">
        <div class="slide">
        <img src="gambar-3.jpg" alt="3">
        <div class="caption">Judul Gambar 3</div>
        </div>
        </div>
        <a href="#" class="prev">
        <img src="http://4.bp.blogspot.com/-YBh6RVIP6rM/T0plXL_Z94I/AAAAAAAACNc/JYe-5VPD4Bs/s1600/arrow-prev.png" width="24" height="43" alt="Arrow Prev">
        </a>
        <a href="#" class="next">
        <img src="http://2.bp.blogspot.com/-bJqPep9dJZU/T0plVM2OuBI/AAAAAAAACNU/at-rT9KkcYw/s1600/arrow-next.png" width="24" height="43" alt="Arrow Next">
        </a>
        </div>
        </div>
        • Unknown

          maksih bang, sudah berhasil.... :)

    • Imron Fhatoni

      assalamualaikum mas taufik saya mau nanya saya sudahmencoba menerapkan semua tutorial slideshow yang ada di dte mas taufik tapi yang mau saya tanyakan pada url tujuan misalnya seperti ini mas
      /search/label/Widged?max-results=7
      tapi hasil penelusuran diblog saya malah tidak ada atau seperti gambar ini mas

      kira-kira bagaimana solusinya mas taufik mohon pencerahannya

      • Taufik Nurrohman

        Waalaikumsalam. Mungkin maksudnya Widget.

        • Imron Fhatoni

          maksudnya label hasil penelusuranya tidak ditemukan mas taufik padahal pada url tujuannya sudah saya arahkan ke hasil penelusuran label tapi kalau url tersebut saya gunakan pada slider malah hasilnya tidak ditemukan mas.. :)

    • Unknown

      assalamu alaikum, mas taufik.
      mas, saya mau tanya, nih.
      untuk slide seperti contoh ini: http://www.dreamcss.com/2009/04/create-beautiful-jquery-sliders.html
      itu gimana caranya agar bisa dipasang ke blogger?

      sekian mas, pertanyaan saya.
      sekiranya bisa segera ditanggapi :D

      • Taufik Nurrohman

        Waalaikumsalam. Kalau sudah tahu mana kode CSS, HTML dan JavaScript, kira-kira meletakkannya begini:
        1. Kode CSS di dalam <b:skin>
        1. Kode HTML di dalam <body>
        1. Kode JavaScript di atas </body>

        • Unknown

          kurang faham, mas :(
          bisa dibantu, ga?
          soalnya untuk head dan body di kode htmlnya udah ada, jadinya bingung soalnya ga bisa 2, kan?

          maklum, mas.
          moga berkenan, maaf merepotkan.

    • Unknown

      update di terima mas..coba saya praktekkan dulu. :D . Tanya dulu nih mas masih pakai googlecode ya mas gak khawatir di band lagi mas...

      • Taufik Nurrohman

        Cuma orang-orang yang tidak mengerti soal kesalahan yang menyebabkan terkena ban saja yang akan takut terkena ban lagi. Kesempatan ke dua. Kalaupun nanti pada akhirnya terkena ban lagi meski sudah mengikuti semua aturan yang ada, berarti Google tidak profesional. Tidak masalah, Saya sudah membuat salinannya di Dropbox. Tapi nanti setiap tautan akan lebih baik kalau Saya bagikan dalam artikel khusus kalau semuanya sudah cukup beres.

        Untuk para pengguna, Saya sarankan agar mengunduh setiap berkas kode yang Saya unggah ke akun Google Code Saya dan mengunggahnya ke akun Google masing-masing. Kalau belum begitu mengerti mengenai Google Code, gunakan Google Drive atau Your JavaScript.

    • Farrij Annafi'u

      sipp berhasil di pasang :-bd , tapi ada satu pertanyaan. Agar slide nya cuma tampil di hompage gimana ya? Makasih :D

    • MrDoubleD

      :'( gak bisa di pasang nih om. Tolong di check Dicky Dharmawan Blog . Tadinya ada slideshow bawaan template dan gak berfungsi / gambarnya tidak sesuai dengan postingan terus saya coba hapus scriptnya di "tata letak" yang di "edit html" gak tau cara hapusnya dan saya gantikan dengan slideshow yang om ajarkan tapi gak berhasil.

    • Fadhli Ihsan

      mas, untuk menjalankan slide nya apa mesti di klik tanda arrow netx-back nya?
      kalau jalan otomatis dgn waktu tertentu gimana cara nya mas?
      thx

      • Taufik Nurrohman

        Dibaca dulu tabelnya mas, dan terutama dilihat juga halaman demonya.

        • Fadhli Ihsan

          udah bisa mas :)
          thanks banget

          satu lagi mas, penggunaan slide : "easeInOutBack", gak bisa toh mas? malah gak berfungsi -__
          trus cara kasih border img frame nya dimana mas? :0

          • Taufik Nurrohman

            Mungkin kamu belum masang plugin ini.

            • Fadhli Ihsan

              waah terimakasih mas.
              mantap nih tutor nya
              :D
              oh iya, pas saya coba search artikel di kotak pencarian, gimana cara bikin animasi loading nya?

    • Unknown

      tolong bantu aku. slider tidak bekerja.
      foto tidak muncul
      solusi silahkan

      • Unknown

        coba diperhatikan lagi disitu kita disuruh untuk ganti dengan nama blog, siapa tahu mas Nader belum ganti.

    • Unknown

      makasih banyak .....

    Komentar telah ditutup.