APMODY: the best blogger template for posting apps as well as articles in one blog.. Test link Get now!

Cara membuat gambar slider dipostingan blogger

di artikel kali ini saya akan membagikan cara membuat cara membuat widget slider gambar di blogger yang dapat anda gunakan untuk gambar di blog anda.

hai Atlover,di artikel kali ini saya akan membagikan cara membuat cara membuat widget slider gambar di blogger yang dapat anda gunakan untuk gambar di blog anda.

widget slider ini memiliki futur pada umumnya,hanya saja widget ini sangat ringan dan hanya menggunakan css dan html.jadi widget ini sangat cocok digunakan di blog anda.

widget ini bisa ringan karena hanya mengadalkan efek scroll kanan dan kiri saja.

namun widget ini belum begitu sempurna dikarenakan saya hanya memahami sedikit css dan html,dan jika ada masalah atau tidak responsif di mode dekstop mohon dimaklumi karena saya hanya membuatnya menggunakan smartphone karena laptop saya lagi rusak😁.

Apa fungsi widget ini

widget ini berfungsi untuk menyembunyikan gambar dan mengharuskan user untuk menscroll kekanan atau kiri,itu aja sih yang saya tahu.

Bagaimana cara membuatnya?

Demo
  • langkah pertama login ke akun blogger anda masing masing.
  • langkah kedua pilih Tema kemudian klik titik tiga dan klik edit html.
  • setelah itu salin dan letakkan kode css dibawah ini tepat di atas kode ]]></b:skin>.
/*css slider by Alfatechnesia*/
.AtsliderIMG .slides {
     display: flex; 
     white-space: nowrap;
     width: 100%; 
     flex-direction: row; 
     overflow: auto;
     scroll-behavior: smooth; 
     padding: 20px 0 0; 
}
.AtsliderIMG .AtsliderIMG-content img {
     border-radius: 15px;
     max-height: 225px;
     max-width: 720px;
     margin: 0 5px;
     scroll-snap-align: start;
}
  • jika anda sudah meletakkan kode css diatas jangan lupa klik simpan Tema
  • kemudian silakan anda letakkan kode html dibawah ini di postingan atau halaman blog anda

<div class="AtsliderIMG">
<div class="slides">
  <!-- [Link Gambar 1] -->
  <div class="AtsliderIMG-content"><img aria-hidden="true" src="image link"></div>
 <!-- [Link Gambar 2] -->
 <div class="AtsliderIMG-content"><img aria-hidden="true" src="image link"></div>
 <!-- [Link Gambar 3] -->
 <div class="AtsliderIMG-content"><img aria-hidden="true" src="image link"></div>
 <!-- [Link Gambar 4] -->
 <div class="AtsliderIMG-content"><img aria-hidden="true" src="image link"></div>
 </div>
 </div>
  • silakan ganti image link dengan link gambar anda
  • langkah terakhir silakan klik publikasikan atau simpan postingan

sekian artikel saya kaliini semoga bermamfaat dan jika ada yang tidak dimengerti dan ada yang ingin ditanyakan silahkan berkomentar di komentar bawah ini

Anda mungkin menyukai postingan ini

4 komentar

Masukkan URL Gambar / Cuplikan Kode / Kutipan / tag nama, lalu klik tombol parse sesuai yang sudah anda masukkan. kemudian salin hasil parse dan tempelkan ke kolom komentar.


  1. Best Article !!
    Love from techyjeeshan.xyz ❤️❤️❤️
    1. Thank you
  2. How we can add auto slides to this slider.
    1. please replace the image link text with your image link
Cookie Consent

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.

Google Translate
Bookmark Post