Inilah cara membuat slider/slideshow efek animasi, dilengkapi posting gambar yang menarik menjadi salah satu fitur yang sangat umum bisa kita temukan di banyak blog/website dan biasanya slideshow ini dapat diterapkan baik hanya pada homepage atau halaman posting. Ada begitu banyak jenis slideshow di internet, apakah dengan cara menggunakan Javascript atau bahkan hanya dengan menggunakan CSS murni.
Berikut ini adalah slideshow yang sangat stylish dilengkapi animasi gambar. Fitur utamanya adalah efek gambar transisi, animasinya disediakan dengan puluhan efek dengan bantuan menggunakan JQuery dan easing effect. Slideshow ini dibuat dengan fitur lengkap untuk menampilkan isinya termasuk tombol navigasi (jika ingin ditampilkan) play/pause kontrol, nomor navigasi, progress bar dan kabar baiknya adalah dapat diatur sedemikian rupa bagi yang sudah berpengalaman.
Slider Responsive Demo bisa dibuka di komputer dan mobile.
Cara Membuat slider/slideshow di blog dilengkapi efek
Image: slideshow
Slider/Slideshow ini dasarnya di adaptasi dari skitter-slider yang dibuat oleh Thiago Silva Ferreira, gratis untuk penggunaan pribadi di bawah lisensi ganda, yaitu MIT License (open source) dan General Public License 2. Dirancang dengan gaya dan beberapa tema serta banyak pilihan untuk menyesuaikan, ukuran kode javascript standard sekitar 36 kb dalam versi minified, kompatibel untuk browser modern seperti Chrome, Firefox, Opera, Safari dan Internet Explorer.
Pada dasarnya dapat mengatur tampilan animasi dengan dikonfigurasi per gambar atau bisa juga dengan otomatis sesuai dengan struktur. Untuk membuat slider ini siap muncul, dapat dipraktekan hanya dalam instalasi beberapa menit, Jika tertarik berikut adalah cara membuat slideshow tersebut, ikuti langkah-langkah dibawah ini:
1. Masukan kode CSS berikut diatas atau sebelum ]]>
atau
Image: slideshow
Pada dasarnya dapat mengatur tampilan animasi dengan dikonfigurasi per gambar atau bisa juga dengan otomatis sesuai dengan struktur. Untuk membuat slider ini siap muncul, dapat dipraktekan hanya dalam instalasi beberapa menit, Jika tertarik berikut adalah cara membuat slideshow tersebut, ikuti langkah-langkah dibawah ini:
1. Masukan kode CSS berikut diatas atau sebelum
]]>
CSS slider/slideshow
Lihat sumber kode CSS klik disini skitterwide
Lihat sumber kode CSS klik disini skitterwide
1234
Catatan: Warna Oranye adalah link image navigasi, sebaiknya diganti atau diupload ke tempat masing-masing supaya pemakaian tidak terbagi-bagi, atau mungkin linknya nanti tidak berlaku lagi.
2. Masukan kode Jquery dan Jquery-easing script berikut diatas atau sebelum
JQuery slider/slideshow
12
Catatan: Jika sudah memasang JQuery (Biru) dengan versi lain, maka lewati langkah ini dan gunakan versi 2.x.x Tetapi untuk Jquery-easing (Orange) harus dipasang agar bisa berjalan.
3. Masih di bagian head, masukan kode JavaScript berikut diatas atau sebelum
Javascript slider/slideshow minified
lihat sumber kode (source code) disini skiter-slider-min.js
lihat sumber kode (source code) disini skiter-slider-min.js
1234
4. Selanjutnya, harap diperhatikan ada 2 metode untuk menerapkannya dalam HTML, yaitu metode manual dan otomatis publish posting.
Metode 1 slider/slideshow Manual
Masukan kode berikut disuatu tempat bagian HTML body, contohnya sebelum
atau
atau mungkin juga setelah
atau kira-kira posisi yang tepat, karena setiap blog memiliki nama yg berbeda-beda.
HTML slider/slideshow
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
">
Warna Biru adalah link posting, ungu adalah judul posting, pink adalah image link, merah adalah untuk pengaturan animasi tersendiri per image, Oranye adalah deskripsi posting. Coklat adalah kostumisasi pengaturan.
Metode 2 slider/slideshow Otomatis Publish
Jika menggunakan Platform Blogger, mungkin ingin publish posting secara otomatis, sebenarnya bisa publish recent post, per label, atau random post, berikut adalah otomatis publish artikel terbaru:
Masukan kode JavaScript berikut sebelum
di bagian head untuk recent posts.
Javascript slider/slideshow untuk artikel terbaru
123
Pink adalah link image gambar, secara otomatis tampil jika pada posting tidak terdapat gambar, jangan lupa linknya, mungkin dimasa mendatang tidak berlaku.
Masukan kode berikut disuatu tempat di bagian HTML body, contohnya setelah atau sebelum
atau
atau mungkin juga setelah
atau yang similar (yang cocok tempatnya) seperti langkah manual diatas.
HTML dan JavaScript slider/slideshow
12345678910111213141516171819202122232425262728
Oranye bisa dikostumisasi dengan banyak pilihan. Warna Hijau adalah baris kode pembuka dan penutup untuk menampilkan slider hanya di homepage, pelajari lebih tentang trik menampilkan dan menyembunyikan elemen disini.
5. Save Template, dan lihat hasilnya.
Mudah-mudahan bermanfaat.
Post a Comment