Slideshow Otomatis Blogger Dengan S3slider - Dewa Blogger

Halaman

    Social Items

Buy Now

Pembaharuan: 28 November 2013

 sederhana namun selalu mempunyai kesan tegas dan berpengaruh bagi Saya Slideshow Otomatis Blogger dengan S3Slider

S3Slider yakni sebuah slideshow sederhana namun selalu mempunyai kesan tegas dan berpengaruh bagi Saya. Itulah yang dulu menciptakan Saya menentukan ini sebagai slideshow pertama yang Saya terapkan di blog ini. Sampai pada karenanya Saya tetapkan berpindah ke Nivo. Dan kini Saya sudah tidak lagi menggunakan slideshow manapun di blog ini alasannya yakni merasa tidak memerlukannya lagi.

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

Lihat Demo

Mengedit Tema

Untuk membuatnya, pertama-tama masuklah ke sajian Tema kemudian klik Edit HTML dan klik Lanjutkan:

 sederhana namun selalu mempunyai kesan tegas dan berpengaruh bagi Saya Slideshow Otomatis Blogger dengan S3Slider
Mengedit HTML

Temukan arahan ini:

]]></b:skin>

Salin arahan 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,R0lGODlhEAAQAPYAAP///wAAANTU1JSUlGBgYEBAQERERG5ubqKiotzc3KSkpCQkJCgoKDAwMDY2Nj4+Pmpqarq6uhwcHHJycuzs7O7u7sLCwoqKilBQUF5eXr6+vtDQ0Do6OhYWFoyMjKqqqlxcXHx8fOLi4oaGhg4ODmhoaJycnGZmZra2tkZGRgoKCrCwsJaWlhgYGAYGBujo6PT09Hh4eISEhPb29oKCgqioqPr6+vz8/MDAwMrKyvj4+NbW1q6urvDw8NLS0uTk5N7e3s7OzsbGxry8vODg4NjY2PLy8tra2np6erS0tLKyskxMTFJSUlpaWmJiYkJCQjw8PMTExHZ2djIyMurq6ioqKo6OjlhYWCwsLB4eHqCgoE5OThISEoiIiGRkZDQ0NMjIyMzMzObm5ri4uH5+fpKSkp6enlZWVpCQkEpKSkhISCIiIqamphAQEAwMDKysrAQEBJqamiYmJhQUFDg4OHR0dC4uLggICHBwcCAgIFRUVGxsbICAgAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAAHjYAAgoOEhYUbIykthoUIHCQqLoI2OjeFCgsdJSsvgjcwPTaDAgYSHoY2FBSWAAMLE4wAPT89ggQMEbEzQD+CBQ0UsQA7RYIGDhWxN0E+ggcPFrEUQjuCCAYXsT5DRIIJEBgfhjsrFkaDERkgJhswMwk4CDzdhBohJwcxNB4sPAmMIlCwkOGhRo5gwhIGAgAh+QQJCgAAACwAAAAAEAAQAAAHjIAAgoOEhYU7A1dYDFtdG4YAPBhVC1ktXCRfJoVKT1NIERRUSl4qXIRHBFCbhTKFCgYjkII3g0hLUbMAOjaCBEw9ukZGgidNxLMUFYIXTkGzOmLLAEkQCLNUQMEAPxdSGoYvAkS9gjkyNEkJOjovRWAb04NBJlYsWh9KQ2FUkFQ5SWqsEJIAhq6DAAIBACH5BAkKAAAALAAAAAAQABAAAAeJgACCg4SFhQkKE2kGXiwChgBDB0sGDw4NDGpshTheZ2hRFRVDUmsMCIMiZE48hmgtUBuCYxBmkAAQbV2CLBM+t0puaoIySDC3VC4tgh40M7eFNRdH0IRgZUO3NjqDFB9mv4U6Pc+DRzUfQVQ3NzAULxU2hUBDKENCQTtAL9yGRgkbcvggEq9atUAAIfkECQoAAAAsAAAAABAAEAAAB4+AAIKDhIWFPygeEE4hbEeGADkXBycZZ1tqTkqFQSNIbBtGPUJdD088g1QmMjiGZl9MO4I5ViiQAEgMA4JKLAm3EWtXgmxmOrcUElWCb2zHkFQdcoIWPGK3Sm1LgkcoPrdOKiOCRmA4IpBwDUGDL2A5IjCCN/QAcYUURQIJIlQ9MzZu6aAgRgwFGAFvKRwUCAAh+QQJCgAAACwAAAAAEAAQAAAHjIAAgoOEhYUUYW9lHiYRP4YACStxZRc0SBMyFoVEPAoWQDMzAgolEBqDRjg8O4ZKIBNAgkBjG5AAZVtsgj44VLdCanWCYUI3txUPS7xBx5AVDgazAjC3Q3ZeghUJv5B1cgOCNmI/1YUeWSkCgzNUFDODKydzCwqFNkYwOoIubnQIt244MzDC1q2DggIBACH5BAkKAAAALAAAAAAQABAAAAeJgACCg4SFhTBAOSgrEUEUhgBUQThjSh8IcQo+hRUbYEdUNjoiGlZWQYM2QD4vhkI0ZWKCPQmtkG9SEYJURDOQAD4HaLuyv0ZeB4IVj8ZNJ4IwRje/QkxkgjYz05BdamyDN9uFJg9OR4YEK1RUYzFTT0qGdnduXC1Zchg8kEEjaQsMzpTZ8avgoEAAIfkECQoAAAAsAAAAABAAEAAAB4iAAIKDhIWFNz0/Oz47IjCGADpURAkCQUI4USKFNhUvFTMANxU7KElAhDA9OoZHH0oVgjczrJBRZkGyNpCCRCw8vIUzHmXBhDM0HoIGLsCQAjEmgjIqXrxaBxGCGw5cF4Y8TnybglprLXhjFBUWVnpeOIUIT3lydg4PantDz2UZDwYOIEhgzFggACH5BAkKAAAALAAAAAAQABAAAAeLgACCg4SFhjc6RhUVRjaGgzYzRhRiREQ9hSaGOhRFOxSDQQ0uj1RBPjOCIypOjwAJFkSCSyQrrhRDOYILXFSuNkpjggwtvo86H7YAZ1korkRaEYJlC3WuESxBggJLWHGGFhcIxgBvUHQyUT1GQWwhFxuFKyBPakxNXgceYY9HCDEZTlxA8cOVwUGBAAA7AAAAAAAAAAAA');   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 sajian Tata Letak kemudian tambahkan sebuah elemen halaman HTML/JavaScript yang terletak di bab atas posting. Karena di situlah letak ideal untuk menampilkan slideshow:

 sederhana namun selalu mempunyai kesan tegas dan berpengaruh bagi Saya Slideshow Otomatis Blogger dengan S3Slider
Menambahkan widget

Salin arahan 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 kemudian simpan.

Kode yang Saya beri garis bawah yakni jQuery. Jika tema Anda sudah dilengkapi dengan jQuery, singkirkan arahan tersebut!


Konfigurasi Widget

Berikut ini yakni tabel pengaturan variabel widget beserta penjelasannya:

Opsi Keterangan
url Ganti nilainya dengan URL blog Anda.
numPost Tentukan jumlah posting yang ingin ditampilkan pada widget ini.
labelName Ubah nilainya menjadi nama label untuk menampilkan posting dengan label tertentu (Sebagai contoh, menentukan nilai labelName menjadi "Widget" akan menciptakan widget ini menampilkan posting yang mempunyai label Widget saja.
monthArray Daftar nama bulan sesuai dengan sistem penanggalan di negaramu.
noImage Gambar cadangan untuk posting yang tidak mempunyai gambar.
newTabLink Ganti nilainya menjadi true untuk menciptakan tautan slideshow membuka ke tab/jendela gres secara otomatis dikala diklik.
containerId ID kontainer penampung slideshow.
slider => width Digunakan untuk menentukan lebar slideshow.
slider => height Digunakan untuk menentukan tinggi slideshow.
slider => timeOut Jalan 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 dikala slideshow termuat. Ini diharapkan untuk mencegah tampilan tema Anda menjadi acak-acakan 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 sanggup juga diterapkan ke dalam CSS secara terpisah ibarat 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}

Sumber https://www.dte.web.id/

Slideshow Otomatis Blogger Dengan S3slider

Pembaharuan: 28 November 2013

 sederhana namun selalu mempunyai kesan tegas dan berpengaruh bagi Saya Slideshow Otomatis Blogger dengan S3Slider

S3Slider yakni sebuah slideshow sederhana namun selalu mempunyai kesan tegas dan berpengaruh bagi Saya. Itulah yang dulu menciptakan Saya menentukan ini sebagai slideshow pertama yang Saya terapkan di blog ini. Sampai pada karenanya Saya tetapkan berpindah ke Nivo. Dan kini Saya sudah tidak lagi menggunakan slideshow manapun di blog ini alasannya yakni merasa tidak memerlukannya lagi.

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

Lihat Demo

Mengedit Tema

Untuk membuatnya, pertama-tama masuklah ke sajian Tema kemudian klik Edit HTML dan klik Lanjutkan:

 sederhana namun selalu mempunyai kesan tegas dan berpengaruh bagi Saya Slideshow Otomatis Blogger dengan S3Slider
Mengedit HTML

Temukan arahan ini:

]]></b:skin>

Salin arahan 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 sajian Tata Letak kemudian tambahkan sebuah elemen halaman HTML/JavaScript yang terletak di bab atas posting. Karena di situlah letak ideal untuk menampilkan slideshow:

 sederhana namun selalu mempunyai kesan tegas dan berpengaruh bagi Saya Slideshow Otomatis Blogger dengan S3Slider
Menambahkan widget

Salin arahan 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 kemudian simpan.

Kode yang Saya beri garis bawah yakni jQuery. Jika tema Anda sudah dilengkapi dengan jQuery, singkirkan arahan tersebut!


Konfigurasi Widget

Berikut ini yakni tabel pengaturan variabel widget beserta penjelasannya:

Opsi Keterangan
url Ganti nilainya dengan URL blog Anda.
numPost Tentukan jumlah posting yang ingin ditampilkan pada widget ini.
labelName Ubah nilainya menjadi nama label untuk menampilkan posting dengan label tertentu (Sebagai contoh, menentukan nilai labelName menjadi "Widget" akan menciptakan widget ini menampilkan posting yang mempunyai label Widget saja.
monthArray Daftar nama bulan sesuai dengan sistem penanggalan di negaramu.
noImage Gambar cadangan untuk posting yang tidak mempunyai gambar.
newTabLink Ganti nilainya menjadi true untuk menciptakan tautan slideshow membuka ke tab/jendela gres secara otomatis dikala diklik.
containerId ID kontainer penampung slideshow.
slider => width Digunakan untuk menentukan lebar slideshow.
slider => height Digunakan untuk menentukan tinggi slideshow.
slider => timeOut Jalan 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 dikala slideshow termuat. Ini diharapkan untuk mencegah tampilan tema Anda menjadi acak-acakan 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 sanggup juga diterapkan ke dalam CSS secara terpisah ibarat 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}

Sumber https://www.dte.web.id/