Pembaharuan: 28 November 2013
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:
Mengedit Tema
Untuk membuatnya, pertama-tama masuklah ke sajian Tema kemudian klik Edit HTML dan klik Lanjutkan:
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:
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}