Inilah Cara Unik Membuat Slide Gambar Atraktif dan Unik Animasi

agung wisudhatama August 30, 2022 Komentar

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

SLIDE show gambar atau foto yang ada di postingan sering kita lihat. Biasanya slideshow gambar ini dipasang pada bagian awal atau atas blog seperti di item Featured Post. Di bagian inilah animasi slide show tampil memukau. Gambar atau foto yang terpasang bisa silih berganti hanya dengan kode tertentu.

Hanya tatkala memasang trik ini memang dipertimbangkan sekali lagi soal loading blog. Karena tentu saja penggunaan javascript yang notabene elemen pendukung dari trik ini memang dapat memberatkan loading blog. Maka tak heran bila pemasangan ini meski secara hati-hati dan memikirkan efek samping yang harus dipikirkan oleh seorang blogger.

Inilah Cara Unik Membuat Slide Gambar Atraktif dan Unik Animasi

1. Pertama-tama kalian masuk ke blogger dengan akun kalian.
2. Kemudian masuk lagi ke template / tema dari blogger itu.
3. Lalu pilih Sesuaikan / Edit HTML.
4. Cari kode ]]></b:skin> dan tempelkan kode dibawah ini persis diatasnya

*,*:before,*:after{padding:0;margin:0;box-sizing:border-box;}
body{height:100vh;background:linear-gradient(
135deg,#8052ec,#d161ff
);}
.container{background-color:#ffffff;width:60%;min-width:520px;position:absolute;transform:translate(-50%,-50%);left:50%;top:50%;border-radius:5px;padding:30px;box-shadow:0 15px 30px rgba(0,0,0,0.3);}
.image-container{position:relative;width:100%;}
img{position:relative;width:100%;display:none;}
.active{display:block;}
.dot-container{width:150px;margin:20px auto 0 auto;display:flex;align-items:center;justify-content:space-around;}
button{outline:none;cursor:pointer;}
.dot-container button{height:13px;width:13px;border-radius:50%;border:3px solid #8052ec;background-color:transparent;}
.dot-container button:nth-child(1){background-color:#8052ec;}
#prev,#next{height:40px;width:40px;position:absolute;background-color:#8052ec;color:#ffffff;margin:auto;top:0;bottom:0;border:none;border-radius:3px;font-size:18px;font-weight:bolder;}
#prev{left:15px;}
#next{right:15px;}

Selanjutnya kita tanamkan kode dibawah ini persis diatas kode </body> ini masih di template

<script type='text/javascript'> 
//<![CDATA[
let i = 0; // current slide
let j = 4; // total slides
const dots = document.querySelectorAll(".dot-container button");
const images = document.querySelectorAll(".image-container img");
function next(){
    document.getElementById("content" + (i+1)).classList.remove("active");
    i = ( j + i + 1) % j;
    document.getElementById("content" + (i+1)).classList.add("active");
    indicator( i+ 1 );
}
function prev(){
    document.getElementById("content" + (i+1)).classList.remove("active");
    i = (j + i - 1) % j;
    document.getElementById("content" + (i+1)).classList.add("active");
    indicator(i+1);
}
function indicator(num){
    dots.forEach(function(dot){
        dot.style.backgroundColor = "transparent";
    });
    document.querySelector(".dot-container button:nth-child(" + num + ")").style.backgroundColor = "#8052ec";
}
function dot(index){
    images.forEach(function(image){
        image.classList.remove("active");
    });
    document.getElementById("content" + index).classList.add("active");
    i = index - 1;
    indicator(index);
}
//]]> 
</script>

Yang terakhir tempelkan kode ini di Postingan kalian. Silakan langsung dicopy saja

<div class="container">
<div class="image-container">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRW5vlLDhfoGrwe2P_1KBjpDXd_TIaEVJppxfKHOMP2vqrdpVlITEC_Oqwtn_DLuekiKizBew0O3t3P0K-gflj23-FjCs66rEm4aY9ksrfb6dCOYBFpmFzJspZ0fiCEGjR45ngjgbMfWxeYAqhkWsoY4y_eHyJvpPfqX1Hxc5rUuqKcIksLzkyxI18/s1600/image-slade-1-tutorialdemo.jpg" id="content1" class="active">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2eMHSJHzBpQaOZ4b6J6nzcpgHIHqGbHM-DB0VXbxDCfo6Jai4NCn8hmaLrm31pPeXl_lBaH00ZTHcEMuklDj9-CqIl49WKCfT1GJWzbtMba5tPTt33jMdz3UlaKHYTSPXTZwQ620spZiGwIZvsJV-x2Ub1_WnSOo9hYZ2qzKN3en9x7qK1MceiTay/s1600/image-slade-2-tutorialdemo.jpg" id="content2">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5asWYFFFQg2ngl0zr6oMZuC0lBW2yxVnadaRnvSyZUxIreiC5pP1qY3mbym9e5BxlXzQtYV-X63HfsHwxND8hZDtyNX4TpGEpuMda74Jc2Zsx6Ig9V7Ef_cYo3iYXgFwshOffuP6er1tHyT3_zd5l8PVmZtBnkSM9OFtJlho-yQySPj5BfC_aJeOy/s1600/image-slade-3-tutorialdemo.jpg" id="content3">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZYSxs5vriFTDx7Yw09zf9BNqvC34UszB_hEom7izzaCSJbpgYkJQJqk5v63pWG0zxXQ-DbIbnsSzYB8_iFLFpobTR4xwJ4LZMXxr8OMBbaTE4-MWSCBvwIQJ7YjJoanYNJxxGoKw09aTa1dn0rFuImGYyfsNrCpp0Pde9atleEZkpZ0pLOOtnJqdz/s1600/image-slade-4-tutorialdemo.jpg" id="content4">
</div>
<div class="dot-container">
<button onclick = "dot(1)"></button>
<button onclick = "dot(2)"></button>
<button onclick = "dot(3)"></button>
<button onclick = "dot(4)"></button>
</div>
<button id="prev" onclick="prev()"> &lt; </button>
<button id="next" onclick="next()"> &gt; </button>
</div>

Catatan :
Untuk IMG gambar ganti dengan punyamu.

Terima kasih yang sudah mau mampir disini di artikel Cara Membuat Slide Gambar Atraktif dan Unik Mode Animasi. Selama kita mampu membantu, kenapa tidak. Sedekahlah karena hartamu tidak akan berkurang, malah akan tergantikan dengan harta yang selalu berlipat ganda. Sekian. Maaf sudah lama tidak update. Soalnya masih membagi waktu dengan kerjaan di dunia nyata. Pekerjaan di RS sudah banyak menyita waktu. Besok disambung lagi ya.

DEMO

Bagikan ke teman-teman kamu

Label Postingan : CSS , Javascript , Tips Blog

Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Inilah Cara Unik Membuat Slide Gambar Atraktif dan Unik Animasi . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.