Cara menambahkan carousel image di blog wordpress ataupun blogger sama saja asal tahu kodenya. Dalam tulisan ini saya menyertakan contoh kode yang saya gunakan dan bagaimana hasilnya hanya dengan menggunakan HTML, CSS, dan Javascript.
Untuk blog wordpress masukkan kode berikut ini ke dalam blok CustomHTML, sedangkan untuk blogger bisa insert ke HTML view langsung.
Satu hal yang perlu diperhatikan, gambar-gambar yang ingin ditampilkan sebagai carousel harus sudah diupload dan diketahui alamatnya. Untuk contoh di sini, saya akan menampilkan gambar yang sudah pernah diupload ke blog saya yang lain.
Kode HTML, CSS, dan Javascript untuk carousel
Salin dulu kodenya, nantinya akan saya jelaskan di mana menambahkannya untuk masing-masing wordpress ataupun blogger.
Kode ini saya ubah dari hasil bertanya ke ChatGPT dan disesuaikan dengan kebutuhan saya.
Ini dia kodenya
<!-- Bagian pertama Style CSS -->
<style>
.ebook-carousel-wrapper {
width: 100%;
max-width: 260px;
margin: 0 auto;
overflow: hidden;
}
.ebook-carousel {
display: flex;
width: 100%;
overflow-x: hidden;
scroll-behavior: smooth;
}
.ebook-carousel a {
flex: 0 0 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.ebook-carousel img {
width: 220px;
height: 320px;
object-fit: contain;
display: block;
border-radius: 8px;
background: #f5f5f5;
}
</style>
<!-- Bagian kedua HTML carousel -->
<div class="ebook-carousel-wrapper">
<div class="ebook-carousel" id="ebookCarousel">
<a href="https://risna.info/e-book-cerita-dari-chiang-mai-2021/">
<img src="https://risna.info/wp-content/uploads/2026/06/cover-skripsi-2021.png" alt="Cerita dari Chiang Mai">
</a>
<a href="https://risna.info/e-book-catatan-membaca-buku-di-2022/">
<img src="https://risna.info/wp-content/uploads/2026/06/cover-Skripsi-Risna-2022.jpg" alt="Catatan Membaca 2022">
</a>
<a href="https://risna.info/e-book-jauh-berjalan-banyak-dilihat-di-2024/">
<img src="https://risna.info/wp-content/uploads/2026/06/cover-skripsi-2024.png" alt="Jauh Berjalan Banyak Dilihat">
</a>
</div>
</div>
<!-- Bagian ketiga Javascript untuk animasi carousel berganti setiap 3 detik -->
<script>
const carousel = document.getElementById("ebookCarousel");
const items = carousel.querySelectorAll("a");
let index = 0;
setInterval(() => {
index++;
if (index >= items.length) {
index = 0;
}
carousel.scrollTo({
left: carousel.clientWidth * index,
behavior: "smooth"
});
}, 3000);
</script>Menambahkan kode HTML ke blog WordPress
Cara paling praktis menambahkan kode HTML ke blog wordpress tentu saja menggunakan blok CustomHTML. Kodenya bisa disalin langsung ke halaman HTML saja, atau kalau template wordpressnya menyediakan bisa dipisah antara HTML, CSS, dan Javascript.
Yang perlu diingat, jika ingin membuat kodenya dalam halaman HTML saja, style CSS harus terlebih dahulu ada, lalu bagian HTML nya, dan kode Javascript di bagian akhir.
Berikut ini contoh hasil dari menambahkan kode yang diberikan di atas.
Bagaimana kalau ingin carousel berupa gambar yang tidak bisa diklik seperti menampilkan logo blog berikut ini.
Kodenya bisa dilihat di sini.
<style>
.the-carousel-wrapper {
width: 100%;
max-width:200px;
margin: 0 auto;
overflow: hidden;
}
.the-carousel {
display: flex;
width: 100%;
overflow-x: hidden;
scroll-behavior: smooth;
}
.the-carousel img {
width: 200px;
height: 200px;
object-fit: cover;
display:block;
border-radius: 8px;
background: #f2f6f7; /* Sets background color */
}
</style>
<div class="the-carousel-wrapper">
<div class="the-carousel" id="theCarousel" style="text-align: center;">
<img alt="Risna Info" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh88bXGA8Svi5blV8sbw8eKkW0fIwauYESSkhmhJTAH4r7skaNYxFxyOhyphenhyphenLCs2KmYND-2DF73kRiuKeGScmqvo8TKiRUBUztlSvRtSRrKflJ14KIN9Gd7IVageM0nrJxKGcD0QbuqtR/h240/risnainfo+logo.png" />
<img alt="Blog Compactbyte" border="0" src="https://blog.compactbyte.com/wp-content/uploads/2021/06/risna-logo-1.png" />
<img alt="Menulis Blog" src="https://menulis.blog/wp-content/uploads/2022/10/logo-menulis-blog.png" />
<img alt="AI Menulis Blog" src="https://ai.menulis.blog/wp-content/uploads/sites/2/2022/12/logo_ai_menulisblog.png" />
<img alt="drakorclass" src="https://drakorclass.com/logo/drakorclassdotcom02.png" />
</div>
</div>
<script>
const t_carousel = document.getElementById("theCarousel");
const t_items = t_carousel.querySelectorAll("img");
let t_index = 0;
setInterval(() => {
t_index++;
if (t_index >= t_items.length) {
t_index = 0;
}
t_carousel.scrollTo({
left: t_carousel.clientWidth * t_index,
behavior: "smooth"
});
}, 3000);
</script>Bandingkan kode ini dengan kode sebelumnya untuk melihat apa perbedaannya. Kalau kurang jelas, bisa bertanya ke AI untuk menjelaskan kodenya.
Menambahkan kode HTML ke blog Blogger
Kode yang sama bisa ditambahkan ke blogger. Tergantung mau dimasukkan ke bagian mana dari blog. Kalau ingin dimasukkan ke bagian dari post, kita bisa masukkan saja melalui HTML view.
Untuk memasukkan ke bagian sidebar atau template dari blog kita bisa masukkan ke widget dari template kita (tergantung template blog yang digunakan).
Contoh carousel di blogger bisa dilihat langsung di Blogger Menulis Blog.
Sebagai blogger, kita perlu mulai belajar HTML, CSS, dan Javascript. Saya merasa dengan adanya bantuan AI, belajar hal-hal ini juga semakin mudah. Kalau ada yang kurang jelas dari tulisan ini, termasuk cara mendapatkan url dari image yang ingin ditambahkan ke dalam carousel, silakan tanya ke AI saja ya.