Slideshow Otomatis Blogger dengan S3Slider

Tabel Konten
  1. Mengedit Tema 
  2. Meletakkan Slideshow 
  3. Konfigurasi Widget 
  • Konfigurasi Lain 
    1. Menghilangkan Tanggal Terbit 
    2. Menghilangkan Jumlah Komentar 
  • Pembaharuan: 28 November 2013

    Slideshow Otomatis Blogger dengan S3Slider

    S3Slider adalah sebuah slideshow sederhana namun selalu memiliki kesan tegas dan kuat bagi Saya. Itulah yang dulu membuat Saya memilih ini sebagai slideshow pertama yang Saya terapkan di blog ini. Sampai pada akhirnya Saya memutuskan berpindah ke Nivo. Dan sekarang Saya sudah tidak lagi memakai slideshow manapun di blog ini karena merasa tidak memerlukannya lagi.

    Kali ini Saya akan mengintegrasikan S3Slider dengan JSON Blogger untuk memuat setiap slide secara otomatis berdasarkan artikel/posting terbaru yang diterbitkan:

    Lihat Demo

    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:

    /*! s3Slider for Blogger by Taufik Nurrohman => http://gplus.to/tovic */
    
    .s3slider {
      margin:0 auto 10px;
      border:2px solid white;
      background:white none no-repeat 50% 50%;
      -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4),0 7px 10px -3px rgba(0,0,0,.4);
      -moz-box-shadow:0 1px 3px rgba(0,0,0,.4),0 7px 10px -3px rgba(0,0,0,.4);
      box-shadow:0 1px 3px rgba(0,0,0,.4),0 7px 10px -3px rgba(0,0,0,.4);
      position:relative;
      overflow:hidden;
    }
    .s3slider.loading {
      background-image:url('data:image/gif;base64,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');
      text-indent:-9999px;
    }
    .s3slider-content,
    .s3slider-content li {
      position:absolute;
      top:0;
      right:0;
      bottom:0;
      left:0;
      margin:0;
      padding:0;
      list-style:none;
      overflow:hidden;
    }
    .s3slider-content li {
      position:static;
      display:none;
    }
    .s3slider-content img {
      display:block;
      width:100%;
      height:100%;
      max-width:none;
      max-height:none;
      border:none;
      outline:none;
      padding:0;
      margin:0;
    }
    .s3slider-caption {
      position:absolute;
      right:0;
      bottom:0;
      left:0;
      height:auto;
      font:normal normal 11px/normal Helmet,Freesans,Sans-Serif;
      color:white;
      background-color:black;
      opacity:.8;
      filter:alpha(opacity=80);
      padding:7px 10px 10px;
      display:none;
    }
    .s3slider-title,
    .s3slider-meta {display:block}
    .s3slider-title a {
      font-size:110%;
      font-weight:bold;
      color:white;
      text-decoration:none;
    }
    .s3slider-title a:focus,
    .s3slider-title a:hover {text-decoration:underline}
    .s3slider-meta-comment:before {content:" - "}

    Klik Simpan Tema.

    Meletakkan Slideshow 

    Masuklah ke menu Tata Letak kemudian tambahkan sebuah elemen halaman HTML/JavaScript yang terletak di bagian atas posting. Karena di situlah letak ideal untuk menampilkan slideshow:

    Menambahkan Widget
    Menambahkan widget

    Salin kode di bawah ini kemudian letakkan di dalam formulirnya:

    <div id="s3slider-container">
      <div class="s3slider loading" style="width:420px;height:270px;">
        Memuat...
      </div>
    </div><script src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script>
    var s3slider_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: 's3slider-container',
        slider: {
            width: 420,
            height: 270,
            timeOut: 4000
        }
    };
    </script>
    <script src="//dte-project.googlecode.com/svn/trunk/blogger-s3slider.js"></script>

    Ganti URL http://nama_blog.blogspot.com/ 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 

    Berikut ini adalah tabel pengaturan variabel widget beserta penjelasannya:

    OpsiKeterangan
    urlGanti nilainya dengan URL blog Anda.
    numPostTentukan jumlah posting yang ingin ditampilkan pada widget ini.
    labelNameUbah nilainya menjadi nama label untuk menampilkan posting dengan label tertentu (Sebagai contoh, menentukan nilai labelName menjadi "Widget" akan membuat widget ini menampilkan posting yang memiliki label Widget saja.
    monthArrayDaftar nama bulan sesuai dengan sistem penanggalan di negaramu.
    noImageGambar cadangan untuk posting yang tidak memiliki gambar.
    newTabLinkGanti nilainya menjadi true untuk membuat tautan slideshow membuka ke tab/jendela baru secara otomatis ketika diklik.
    containerIdID kontainer penampung slideshow.
    slider => widthDigunakan untuk menentukan lebar slideshow.
    slider => heightDigunakan untuk menentukan tinggi slideshow.
    slider => timeOutJalan pintas untuk opsi timeOut pada plugin S3Slider (untuk mengatur kecepatan animasi).

    Konfigurasi Lain 

    Elemen <div class="s3slider loading"></div> ditambahkan sebagai elemen slideshow palsu yang nantinya akan menghilang ketika slideshow termuat. Ini diperlukan untuk mencegah tampilan tema Anda menjadi berantakan sebelum slideshow termuat. Di situ terdapat CSS ukuran lebar dan tinggi yang ukurannya disarankan untuk disamakan dengan opsi s3slider_config.slider.width dan s3slider_config.slider.height. Atau bisa juga diterapkan ke dalam CSS secara terpisah seperti ini untuk menjaga kebersihan markup HTML:

    .s3slider {
      width:420px;
      height:270px;
    }

    Menghilangkan Tanggal Terbit 

    Bisa dilakukan dengan menambahkan CSS ini:

    .s3slider-meta-date {display:none}

    Menghilangkan Jumlah Komentar 

    Bisa dilakukan dengan menambahkan CSS ini:

    .s3slider-meta-comment {display:none}

    39 Komentar

    • Unknown

      kok Pengaturan gambarnya gak ada ya jadi gimana caranya biar bisa mengganti gambarnya. .?

    • Taufik Nurrohman

      @system of blogGambar akan secara otomatis diproduksi dari gambar-gambar pada posting. Sebenarnya slideshow ini sama seperti widget recent post, cuma bentuknya saja yang dibuat menjadi Slideshow. Untuk mengatur tinggi dan lebar gambar sudah termasuk dalam pengaturan ukuran slideshow.

    • hot info news

      mas,, kalau mau merubah ukuran widget nya di jadiin lebih kecil lagi (lebar 330px),, bagaian apa aja yg harus dirubah ya??
      saya coba otak atik sendiri jadi berantakan mas :D

    • Taufik Nurrohman

      @secret agent Loh, kan sudah Saya tulis dengan jelas di kotak berwarna kuning x@

      #slider, #slider ul#sliderContent, #slider img {
      width:420px;  /* Tentukan lebar slideshow  */
      height:270px; /* Tentukan tinggi slideshow */
      }
    • imams061111

      mas di blog punya saya.
      kok gak muncul gambarnya,
      cuma ada kotak putih gtu.
      mohon pencerahanya.

      http://rowniie.blogspot.com

    • Taufik Nurrohman

      @imams061111 Slideshow ini hanya akan tampil jika halaman telah benar-benar selesai termuat. Mungkin karena blognya belum berhenti memuat jadi slideshow tidak terlihat.
      Tapi kalau mau mempercepat penampilan slideshow, bisa dengan cara mengubah kode yang tadinya seperti ini:

      $(window).bind('load', function() {
      $('#slider').css('background-image', 'none').s3Slider({
      timeOut:3000
      });
      });

      menjadi seperti ini:

      $(document).ready(function() {
      $('#slider').css('background-image', 'none').s3Slider({
      timeOut:3000
      });
      });
    • imams061111

      masih belum terlihat mas.
      padahal loadingnya uda selsesai.

    • Taufik Nurrohman

      @imams061111 Saya lihat di blog mas Imam ada dua buah versi JQuery (versi 1.3.2 dan 1.7.1).
      Coba, untuk kode JQuery yang ada pada widget recent post spylist di sidebar yang bentuknya seperti ini:

      <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>

      Lepas kode itu lalu simpan widget kembali. Setelah itu masuk ke halaman Editor HTML Template, kemudian untuk kode JQuery versi 1.7.1 seperti yang Saya tuliskan di atas (yang diberi garis bawah), ganti dengan kode yang baru saja dilepas.
      Simpan perubahan.

      Jika masih tidak berhasil seharusnya masalahnya ada di pengaturan feed posting. Tapi Saya tadi sempat mencoba mengakses URL http://rowniie.blogspot.com/atom.xml dan masih bisa terlihat keseluruhan posting di dalamnya. Seharusnya tidak akan ada masalah setelah ini.

    • imam

      uda mas :)
      terima kasih bnyak

      mau nanya lg mas.
      kalau ngatur agar gmparnya pas ditengah gmn??

    • Taufik Nurrohman

      @imam Seharusnya sih sudah meletakkan diri sendiri ke tengah secara otomatis, soalnya Saya sudah mengeset margin auto pada elemen #slider:

      #slider {
      margin:0px auto 10px;
      border:2px solid white;
      ...
      }

      [note]Terkait: Posisi Elemen di Tengah dengan CSS[/note]

    • imams061111

      kalau menamba rincianya gmn mas???
      soalnya punya saya itu tidak keliatan teksnya.

    • Taufik Nurrohman

      @imams061111 Untuk versi ini memang tidak bisa menampilkan deskripsi, karena Saya pikir itu berlebihan. Saat ini, slideshow yang memiliki deskripsi hanya AnythingSlider dan Custom TinyCarousel

      Suatu saat mungkin Saya akan membuat slideshow lain yang sederhana namun dengan ringkasan artikel, tapi bukan sekarang. Sedang tidak mood. Hehe... :p

    • Unknown

      bagus tapi kenapa di saya malah kepotong hari dan komenya coba chek di folvo.blogspot.com

    • Thomi Jasir

      kalo yang ini bagaimana cara menyisipkan sedikit deskripsi blog

    • Taufik Nurrohman

      @Thomi Jasir Tidak bisa. Tidak Saya sertakan.

    • Unknown

      Izin pasang mas bro :D

    • Andra Gembara

      tanks gan tutorialnya,,
      ane suka tmpilan blog agan, bisa jdi panutan ane Hehehe,,,,

    • TanggoOne

      Thanks Sob...sukses slalu...good job
      sudah aku aplikasikan di BLOG saya

    • Kang Arnot

      gan punya q ok ndak keluar... cuma kotak putih apa masalahnya

    • Kang Arnot

      saya ndk paham sama keterangan masalah ndak muncul cuma kotak putih diats gan.. tlng jlaskan scra detail apa penyebabnya.........

      • Taufik Nurrohman

        Harus menuggu sampai loadingnya berhenti. Kalau blogmu terbilang blog lambat, coba ganti kode ini:

        $(window).bind('load', function() {

        dengan ini:

        $(document).ready(function() {
    • Anonim

      Bro bisa ga yah biar ada arrow kanan kirinya gitu ?

      contoh : < gambar >

    • Diki

      mas taufik punyaku kok gak muncul-muncul yah pada hal loading blog dah selesai. :'(

    • Anonim

      Mas, ada nggak slideshow yg spt ini yang bisa dipasang pada postingan blog?

    • Unknown

      mas koq slideshownya hilang yah? sebelumnya bisa
      gara gara saya remomve css bundle??

    • Unknown

      Terimakasih atas tutornya mas, saya berhasil menerapkannya tanpa halangan, :)
      Semoga semakin bermanfaat :)

    • IRIL SAGITA

      kak, slideshow posting diatas jika gambar dan judulnya dibuat manual atau bukan berdasarkan postingan blog bagaimana cara merubah js nya kak, mohon bantuannya

    • stasiunagen

      punyaku kok keluarnya cuma kotak putih terus kalo mau keluar dari pengaturan blognya ada keterangan perubahan belum disimpan kira2 kenapa ya gan?

    • stasiunagen

      sdh ada kemajuan gan ,cuma poto yang mau keluar hanya poto di post 1 postingan selanjutnya cuma warna warni doang?

    • Unknown

      mas, mau tanya, itu slideshownya biar muncul di halaman home saja gimana ya caranya,soalnya punya saya kok muncul di setiap post, mohon bantuannya mas, thanks

      • Kang Ismet

        gunakan tag kondisional

        • Unknown

          Wah , kang ismet turun membantu kang taufik.
          hehehe , nice info , sudah berhasil di blog saya.

    • MrDoubleD

      Mas di blog saya ini sudah ada slideshow tapi slideshow yang ditampilkan tidak sama dengan postingan saya, agar merubah menjadi automatis tampil dari postingan bagaimana, mas?
      ini blog saya

    • MrDoubleD

      eh ini link blog nya mas ^_^ Dicky Dharmawan Blog

    • Unknown

      Maaf mas mau nanya. labelName nya kok ga bisa di ganti sesuai label ya. Yang tampil mengikuti posting terbaru. mhn pencerahannya. www.metrosuryanews.com

    • Unknown

      gan punya ane ko malah jadi berantakan mohon pencerahanya
      anuanuan17*.*blogspot*.com*

    Komentar telah ditutup.