Memasang slide foto dalam sebuah blog dapat menambah keindahan tampilan blog itu sendiri, namun perlu diperhatikan jangan terlalu banyak memasang slide foto pada blog karena bisa menggangu loading blog tersebut, blog akan terasa berat dan loadinganya bisa menjadi lama bila anda salah memilih pemasangan slide foto.
Untuk itu saya akan berbagi bagaimana Cara Memasang Slide Foto Dengan Mudah dan Ringan yang tentunya tidak akan menyebabkan blog anda menjadi lelet. Langsung saja simak langkah penerapannya berikut ini!
Pertama letakan kode css ini di atas ]]></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;}}Selanjutnya tempelkan kode berikut di atas
<script src='https://cdn.statically.io/gh/ricods18/official/main/slide.js' type='text/javascript'/>Save Template.
Langkah terakhir kita tinggal masukan kode pemanggil di bawah ini, terserah anda bisa taruh dalam postingan (Mode HTML) atau Add widget pada sidebar.
<h2><font color="#0000ff">Berikut Contoh Slide Foto</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>
Kode yang warna kuning anda bisa ganti dengan URL gambar anda dan untuk kata-kata yang ada kalian bisa sesuaikan sendiri. Selamat mencoba dan berkreasi!