Contoh Carousel Image di Blogger

Carousel digunakan untuk melihat beberapa gambar yang otomatis berganti sendiri.  Gambar tersebut bisa dihubungkan dengan tautan ke sebuah halaman lainnya atau tidak.

Kode menampilkan carousel image untuk di blogger maupun di Wordpress berupa HTML+CSS+Javascript sama saja untuk di Wordpress dan blogger. Caranya mirip dengan cara menambahkan FAQ Accordion menggunakan CSS + Javascript.

Kode untuk menambahkan carousel seperti contoh berikut bisa disalin dari halaman Menulis.blog

Untuk menambahkan di bagian blog post di blogger tentunya kita perlu menambahkan kodenya ke editor HTML view. Caranya dari sudut kiri atas yang ada di bawah judul, ubah dari Compose View ke HTML View, lalu menyalin kodenya ke bagian yang diinginkan.

Contoh Carousel E-book

Berikut ini contoh hasil menambahkan carousel e-book dari situs Risna.info. Pada carousel ini, ketika gambar sampul buku diklik, maka kita akan dibawa ke halaman e-book dalam tab baru.

Menambahkan Carousel ke Sidebar

Cara menambahkan ke sidebar blogger seperti pada blog ini, tergantung dengan template yang digunakan. Untuk blog ini karena menggunakan template bawaan dari blogger,  kita bisa menambahkan gadget dari layout template.

1.  Pilih Layout

2.  Add a Gadget pada bagian Sidebar

3. Pilih HTML/JavaScript

4. Salin kodenya

Contoh Carousel Image tanpa Tautan

Gambar-gambar di sini bisa diklik dan akan membuka halaman e-booknya, akan tetapi jika ingin menampilkan gambar saja yang tidak ingin diklik juga bisa.  Kita tidak membutuhkan tag <a> dan cukup menggunakan tag <img> saja

Contohnya bisa dilihat di sini

Penjelasan lebih lengkap termasuk scriptnya bisa dibaca di Menulis.blog ya.