30 August 2022

Inilah Cara Unik Membuat Slide Gambar Atraktif dan Unik Animasi

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

Inilah Cara Unik Membuat Slide Gambar

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.



Memang dalam dunia desain blog, efek animasi slide show ini sangatlah menjanjikan secara visual. Selain memukau dan membuat pesona indah saat dipandang mata. Kehadiran animasi slide show juga membuat blog itu tampil unik karena gambar atau foto yang ditampilkan tidak semata-mata tampil apa adanya. Tapi ada semacam efek yang bisa dijadikan pandangan mata menjadi takjub. Seperti yang pernah saya buat tutorialnya berikut ini Membuat Slideshow Gambar dengan CSS3

Dalam penerapan slide show ini dan pada tutorial ini saya membuatkan sedikit kode yang bisa kalian terapkan nantinya. Sehingga dengan trik ini, gambar atau foto dari arsip galeri kalian bisa ditampilkan dengan efek slide show. Tidak perlu panjang lebar lagi ya.

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.



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.

Comments

Pesan berupa SPAM, Sara, Iklan, Pornografi, Broken link dan Link Aktif akan kami hapus. Berkomentarlah dengan sopan dan mengikuti panduan mengemukakan pendapat yang baik.
EmoticonEmoticon