Slideshow Otomatis Blogger dengan SLIDES
Pembaharuan: 1 Desember 2013
Saya menggunakan versi terakhir dari SLIDES yaitu pada 5 Februari 2013 (versi 1.2.0):
Tahap 1: 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:
/*! SlidesJS for Blogger by Taufik Nurrohman <http://gplus.to/tovic> */
/* Main */
.slidesJS-frame {
width:739px;
height:341px;
background:transparent url('http://lh5.googleusercontent.com/-CPP57QQsIKk/UpnvzwVwYwI/AAAAAAAAIYs/WpSvq-mh9bQ/s1600/slidesJS-frame.png') no-repeat 50% 50%;
margin:0 auto;
}
.slidesJS {
background-color:#F0F0F0;
position:relative;
top:18px;
left:84px;
}
.slidesJS-container {
position:relative;
overflow:hidden;
display:none;
}
/* Next & Prev */
.slidesJS-next,
.slidesJS-prev {
position:absolute;
top:50%;
left:-39px;
width:24px;
height:43px;
margin-top:-21px;
background:transparent url('http://lh6.googleusercontent.com/-GRIwFsYLCCE/UpntR8pxmrI/AAAAAAAAIYQ/x4DQEB7bDbI/s1600/slidesJS-arrow-prev.png') no-repeat 50% 50%;
display:block;
overflow:hidden;
text-indent:-9999px;
}
.slidesJS-next {
background-image:url('http://lh6.googleusercontent.com/-kgnU17H_E6M/UpnsAEhoiZI/AAAAAAAAIYA/NxTUozUJ8Cc/s1600/slidesJS-arrow-next.png');
right:-39px;
left:auto;
}
/* Pagination */
.slidesJS-pagination {
list-style:none;
margin:26px auto 0;
padding:0;
width:auto;
text-align:center;
}
.slidesJS-pagination li {
display:inline-block;
*display:inline;
margin:0 1px;
padding:0;
list-style:none;
}
.slidesJS-pagination a {
display:block;
width:12px;
height:12px;
background: transparent url('http://lh3.googleusercontent.com/-QltA5Dq8IbM/UpnwkpOTW5I/AAAAAAAAIZE/Dp3_T14wmaI/s1600/slidesJS-pagination.png') 50% 0;
text-indent:-999px;
overflow:hidden;
}
.slidesJS-pagination li.current a {background-position:0 -12px}
/* Caption */
.slidesJS-caption {
display:none;
position:absolute;
right:0;
bottom:0;
left:0;
z-index:500;
padding:5px 20px 10px;
background-color:black;
background-color:rgba(0,0,0,.5);
font:normal normal 13px/1.33 Helmet,Freesans,Sans-Serif;
color:white;
border-top:1px solid black;
text-shadow:none;
}
.slidesJS-title a {
color:white;
text-decoration:none;
}
.slidesJS-title a:focus,
.slidesJS-title a:hover {text-decoration:underline}
.slidesJS-meta:before {content:" - "}
.slidesJS-meta-comment {display:none}
/* Ribbon */
.slidesJS-ribbon {
display:block;
/* display:none; <= uncomment this declaration to hide the ribbon */
width:112px;
height:112px;
position:absolute;
top:-19px;
left:-19px;
z-index:500;
background:transparent url('http://lh5.googleusercontent.com/-m3mnN0lLn-c/UpnwqLR_vMI/AAAAAAAAIZM/fyQzMaLIfao/s1600/slidesJS-ribbon.png') no-repeat 0 0;
}
Klik Simpan Tema.
Tahap 2: Meletakkan Slideshow
Masuklah ke menu Tata Letak kemudian tambahkan sebuah elemen halaman HTML/JavaScript yang terletak di bagian atas posting:
Salin kode di bawah ini kemudian letakkan di dalam formulirnya:
<div class="slidesJS-frame" id="slidesJS-frame">
<div class="slidesJS" id="slidesJS"></div>
</div>
<div style="clear:both;"></div><script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script>
var slidesJS_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: 'slidesJS',
slider: {
width: 570,
height: 270,
preload: true,
preloadImage: "//lh3.googleusercontent.com/-SrchH_T_dag/UpnwHVaUkCI/AAAAAAAAIY4/kAG7IM7kMT8/s1600/slidesJS-loading.gif",
generateNextPrev: true,
nextText: "Berikutnya",
prevText: "Sebelumnya",
pagination: true,
generatePagination: true,
prependPagination: false,
fadeSpeed: 350,
fadeEasing: "",
slideSpeed: 350,
slideEasing: "",
start: 1,
effect: "slide",
crossfade: false,
randomize: false,
play: 5000,
pause: 0,
hoverPause: true,
bigTarget: false,
animationStart: function(current) {
$('.slidesJS-caption', '.' + this.container).slideUp(100);
},
animationComplete: function(current) {
$('.slidesJS-caption', '.' + this.container).slideDown(200);
},
slidesLoaded: function() {
$('.slidesJS-caption', '.' + this.container).slideDown(200);
}
}
};
</script>
<script src="//dte-project.googlecode.com/svn/trunk/blogger-slidesjs.js"></script>
Ganti kode yang Saya beri tanda 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
Opsi | Keterangan |
---|---|
url | Ganti nilainya dengan URL blog Anda. |
numPost | Digunakan untuk menentukan jumlah posting yang ingin ditampilkan. |
labelName | Ganti nilainya dengan nama label untuk menampilkan posting berlabel spesifik. Misalnya labelName: "jQuery" akan membuat slideshow hanya menampilkan posting yang memiliki label jQuery. |
monthArray | Daftar nama-nama bulan sesuai dengan sistem penanggalan di negaramu. |
noImage | URL gambar cadangan untuk posting yang tidak memiliki gambar. |
newTabLink | Jika bernilai true , semua tautan pada slideshow akan membuka ke tab/jendela baru secara otomatis ketika diklik. |
containerId | ID kontainer penampung widget. |
slider => width | Digunakan untuk menentukan lebar slideshow. |
slider => height | Digunakan untuk menentukan tinggi slideshow. |
slider => preload | Jika bernilai false , efek animasi akan dimulai segera sesaat ketika JSON berhasil dimuat. Ini akan membuat halaman seolah termuat lebih cepat. Hanya saja, karena animasi dimulai terlalu cepat (sebelum semua gambar termuat) akibatnya itu akan membuat animasi slideshow menjadi tidak rapi pada saat permulaan. |
slider => preloadImage | URL gambar animasi memuat slideshow. |
slider => generateNextPrev | Jika bernilai false , navigasi Next & Prev tidak akan tampil. |
slider => nextText | Label navigasi Next. |
slider => prevText | Label navigasi Prev. |
slider => generatePagination | Jika bernilai false , navigasi 1, 2, 3, … tidak akan tampil. |
slider => prependPagination | Opsi untuk menyisipkan navigasi angka dari sebelah atas slideshow. Secara normal, navigasi angka akan disisipkan dari sebelah bawah. |
slider => fadeSpeed | Digunakan untuk menentukan kecepatan animasi jika opsi effect bernilai "fade" . |
slider => fadeEasing | Digunakan untuk menentukan easing animasi jika opsi effect bernilai "fade" . |
slider => slideSpeed | Digunakan untuk menentukan kecepatan animasi jika opsi effect bernilai "slide" . |
slider => slideEasing | Digunakan untuk menentukan easing animasi jika opsi effect bernilai "slide" . |
slider => start | Digunakan untuk menentukan urutan slide yang akan ditampilkan pertama kali. |
slider => effect | Digunakan untuk menentukan tipe efek animasi. Pilihannya ada dua: slide dan fade. |
slider => crossfade | Digunakan untuk menentukan apakah efek perpindahan slide (khusus efek fade ) akan dilakukan dengan cara memudarkan slide yang tampil, kemudian pada saat yang bersamaan menampilkan slide setelahnya (true ) atau dengan cara memudarkan slide yang tampil, menunggu sampai efek pemudaran berakhir, lalu slide berikutnya ditampilkan (false ). |
slider => randomize | Jika bernilai true , maka plugin akan berusaha untuk mengacak urutan slide. |
slider => play | Digunakan untuk menentukan lama waktu berhenti sementara setelah animasi terjadi. |
slider => pause | Digunakan untuk menentukan lama waktu berhenti sementara setelah pengguna mengeklik tombol navigasi. |
slider => bigTarget | Jika bernilai true setiap gambar pada slide akan berfungsi sebagai navigasi. Ketika gambar tersebut diklik, maka slide berikutnya akan tampil. |
slider => animationStart | Opsi untuk menerapkan fungsi bebas yang akan bekerja ketika animasi perpindahan slide dimulai. |
slider => animationComplete | Opsi untuk menerapkan fungsi bebas yang akan bekerja ketika animasi perpindahan slide selesai. |
slider => slidesLoaded | Opsi untuk menerapkan fungsi bebas yang akan bekerja ketika slideshow telah berhasil termuat. |
Contoh Penerapan Efek Fade
var slidesJS_config = {
...
slider: {
...
fadeSpeed: 350,
fadeEasing: "",
effect: "fade",
...
}
};
Contoh Penerapan Easing
Untuk menerapkan efek percepatan kustom, plugin Easing jQuery dibutuhkan di sini:
var slidesJS_config = {
...
slider: {
...
slideSpeed: 1000,
slideEasing: "easeInOutBack",
effect: "slide",
...
}
};
Contoh Penerapan crossfade: true
var slidesJS_config = {
...
slider: {
...
fadeSpeed: 350,
fadeEasing: "",
effect: "fade",
crossfade: true ...
}
};
Tema Polos untuk Modifikasi
Kode CSS ini adalah kode minimal untuk pembentukan tata letak slideshow. Selebihnya bisa dimodifikasi sesuai dengan desain tema:
/* Main */
.slidesJS-frame {
background-color:white;
width:570px; /* samakan dengan lebar slideshow */
height:270px; /* samakan dengan tinggi slideshow */
border:4px solid black;
margin:0 auto;
}
.slidesJS {
background-color:#f0f0f0;
position:relative;
font:normal normal 11px/normal Helmet,Freesans,Sans-Serif;
}
.slidesJS-container {
position:relative;
overflow:hidden;
display:none;
}
/* Next & Prev */
.slidesJS-next,
.slidesJS-prev {
display:block;
float:left;
background-color:black;
color:white;
font-weight:bold;
text-decoration:none;
height:20px;
line-height:20px;
padding:0 7px;
margin:8px 0 0;
overflow:hidden;
}
.slidesJS-next {float:right}
/* Pagination */
.slidesJS-pagination {
list-style:none;
margin:8px auto 0;
padding:0;
width:auto;
text-align:center;
}
.slidesJS-pagination li {
list-style:none;
display:inline-block;
*display:inline;
margin:0 2px;
padding:0;
}
.slidesJS-pagination a {
display:block;
background-color:black;
color:white;
font-weight:bold;
text-decoration:none;
height:20px;
line-height:20px;
padding:0 7px;
overflow:hidden;
}
.slidesJS-next:hover,
.slidesJS-prev:hover,
.slidesJS-pagination li.current a {background-color:blue}
/* Caption */
.slidesJS-caption {
display:none;
position:absolute;
right:0;
bottom:0;
left:0;
z-index:500;
padding:8px 10px 10px;
background-color:black;
background-color:rgba(0,0,0,.5);
font:normal normal 13px/1.33 Helmet,Freesans,Sans-Serif;
color:white;
}
.slidesJS-title a {
color:white;
text-decoration:none;
}
.slidesJS-title a:focus,
.slidesJS-title a:hover {text-decoration:underline}
.slidesJS-meta:before {content:" - "}
.slidesJS-meta-comment {display:none}
/* Ribbon */
.slidesJS-ribbon {display:none}
31 Komentar
Unknown
saya sudah melihat. kerja yang bagus, namun kami ingin anda memberikan permintaan kepada pengguna anda tentang feedback dari tutorial ini. Sebab position:absolute sangat tergantung pada jenis template yang digunakan
Unknown
cuma bisa nyimak aja :D
Taufik Nurrohman
@Putri ArisnawatiSaya sudah menyadari itu dari SLIDES versi aslinya yang hanya menggunakan elemen absolut. Itulah sebabnya mengapa Saya membungkus kembali slider ini dengan
<div id="slides-outer">
yang mengandungposition:relative
.Dari posting ini Saya rasa bisa dengan mudah dimengerti: http://hompimpaalaihumgambreng.blogspot.com/2011/12/posisi-absolute-pada-elemen-induk.html :)
Taufik Nurrohman
@Syndicate OSHahaha.. dicoba saja mas :)
Unknown
Mas, ko saya coba pakai semua slider otomatisnya ga bekerja di blog saya ya??
Taufik Nurrohman
@Mug Jaya Saya punya satu pertanyaan: Apakah slideshow tidak bekerja karena semua slide tidak tampil atau slideshow tidak bekerja karena slide tidak bergerak?
Unknown
Asik nih mas berhasil dipasang, thanks mas taufik... :D
Unknown
Kok Gagal ya????
Maaf Bisa Beri tahu saya tentang Slide yang sedang anda pakai sekarang???
Taufik Nurrohman
@Admin Zokufo Unit 111 Nivo Slider /2012/02/konfigurasi-jquery-nivo-slider.html
Unknown
terima kasih mas, sudah saya pakai loh :)
kunjungi blog saya juga ya.
metrotipi.blogspot.com
Unknown
kalau slide dengan gambar sendiri gimana bang??
soalnya saya mau menambahkan foto-foto kenangan dengan slide seperti ini di blog saya.. he
Taufik Nurrohman
Kunjungi saja situs sumbernya: SLIDES, lalu unduh slideshow-nya. Markup HTML manual harusnya akan menjadi seperti ini:
Unknown
maksih bang, sudah berhasil.... :)
Imron Fhatoni
assalamualaikum mas taufik saya mau nanya saya sudahmencoba menerapkan semua tutorial slideshow yang ada di dte mas taufik tapi yang mau saya tanyakan pada url tujuan misalnya seperti ini mas
/search/label/Widged?max-results=7
tapi hasil penelusuran diblog saya malah tidak ada atau seperti gambar ini mas
kira-kira bagaimana solusinya mas taufik mohon pencerahannya
Taufik Nurrohman
Waalaikumsalam. Mungkin maksudnya Widget.
Imron Fhatoni
maksudnya label hasil penelusuranya tidak ditemukan mas taufik padahal pada url tujuannya sudah saya arahkan ke hasil penelusuran label tapi kalau url tersebut saya gunakan pada slider malah hasilnya tidak ditemukan mas.. :)
Unknown
assalamu alaikum, mas taufik.
mas, saya mau tanya, nih.
untuk slide seperti contoh ini: http://www.dreamcss.com/2009/04/create-beautiful-jquery-sliders.html
itu gimana caranya agar bisa dipasang ke blogger?
sekian mas, pertanyaan saya.
sekiranya bisa segera ditanggapi :D
Taufik Nurrohman
Waalaikumsalam. Kalau sudah tahu mana kode CSS, HTML dan JavaScript, kira-kira meletakkannya begini:
1. Kode CSS di dalam
<b:skin>
1. Kode HTML di dalam
<body>
1. Kode JavaScript di atas
</body>
Unknown
kurang faham, mas :(
bisa dibantu, ga?
soalnya untuk head dan body di kode htmlnya udah ada, jadinya bingung soalnya ga bisa 2, kan?
maklum, mas.
moga berkenan, maaf merepotkan.
Unknown
update di terima mas..coba saya praktekkan dulu. :D . Tanya dulu nih mas masih pakai googlecode ya mas gak khawatir di band lagi mas...
Taufik Nurrohman
Cuma orang-orang yang tidak mengerti soal kesalahan yang menyebabkan terkena ban saja yang akan takut terkena ban lagi. Kesempatan ke dua. Kalaupun nanti pada akhirnya terkena ban lagi meski sudah mengikuti semua aturan yang ada, berarti Google tidak profesional. Tidak masalah, Saya sudah membuat salinannya di Dropbox. Tapi nanti setiap tautan akan lebih baik kalau Saya bagikan dalam artikel khusus kalau semuanya sudah cukup beres.
Untuk para pengguna, Saya sarankan agar mengunduh setiap berkas kode yang Saya unggah ke akun Google Code Saya dan mengunggahnya ke akun Google masing-masing. Kalau belum begitu mengerti mengenai Google Code, gunakan Google Drive atau Your JavaScript.
Farrij Annafi'u
sipp berhasil di pasang :-bd , tapi ada satu pertanyaan. Agar slide nya cuma tampil di hompage gimana ya? Makasih :D
MrDoubleD
:'( gak bisa di pasang nih om. Tolong di check Dicky Dharmawan Blog . Tadinya ada slideshow bawaan template dan gak berfungsi / gambarnya tidak sesuai dengan postingan terus saya coba hapus scriptnya di "tata letak" yang di "edit html" gak tau cara hapusnya dan saya gantikan dengan slideshow yang om ajarkan tapi gak berhasil.
Fadhli Ihsan
mas, untuk menjalankan slide nya apa mesti di klik tanda arrow netx-back nya?
kalau jalan otomatis dgn waktu tertentu gimana cara nya mas?
thx
Taufik Nurrohman
Dibaca dulu tabelnya mas, dan terutama dilihat juga halaman demonya.
Fadhli Ihsan
udah bisa mas :)
thanks banget
satu lagi mas, penggunaan slide : "easeInOutBack", gak bisa toh mas? malah gak berfungsi -__
trus cara kasih border img frame nya dimana mas? :0
Taufik Nurrohman
Mungkin kamu belum masang plugin ini.
Fadhli Ihsan
waah terimakasih mas.
mantap nih tutor nya
:D
oh iya, pas saya coba search artikel di kotak pencarian, gimana cara bikin animasi loading nya?
Unknown
tolong bantu aku. slider tidak bekerja.
foto tidak muncul
solusi silahkan
Unknown
coba diperhatikan lagi disitu kita disuruh untuk ganti dengan nama blog, siapa tahu mas Nader belum ganti.
Unknown
makasih banyak .....