Cara Memasang Image Slider di Postingan Blog

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.

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.

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.

Suka menulis berita yang berhubungan dengan dunia teknologi khususnya Blog, Aplikasi, Provider, Smartphone, dan Desktop

7 komentar

  1. Jika ingin di otomatiskan gimana ka? Tanpa di scrool
  2. coba pake code di www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_carousel2
  3. Kalau untuk video gimana ya min?
  4. Min kenapa kalau gambarnya vertical malah gepeng
  5. mantapa min langsung praktek
  6. waduh gatot min ketika diterapkan di blog sya, hasilnya hancur wkwkwk apa yg salah ya
  7. Mantab
Chat via WhatsApp