Slideshow Otomatis Blogger dengan S3Slider
Tabel Konten
Pembaharuan: 28 November 2013
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}
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@
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:
menjadi seperti ini:
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:
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
:[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:
dengan ini:
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 :)
Unknown
oiya, ada satu pertanyaan saya, bagaimana agar slide nya hanya tampil di home saja ?, terimakasih sebelumya :)
Taufik Nurrohman
⇒ /2012/03/tip-membuat-halaman-muka-blog.html
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
Taufik Nurrohman
Jangan lupa tanda petik →
labelName: "nama label"
Unknown
gan punya ane ko malah jadi berantakan mohon pencerahanya
anuanuan17*.*blogspot*.com*