Cara Memasang Image Slider di Postingan Blog

Cara Memasang Image Slider di Postingan Blog - Memasang gambar dengan fungsi geser sebenarnya merupakan opsional, artinya boleh dipasang dan boleh tidak. Tapi jika merasa fitur ini penting, maka tidak ada salahnya untuk digunakan agar tampilan blog menjadi lebih menarik.

Tapi mungkin kamu berpikir, apakah image slider mempengaruhi loading blog? Tenang saja, script yang digunakan hanya berupa HTML dan CSS. Adapun kedua script tersebut dapat digunakan di postingan / halaman atau bahkan HTML template.

Namun sebelum melangkah lebih jauh, ada baiknya untuk mengetahui apa itu slider image terlebih dahulu.

Apa itu Image Slider?

Image slider atau yang biasa disebut dengan Carousel adalah pengelompokan gambar atau foto dengan fungsi geser (slide show). Fitur ini biasanya digunakan karena dapat membuat halaman web menjadi lebih hidup.

Oh iya, slider yang saya bagikan kali ini sengaja tidak dibuat otomatis untuk menghindari penggunaan JavaScript. Hal tersebut bertujuan agar loading blog tetap optimal saat diakses oleh pengunjung.

Rekomendasi:

• 20+ Cloud Storage Terbaik di Tahun 2024
• Negara dengan CPC Google AdSense Tertinggi di Tahun 2024
• Cara Mudah Memasang Notifikasi Cookies di Blog

Adapun kelebihan dari slider ini yaitu:

1. Responsive
2. Tanpa JavaScript
3. Struktur kode rapi
4. Mudah digunakan.

Seperti yang disebutkan di atas, widget ini responsive di berbagai perangkat. Artinya, gambar akan dimuat berdasarkan ukuran layar perangkat.

Cara Memasang Image Slider di Postingan Blog

• Masuk ke BLOGGER
• Piiih TEMA
• Pilih EDIT HTML
• Tempel di atas ]]></b:skin>:

/* Image Slider by www.ferisp.com */
.sliderBox .sliderContainer{display:flex;width:100%;white-space:nowrap;flex-direction:row;overflow:auto;scroll-behavior:smooth}
.sliderBox .sliderContent img{margin-right:20px;border-radius:3px;max-width:720px;max-height:225px;scroll-snap-align:start;box-shadow:0 0 10px 0 rgba(0,0,0,.2)}
@media screen and (max-width:500px){.sliderBox .sliderContent img{width:300px}}
::-webkit-scrollbar{height:8px}
::-webkit-scrollbar-thumb,::-webkit-scrollbar-thumb:hover{background:#ccc;border-radius:50px}
/* Dark Mode */
.drK ::-webkit-scrollbar-thumb,.drK ::-webkit-scrollbar-thumb:hover{background:#666}

• Pilih SIMPAN
• Lanjut pilih postingan
• Pilih TAMPILAN HTML
• Tempel di bagian yang ingin dimasukkan image slider

<div class="sliderBox">
  <div class="sliderContainer">
    <!-- Gambar 1 -->
    <div class="sliderContent">
      <a href="#" target="_blank"><img alt="#" src="URL Gambar" title="#"/></a>
    </div>
    <!-- Gambar 2 -->
    <div class="sliderContent">
      <a href="#" target="_blank"><img alt="#" src="URL Gambar" title="#"/></a>
    </div>
    <!-- Gambar 3 -->
    <div class="sliderContent">
      <a href="#" target="_blank"><img alt="#" src="URL Gambar" title="#"/></a>
    </div>
    <!-- Gambar 4 -->
    <div class="sliderContent">
      <a href="#" target="_blank"><img alt="#" src="URL Gambar" title="#"/></a>
    </div>
    <!-- Tambahan slider -->
  </div>
</div>

• Pilih SIMPAN atau PERBARUI
• Selesai.

Demo

Catatan

Untuk menghapus link di setiap gambar, hapus <a href="#" target="_blank"> dan </a>.

Penutup

Penggunaan image slider umumnya berguna untuk mengelompokkan gambar-gambar agar postingan menjadi lebih rapi. Namun seberapa penting sebenarnya tergantung dari kamu sendiri. Tapi saran saya, pilih widget yang sederhana saja namun tetap menarik.

Mengapa saya mengatakan yang sederhana saja, karena semakin banyak fitur, semakin berat pula ukuran script.

Cukup sekian artikel tentang Cara Memasang Image Slider di Postingan Blog ini, Terima kasih.