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:
Mengedit Tema
Untuk membuatnya, pertama-tama masuklah ke menu Tema kemudian klik Edit HTML dan klik Lanjutkan:
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:
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:
| 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 membuat widget ini menampilkan posting yang memiliki label Widget saja. |
| monthArray | Daftar nama bulan sesuai dengan sistem penanggalan di negaramu. |
| noImage | Gambar cadangan untuk posting yang tidak memiliki gambar. |
| newTabLink | Ganti nilainya menjadi true untuk membuat tautan slideshow membuka ke tab/jendela baru secara otomatis ketika 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 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}
