Mecha versi 2.6.3 sudah dirilis!

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 [email protected]

    #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

    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??

    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

    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.