Cara Memasang Slider Featured Image Produk di Blogger

Sumber Image Freepic

Hallo semua, lama tidak menulis diblog ini pada kali ini saya akan share tutorial Cara Memasang Slider Featured Image Produk di Blogger. Artikel ini saya dapat dari blog website boshjn.id yang blog membahas tentang hal unik dan tutorial Blogger, biasanya slider featured ini terdapat pada toko online untuk memberikan pengunjung kalau ada promo menarik atau flash sale. 

Ada dua jenis featured ini yang pertama dimana featured tersebut bisa otomatis update sesuai postingan yang kita inginkan dan yang kedua dengan cara manual dimana kita harus memasukkan url gambar tersebut agar slide tersebut bisa berjalan. Untuk tutorial kali ini saya gunakan yang versi kedua yang dimana dilakukan secara manual. 

Nah bagaimana tutorialnya, berikut ini adalah caranya, bisa kalian simak Baik - baik agar tidak salah dalam penerapan nya. 

Cara Memasang Slider Featured Image Produk di Blogger

Langkah pertama yang harus dilakukan adalah memasang CSS dibawah ini :

/* SLIDER */ * {box-sizing:border-box} /* Slideshow container */ .slideshow-container { max-width: 1100px; - ATUR LEBAR SESUAI TEMPLATE ANDA position: relative; margin: auto; } /* Hide the images by default */
.mySlides { display: none; }
/* Next & previous buttons */
.prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; }
/* Position the "next button" to the right */ .next { right: 0; border-radius: 3px 0 0 3px; }
/* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); }
/* Caption text */ .text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; } /* Number text (1/3 etc) */
.numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; }
/* The dots/bullets/indicators */
.dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active, .dot:hover { background-color: #717171; } /* Fading animation */
.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} }

Jangan lupa letakan di atas kode </style> yang ada pada template kalian. 

Lalu salin kode HTML dibawah ini :

<b:if cond='data:blog.homepageUrl == data:blog.url'> <!-- Slider Images --> <div class='slideshow-container'>
<div class='mySlides fade'> <div class='numbertext'/> <img src='https://ecs7.tokopedia.net/img/cache/1242/attachment/2019/5/23/28201197/28201197_06e91fcb-46d1-4f75-9a48-b1ea253d2694.png' style='width:100%;border-radius:20px'/>
<div class='text'>Contoh Tawaran</div>
</div> <div class='mySlides fade'> <div class='numbertext'/> <img src='https://ecs7.tokopedia.net/img/cache/1242/attachment/2019/5/27/26950746/26950746_829906fe-1129-45a8-800d-3364f7dea735.png' style='width:100%;border-radius:20px'/>
<div class='text'>Contoh Iklan</div>
</div> <div class='mySlides fade'> <div class='numbertext'/>
<img src='https://ecs7.tokopedia.net/img/cache/1242/attachment/2019/5/27/28201197/28201197_1c1d30dc-c26b-4fc5-8bcb-59654acb91ef.jpg' style='width:100%;border-radius:20px'/>
<div class='text'>Contoh Produk</div>
</div>
<a class='prev' onclick='plusSlides(-1)'>&#10094;</a> <a class='next' onclick='plusSlides(1)'>&#10095;</a> </div> <div style='text-align:center'>
<span class='dot' onclick='currentSlide(1)'/>
<span class='dot' onclick='currentSlide(2)'/>
<span class='dot' onclick='currentSlide(3)'/> </div> <!-- End --> </b:if>

Penjelasan :

1. Warna Ungu : merupakan url dari gambar slidernya dimana kalian bisa ganti dengan url kalian
2. Warna Orange : Tulisan yang akan tampil pada Slider tersebut kamu bisa tulis sesui dengan kesukaan kalian

Letakan kode HTML diatas tepat di bawah kode <div id='wrapper'> / <div class='wrapper'> apabila tidak ketemu kalian cari yang mirip seperti kode tersebut.

Sekarang memasang Javascript nya kalian salin kode dibawah ini letakan di atas kode </body> :

<script> //<![CDATA[ // Slider var slideIndex = 1; showSlides(slideIndex);
// Next/previous controls function plusSlides(n) 
{ showSlides(slideIndex += n); } // Thumbnail image controls function currentSlide(n) 
{ showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots =
document.getElementsByClassName("dot"); if (n > slides.length) {slideIndex = 1} if (n < 1)
{slideIndex = slides.length} for (i = 0; i < slides.length; i++)
{ slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++)
{ dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = 
"block"; dots[slideIndex-1]
.className += " active"; } //]]> </script>

Setelah itu klik Simpan dan Reflesh blog kamu apakah berfungsi atau tidak apabila tidak berfungsi maka ada yang salah pada pemasangan nya.

Akhir Kata

Nah sobat semua itulah tutorial Cara Memasang Slider Featured Image Produk di Blogger apabila ingin ditanyakan langsung aja melalui kolom komentar ya sobat semua.