بِسْــــــــــــــــمِ اﷲِالرَّØْÙ…َÙ†ِ الرَّØِيم
Slideshow dengan gambar adalah menampilkan gambar bergantian dengan efek-efek tertentu. Tentunya hal itu bisa menjadikan gambar yang tampil bisa menjadi rapi dan keren. Dan postingan juga bisa menjadi semakin bagus.
Sudah beberapa blogger mengulas tentang hal ini, tentunya juga termasuk saya. Karena sebenarnya saya punya niat membantu teman saya untuk menampilkan ide ini ke dalam blog saya. Terus saya coba.
Baca Juga : Cara Embed Video Youtube Agar Responsive dan Ringan di Berbagai Perangkat
Dan permintaan itu pun langsung saya iyakan dan saya buat caranya. Sumber teknik ini berasal dari website W3School. Website untuk mempelajari berbagai bahasa pemrograman dan sudah valid menurut saya. Karena W3 recommended para blogger yang ingin mempelajari bahasa pemrograman tingkat lanjut.
Baca Juga : Membagi Artikel di Blog Menjadi 2 Kolom Supaya Rapi dan Indah
Berikut ini contohnya :
Jadwal Dokter Spesialis di RSI
Nama Dokter + Jadwal Praktek
1 / 3
2 / 3
3 / 3
Nah itu dia sudah keluar dengan cantiknya slideshow gambar yang sudah kita utak-atik dan diberikan sedikit sentuhan CSS. Sekarang kita akan mempraktekkan langsung bagaimana cara membuatnya.
Membuat Slideshow Gambar dengan CSS
Masuk dulu ke Dashboard Blogger
Klik Tema
Klik Sesuaikan : Edit HTML
Terus cari kode ]]></b:skin>
Tempelkan kode dibawah persis diatas kode ]]></b:skin>
.slideshow-container{max-width:1000px;position:relative;margin:auto;}
.text{color:#f2f2f2;font-size:15px;padding:8px 12px;position:absolute;bottom:8px;width:100%;text-align:center;}
.numbertext{color:#f2f2f2;font-size:12px;padding:8px 12px;position:absolute;top:0;}
.dot{height:15px;width:15px;margin:0 2px;background-color:#bbb;border-radius:50%;display:inline-block;transition:background-color 0.6s ease;}
.active{background-color:#717171;}
.fade{-webkit-animation-name:fade;-webkit-animation-duration:1.5s;animation-name:fade;animation-duration:1.5s;}
@-webkit-keyframes fade{from{opacity:.4;}to{opacity:1;}}
@keyframes fade{from{opacity:.4;}to{opacity:1;}}
@media only screen and (max-width:300px){.text{font-size:11px;}}Kemudian masuk Postingan Baru
Taruh kode berikut untuk menampilkan slide show gambarnya.
Seperti ini kodenya :
<h2><font color="#0000ff">Jadwal Dokter Spesialis RSI</font></h2><p>Nama Dokter + Jadwal Praktek</p><div class="slideshow-container"><div class="mySlides fade"><div class="numbertext">1 / 3</div><img src="URL gambar pertama kamu"style="width:100%"><div class="text">Dokter Makmun / Spesialis Syaraf:Kamis Jam 14.00 - Selesai</div></div><div class="mySlides fade"><div class="numbertext">2 / 3</div><img src="URL gambar kedua kamu"style="width:100%"><div class="text">Dokter Suharjono / Spesialis Dalam:Jumat Jam 09.00 - Selesai</div></div><div class="mySlides fade"><div class="numbertext">3 / 3</div><img src="URL gambar ketiga kamu"style="width:100%"><div class="text">Dokter Woro / Spesialis Anak:Senin Jam 10.00 - Selesai</div></div></div><br><div style="text-align:center"><span class="dot"></span><span class="dot"></span><span class="dot"></span></div>Untuk URL gambar pertama, URL gambar kedua, URL gambar ketiga diisi dengan URL gambar milik kamu yang sudah kamu upload di blog.
Dan sekarang yang terakhir.
Kalian tempelkan kode berikut diatas kode </body>. Ini masuk lagi ke utak-atik Template.
<script src='https://cdn.jsdelivr.net/gh/Alifacode/backupmaster@main/ALIFACODESLIDESHOW.js' type='text/javascript'/>See the Pen Membuat Slideshow Gambar dengan CSS by Alifacode (@Alifacode) on CodePen.
Nah sekarang sudah jadi slideshow nya khan? Semoga jadi bagus dan bisa dilihat di berbagai perangkat - Desktop dan Mobile *HP -. Sekian artikel yang berjudul Membuat Slideshow Gambar dengan CSS semoga bermanfaat bagi kalian semua. Dan blog kalian semakin bagus dengan efek slideshow gambar ini. Terima kasih. Ketemu besok di lain waktu di blog yang sama, URL yang sama dengan artikel yang berbeda :D .. Salam.
Label Postingan :
CSS
Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Membuat Slideshow Gambar dengan CSS . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.
